feat: update panel spacings

subugoe · Nov 15, 2022 · 89de13f · 89de13f
1 parent 44a433e
commit 89de13f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 11 deletions.
diff --git a/src/components/Content.vue b/src/components/Content.vue
@@ -142,7 +142,6 @@ export default {
   flex: 1;
   flex-direction: column;
   overflow: auto;
-  padding: 8px;
 }
 
 .rtl {

diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
@@ -85,7 +85,5 @@ export default {
 
 .item-content {
   overflow: auto;
-  padding: 8px;
-  padding-bottom: 72px; // fab icon size + one times the offset of q-page-sticky
 }
 </style>
diff --git a/src/components/metadata/Metadata.vue b/src/components/metadata/Metadata.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="metadata-container q-pa-md q-pt-md">
+  <div class="metadata-container">
     <CollectionMetadata v-if="options.collection?.all" />
     <ManifestMetadata v-if="options.manifest?.all" />
     <ItemMetadata v-if="options.manifest?.all" />

diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="item-content" :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-white'">
-    <div class="panel-header q-py-xs q-pr-sm q-pl-md flex justify-between items-center">
+    <div class="panel-header q-py-xs q-pt-md q-px-md flex justify-between items-center">
       <div class="caption text-bold text-body1">
         <!-- We display the tab label as panel label when there is only one tab -->
         <span v-if="panel.label && tabs.length > 1 || tabs.length === 0">{{ $t(panel.label) }}</span>
@@ -14,8 +14,8 @@
         </template>
       </div>
     </div>
-    <q-separator />
-    <div class="panel-body bg-none">
+    <q-separator class="q-mx-md" />
+    <div class="panel-body bg-none q-px-md">
       <Loading v-if="isLoading" />
       <template v-if="tabs.length > 1">
         <div class="tabs-container">
@@ -31,13 +31,15 @@
           </q-tabs>
         </div>
         <q-tab-panels v-model="activeTabIndex" class="bg-transparent" animated transition-next="fade" transition-prev="fade">
-          <q-tab-panel v-for="(tab, i) in tabs" :key="i" :name="i" class="q-pa-none">
+          <q-tab-panel v-for="(tab, i) in tabs" :key="i" :name="i" class="q-pa-none q-pt-md">
             <component :is="tab.component" :key="tab.id" v-bind="tab.props" />
           </q-tab-panel>
         </q-tab-panels>
       </template>
       <template v-else-if="tabs.length === 1">
-        <component :is="tabs[0].component" :key="tabs[0].id" v-bind="tabs[0].props" @loading="isLoading = $event" />
+        <div class="q-pt-md">
+          <component :is="tabs[0].component" :key="tabs[0].id" v-bind="tabs[0].props" @loading="isLoading = $event" />
+        </div>
       </template>
       <Notification
         v-else

diff --git a/src/css/tree.scss b/src/css/tree.scss
@@ -55,8 +55,6 @@
 }
 
 .q-tree {
-  padding: 8px;
-
   > .q-tree__node--child {
     > .q-tree__node-header {
       padding-left: 8px;