fix: fixed the bug regarding metadata and refactored OSD stylings.

src/components/metadata.vue

 <template>
-  <div class="scroll">
+  <div>
     <q-list v-if="Object.keys(collection).length">
       <q-item>
         <q-item-section class="text-h6 caps">Collection</q-item-section>
@@ -38,7 +38,7 @@
     <q-list>
       <q-item>
         <q-item-section class="text-h6 caps">
-          {{ labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
+          {{ config.labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
         </q-item-section>
       </q-item>
 
@@ -55,7 +55,7 @@
     <q-list>
       <q-item>
         <q-item-section class="text-h6 caps">
-          {{ labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
+          {{ config.labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
         </q-item-section>
       </q-item>
 
@@ -81,6 +81,7 @@ export default {
   name: 'Metadata',
   props: {
     collection: Object,
+    config: Object,
     itemlabel: String,
     labels: Object,
     language: String,

src/components/openseadragon.vue

 <template>
-  <div class="q-pa-md q-gutter-sm overflow-hidden">
-    <div class="scroll">
-      <figure id="openseadragon" class="scroll-panel">
-        <nav class="sticky">
-          <q-btn
-            v-for="(btn, idx) in buttons" :key="idx"
-            class="q-mr-sm q-mb-sm"
-            color="grey-8"
-            flat
-            round
-            size="md"
-            :id="btn.id"
-            >
-            <q-icon size="sm" :name="btn.svg" />
-          </q-btn>
-        </nav>
-      </figure>
-    </div>
-  </div>
+  <figure id="openseadragon" style="margin-top: 0px; padding: 8px">
+    <nav class="sticky">
+      <q-btn
+        v-for="(btn, idx) in buttons" :key="idx"
+        class="q-mr-sm q-mb-sm"
+        color="grey-8"
+        flat
+        round
+        size="md"
+        :id="btn.id"
+        >
+        <q-icon size="sm" :name="btn.svg" />
+      </q-btn>
+    </nav>
+  </figure>
 </template>
 
 <script>

src/components/tabs.vue

-<template>
-  <q-card flat>
-    <q-tabs v-model="tab" active-bg-color="grey-4" align="right">
-      <q-tab v-for="panel in panels"
-        :key="panel.order"
-        :label="panel.heading"
-        :name="panel.heading"
-      />
-    </q-tabs>
-
-    <q-separator />
-
-    <q-tab-panels v-model="tab" animated class="content-panel" keep-alive>
-      <q-tab-panel v-for="panel in panels" :key="panel.order" :name="panel.heading">
-        <component :is="panel.heading" v-bind="$props" />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
-</template>
-
-<script>
-import Metadata from '@/components/metadata.vue';
-import Treeview from '@/components/tree.vue';
-
-export default {
-  name: 'Tabs',
-  components: {
-    Metadata,
-    Treeview,
-  },
-  props: {
-    collection: Object,
-    config: Object,
-    itemlabel: String,
-    labels: Object,
-    language: String,
-    manifests: Array,
-    tree: Array,
-  },
-  data() {
-    return {
-      panels: [],
-      tab: '',
-    };
-  },
-  created() {
-    Object.values(this.config.panels).forEach((panel) => {
-      if (panel.tab === true) {
-        this.panels.push(panel);
-      }
-    });
-    this.tab = this.config.panels.tabs.default;
-  },
-  mounted() {
-  },
-};
-</script>

src/components/togglebar/panelsposition.vue

@@ -3,7 +3,7 @@
     <q-btn class="btn-panel" :icon="panelicon" @click="status = true" label="Configure" flat />
 
     <q-dialog v-model="status" persistent transition-show="scale" transition-hide="scale">
-      <q-card class="bg-teal text-white" style="width: 450px">
+      <q-card class="bg-white text-black" style="width: 450px">
         <q-card-section>
           <div class="text-h6 text-capitalize">Customize Panels</div>
         </q-card-section>
@@ -12,7 +12,7 @@
           <Dragboxes :boxs="panelboxes" @updated="(b) => $root.$emit('panels-position', b)" />
         </q-card-section>
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right" class="bg-white text-black">
           <q-btn flat label="OK" v-close-popup />
         </q-card-actions>
       </q-card>

src/components/util/dragboxes.vue

@@ -5,7 +5,7 @@
     <Draggable v-model="results" @change="$emit('updated', results)">
       <transition-group class="panel-container">
         <div v-for="(box, i) in results" :key="`box${i}`"
-          class="panel-box unselect-text"
+          class="panel-box unselect-text bg-grey"
           v-html="box.toolbar"
         />
       </transition-group>

src/views/mainview.vue

@@ -52,6 +52,7 @@ export default {
     fontsize: Number,
     imageurl: String,
     itemlabel: String,
+    label: Object,
     language: String,
     manifests: Array,
     panels: Array,