Commit 4ac6be6d authored by dindigala's avatar dindigala
Browse files

refactor: adjusted header toolbar and styles

parent 6e77418f
Pipeline #185468 passed with stages
in 5 minutes and 54 seconds
......@@ -5,18 +5,16 @@
class="app"
style="height: 100vh;"
>
<q-header>
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:imageurl="imageurl"
:item="item"
:itemurls="itemurls"
:manifests="manifests"
:panels="panels"
/>
</q-header>
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:imageurl="imageurl"
:item="item"
:itemurls="itemurls"
:manifests="manifests"
:panels="panels"
/>
<q-page-container class="root">
<router-view
......
......@@ -3,7 +3,7 @@
<q-tabs
v-model="activeTab"
dense
class="text-grey q-mb-lg"
class="text-grey q-mb-sm"
active-color="$q.dark.isActive ? 'white' : 'accent'"
indicator-color="$q.dark.isActive ? 'white' : 'accent'"
align="justify"
......@@ -21,7 +21,7 @@
<div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
class="cursor-pointer"
flat
round
size="md"
......@@ -36,7 +36,7 @@
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
class="cursor-pointer"
flat
round
size="md"
......@@ -54,7 +54,7 @@
<!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
<div
:class="['scroll-panel', 'item-content', config.rtl ? 'rtl' : '']"
:class="['item-content', config.rtl ? 'rtl' : '']"
ref="contentsize"
v-html="content"
/>
......@@ -182,4 +182,12 @@ export default {
.default-cursor {
cursor: default !important;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: scroll;
padding: 8px;
}
</style>
<template>
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<div class="bar row justify-between items-center">
<q-header>
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Infobar
v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
......@@ -11,38 +11,24 @@
:item="item"
:manifests="manifests"
/>
</div>
</q-toolbar>
<div class="bar row q-px-md justify-sm-between">
<q-toolbar>
<Navbar
v-if="config.headers.navigation"
class="
col
col-md-4
col-xs-12
column-xs
justify-md-start
justify-xs-center
row-sm"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
/>
<q-space />
<ToggleIndex
v-if="config.headers.toggle"
class="
col
col-md-auto
col-xs-12
column-xs
content-sm-center
justify-sm-evenly
row-sm"
:panels="panels"
/>
</div>
</q-toolbar>
</q-toolbar>
</q-header>
</template>
<script>
......
<template>
<div class="scroll-panel">
<div>
<!-- Collection-->
<q-list v-if="config.meta.collection.all && Object.keys(collection).length">
<q-item class="q-px-none">
......
<template>
<div>
<q-btn
class="q-mb-md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex <= 0"
......@@ -16,7 +15,6 @@
</q-btn>
<q-btn
class="q-mb-md"
size="md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
......
<template>
<figure id="openseadragon">
<nav class="sticky">
<figure id="openseadragon" class="item">
<nav>
<q-btn
v-for="(btn, idx) in buttons"
:id="btn.id"
:key="idx"
class="q-mr-sm q-mb-sm"
flat
round
size="md"
......
<template>
<div class="filter-buttons">
<div>
<q-btn-dropdown
v-if="$q.screen.width < 1100"
:dropdown-icon="dropicon"
outline
flat
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
class="q-mb-md q-mr-md"
label="Toggle panels"
>
<slot />
......@@ -14,7 +13,7 @@
<div
v-else
class="q-mb-md without-dropdown q-mr-md"
class="without-dropdown"
>
<slot />
</div>
......@@ -32,11 +31,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.filter-buttons {
align-items: center;
display: flex;
justify-content: center;
}
</style>
<template>
<div class="item">
<q-tree
class="view-tree item-content"
class="item-content"
label-key="label-key"
node-key="label"
:expanded.sync="expanded"
......
.scroll-panel {
position: relative;
.sticky {
// background: $light;
display: flex;
justify-content: flex-start;
left: 0;
position: sticky;
top: 0;
width: 100%;
z-index: 99;
}
}
.caps {
font-variant: small-caps;
}
......@@ -23,25 +8,10 @@
}
}
.content-panel .q-tab-panel {
padding: 8px;
> * {
padding: 0 !important;
}
}
.without-dropdown > * {
display: flex;
}
.scroll-panel {
// @include make-responsive-height();
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.panels-target > * {
border-right: 1px solid #ddd !important;
flex: auto;
......
.view-tree {
.item-content {
.q-tree__node-collapsible .q-tree__children {
/* FIXME: scss linting error because to much nesting */
/* stylelint-disable */
......@@ -32,10 +32,6 @@
}
}
.q-tree__node-header-content.col.row.no-wrap.items-center {
z-index: 99;
}
.q-tree__children {
cursor: pointer;
}
......
......@@ -41,7 +41,6 @@
<q-tab-panels
v-model="p.tab_model"
animated
class="content-panel"
keep-alive
>
<q-tab-panel
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment