refactor: adjusted header toolbar and styles

src/App.vue

@@ -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

src/components/content.vue

@@ -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>

src/components/header.vue

 <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>

src/components/metadata.vue

 <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">

src/components/navbar.vue

 <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'"

src/components/openseadragon.vue

 <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"

src/components/togglebar/toggleFilter.vue

 <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>

src/components/tree.vue

 <template>
   <div class="item">
     <q-tree
-      class="view-tree item-content"
+      class="item-content"
       label-key="label-key"
       node-key="label"
       :expanded.sync="expanded"

src/css/global.scss

-.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;

src/css/tree.scss

-.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;
   }

src/views/mainview.vue

@@ -41,7 +41,6 @@
         <q-tab-panels
           v-model="p.tab_model"
           animated
-          class="content-panel"
           keep-alive
         >
           <q-tab-panel