Merge branch 'issue/#215-space-saving-proposal' into 'develop'

save space wherever possible

See merge request subugoe/emo/Qviewer!134

src/App.vue

@@ -14,6 +14,8 @@
       :itemurls="itemurls"
       :manifests="manifests"
       :panels="panels"
+      :projectcolors="config.colors"
+      :standalone="config.standalone"
     />
 
     <q-page-container class="root">
@@ -32,19 +34,11 @@
         :tree="tree"
       />
     </q-page-container>
-
-    <q-footer>
-      <Footer
-        :projectcolors="config.colors"
-        :standalone="config.standalone"
-      />
-    </q-footer>
   </q-layout>
 </template>
 
 <script>
 import { colors } from 'quasar';
-import Footer from '@/components/footer.vue';
 import Header from '@/components/header.vue';
 import Panels from '@/mixins/panels';
 
@@ -52,7 +46,6 @@ export default {
   name: 'TIDO',
   components: {
     Header,
-    Footer,
   },
   mixins: [Panels],
   data() {

src/components/content.vue

@@ -19,18 +19,18 @@
       />
     </q-tabs>
 
-    <div>
+    <div class="q-px-sm">
       <q-btn
         class="cursor-pointer"
         flat
         round
-        size="md"
+        size="sm"
         title="Increase Textsize"
         @click="increase()"
       >
         <q-icon
           :name="fasSearchPlus"
-          size="sm"
+          size="xs"
           :color="$q.dark.isActive ? 'white' : 'accent'"
         />
       </q-btn>
@@ -39,14 +39,14 @@
         class="cursor-pointer"
         flat
         round
-        size="md"
+        size="sm"
         title="Decrease Textsize"
         :color="$q.dark.isActive ? 'white' : 'accent'"
         @click="decrease()"
       >
         <q-icon
           :name="fasSearchMinus"
-          size="sm"
+          size="xs"
           :color="$q.dark.isActive ? 'white' : 'accent'"
         />
       </q-btn>

src/components/footer.vue

@@ -2,14 +2,16 @@
   <q-toolbar
     :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
   >
-    <div
-      bordered
-      class="row justify-start items-center"
-      reveal
-    >
-      <Language v-if="standalone" />
-      <Color :projectcolors="projectcolors" />
-      <Softwareinfo />
+    <div class="footer__wrap">
+      <div
+        bordered
+        class="row justify-center items-center"
+        reveal
+      >
+        <Language v-if="standalone" />
+        <Color :projectcolors="projectcolors" />
+        <Softwareinfo />
+      </div>
     </div>
   </q-toolbar>
 </template>
@@ -35,3 +37,10 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.footer__wrap {
+  margin: 0 auto;
+  max-width: 1200px;
+}
+</style>

src/components/header.vue

 <template>
-  <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"
-        :collectiontitle="collectiontitle"
-        :item="item"
-        :manifests="manifests"
-      />
-    </q-toolbar>
+  <q-header :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'">
+    <div class="header__wrap">
+      <q-toolbar>
+        <Infobar
+          v-if="config.headers.info && manifests.length"
+          class="col-xs-12"
+          :collectiontitle="collectiontitle"
+          :item="item"
+          :manifests="manifests"
+        />
+      </q-toolbar>
 
-    <q-toolbar
-      elevated
-      :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
-    >
-      <Navbar
-        v-if="config.headers.navigation"
-        :itemurls="itemurls"
-        :labels="config.labels"
-        :manifests="manifests"
-      />
+      <div>
+        <q-toolbar class="q-pb-sm">
+          <Navbar
+            v-if="config.headers.navigation"
+            :itemurls="itemurls"
+            :labels="config.labels"
+            :manifests="manifests"
+          />
 
-      <q-space />
+          <q-space />
 
-      <ToggleIndex
-        v-if="config.headers.toggle"
-        :panels="panels"
-      />
-    </q-toolbar>
+          <ToggleIndex
+            v-if="config.headers.toggle"
+            :panels="panels"
+          />
+          <Language v-if="standalone" />
+          <Color :projectcolors="projectcolors" />
+          <Softwareinfo />
+        </q-toolbar>
+      </div>
+    </div>
   </q-header>
 </template>
 
 <script>
+import Color from '@/components/color.vue';
 import Infobar from '@/components/infobar.vue';
+import Language from '@/components/language.vue';
 import Navbar from '@/components/navbar.vue';
+import Softwareinfo from '@/components/softwareinfo.vue';
 import ToggleIndex from '@/components/togglebar/toggleIndex.vue';
 
 export default {
   name: 'Header',
   components: {
+    Color,
     Infobar,
+    Language,
     Navbar,
+    Softwareinfo,
     ToggleIndex,
   },
   props: {
@@ -75,20 +82,18 @@ export default {
       type: Array,
       default: () => [],
     },
+    projectcolors: {
+      type: Object,
+      default: () => {},
+    },
+    standalone: Boolean,
   },
 };
 </script>
 
 <style lang="scss" scoped>
-header {
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.bar {
-  margin-left: auto;
-  margin-right: auto;
+.header__wrap {
+  margin: 0 auto;
   max-width: 1200px;
 }
 </style>

src/components/infobar.vue

 <template>
   <div>
-    <h1 class="text-h4 text-bold text-uppercase">
+    <h1 class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs">
       {{ collectiontitle }}
     </h1>
-    <h2 class="text-h5 text-bold text-uppercase q-mt-none q-mb-ml">
+    <h2 class="text-h6 text-bold text-uppercase q-mt-none q-mb-none">
       <span>{{ manifesttitle }}</span>
       <q-icon
         class="q-pb-xs q-pl-sm q-pr-sm"
-        size="sm"
+        size="xs"
         :color="$q.dark.isActive ? 'white' : 'accent'"
         :name="fasChevronRight"
       />
@@ -55,10 +55,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.title {
-  font-size: 28px !important;
-  letter-spacing: 2px;
-}
-</style>

src/components/metadata.vue

 <template>
-  <div class="item-content">
+  <div class="item-content panel__meta">
     <!-- Collection-->
-    <q-list v-if="config.meta.collection.all && Object.keys(collection).length">
-      <q-item class="q-px-none">
-        <q-item-section class="text-h6 caps">
+    <q-list
+      v-if="config.meta.collection.all && Object.keys(collection).length"
+      dense
+    >
+      <q-item class="no-padding">
+        <q-item-section
+          dense
+          class="text-h6 caps"
+        >
           Collection
         </q-item-section>
       </q-item>
@@ -11,9 +17,13 @@
       <q-item
         v-for="(mCollection, index) in metadataCollection"
         :key="index"
-        class="q-px-none"
+        dense
+        class="q-mb-xs no-padding"
       >
-        <q-item-section v-if="Object.keys(mCollection).length">
+        <q-item-section
+          v-if="Object.keys(mCollection).length"
+          class="q-mb-xs"
+        >
           <q-item-label
             overline
             class="text-uppercase"
@@ -26,17 +36,14 @@
           </q-item-label>
         </q-item-section>
       </q-item>
-
-      <q-separator
-        v-if="showSeparator(config.meta.collection.all && (config.meta.manifest.all || config.meta.item.all))"
-        class="q-mt-md q-mb-sm"
-        inset
-      />
     </q-list>
 
     <!-- Manifest-->
-    <q-list v-if="config.meta.manifest.all && itemcount">
-      <q-item class="q-px-none">
+    <q-list
+      v-if="config.meta.manifest.all && itemcount"
+      dense
+    >
+      <q-item class="no-padding">
         <q-item-section class="text-h6 caps">
           {{ labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
         </q-item-section>
@@ -45,9 +52,9 @@
       <q-item
         v-for="(mManifest, index) in metadataManifest"
         :key="index"
-        class="q-px-none"
+        class="q-mb-xs no-padding"
       >
-        <q-item-section>
+        <q-item-section class="q-mb-xs">
           <q-item-label
             overline
             class="text-uppercase"
@@ -65,9 +72,9 @@
         <q-item
           v-for="(meta, idx) in manifests[sequenceindex].metadata"
           :key="idx"
-          class="q-px-none"
+          class="q-mb-xs no-padding"
         >
-          <q-item-section>
+          <q-item-section class="q-mb-xs no-padding">
             <q-item-label
               overline
               class="text-uppercase"
@@ -81,15 +88,12 @@
       </div>
     </q-list>
 
-    <q-separator
-      v-if="showSeparator(config.meta.manifest.all && config.meta.item.all)"
-      inset
-      class="q-mt-md q-mb-sm"
-    />
-
     <!-- Item-->
-    <q-list v-if="config.meta.item.all">
-      <q-item class="q-px-none">
+    <q-list
+      v-if="config.meta.item.all"
+      dense
+    >
+      <q-item class="no-padding">
         <q-item-section class="text-h6 caps">
           {{ labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
         </q-item-section>
@@ -98,9 +102,12 @@
       <q-item
         v-for="(mItem, index) in metadataItem"
         :key="index"
-        class="q-px-none"
+        class="q-mb-xs no-padding"
       >
-        <q-item-section v-if="Object.keys(mItem).length">
+        <q-item-section
+          v-if="Object.keys(mItem).length"
+          class="q-mb-xs"
+        >
           <q-item-label
             overline
             class="text-uppercase"
@@ -225,3 +232,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.panel__meta {
+  padding: 8px;
+}
+</style>

src/components/navbar.vue

@@ -4,29 +4,35 @@
       unelevated
       :color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
       :disabled="itemindex <= 0"
+      size="xs"
+      style="font-size: 14px;"
+      padding="xs"
+      class="q-px-sm"
       @click="toggleSheet(--itemindex)"
     >
       <q-icon
-        class="q-pr-sm"
         :name="fasArrowLeft"
-        size="sm"
+        size="16px"
+        class="q-pr-xs"
       />
       {{ captionprev }}
     </q-btn>
 
     <q-btn
-      size="md"
       unelevated
       :color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
       :disabled="itemindex >= itemurls.length - 1"
+      size="xs"
+      style="font-size: 14px;"
+      padding="xs"
+      class="q-px-sm"
       @click="toggleSheet(++itemindex)"
     >
       {{ captionnext }}
-
       <q-icon
         :name="fasArrowRight"
-        size="sm"
-        class="q-pl-sm"
+        size="16px"
+        class="q-pl-xs"
       />
     </q-btn>
   </div>

src/components/openseadragon.vue

@@ -10,11 +10,12 @@
         :key="idx"
         flat
         round
-        size="md"
+        size="sm"
         :color="$q.dark.isActive ? 'white' : 'accent'"
+        class="q-ml-xs q-mt-xs"
       >
         <q-icon
-          size="sm"
+          size="xs"
           :name="btn.svg"
         />
       </q-btn>

src/components/togglebar/toggleFilter.vue

 <template>
   <div>
     <q-btn-dropdown
-      v-if="$q.screen.width < 1100"
+      v-if="$q.screen.width < 1200"
       :dropdown-icon="fasCaretDown"
       outline
       flat
       :class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
-      label="Toggle panels"
+      label="Show/Hide Panels"
     >
       <slot />
     </q-btn-dropdown>

src/components/toolbar.vue

 <template>
-  <q-toolbar>
-    <q-toolbar-title class="text-h6 absolute-center">
-      {{ heading | capitalize }}
-    </q-toolbar-title>
-  </q-toolbar>
+  <div class="text-body1 text-weight-medium text-center q-pb-xs q-pt-xs">
+    {{ heading | capitalize }}
+  </div>
 </template>
 
 <script>

src/css/tree.scss

 .item-content {
+  .q-tree__node-body.relative-position {
+    /* stylelint-disable */
+    padding: 4px;
+    /* stylelint-enable */
+  }
+
   .q-tree__node-collapsible .q-tree__children {
     /* FIXME: scss linting error because to much nesting */
     /* stylelint-disable */
@@ -35,6 +41,11 @@
   .q-tree__children {
     cursor: pointer;
   }
+
+  .q-tree__node-header-content {
+    word-break: break-all;
+  }
+
 }
 
 .q-tab__label {

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-      "entrypoint": "",
+      "entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
       "colors": {
         "primary": "",
         "secondary": "",

src/views/mainview.vue

@@ -173,6 +173,5 @@ export default {
   flex: 1;
   flex-direction: column;
   overflow: scroll;
-  padding: 8px;
 }
 </style>