Gallery tweaks

wbbaker · Jul 26, 2022 · 3ba8cf1 · 3ba8cf1
1 parent 31ab21d
commit 3ba8cf1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/assets/css/webkit.scss b/src/assets/css/webkit.scss
@@ -10,12 +10,12 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: rgb(0,0,0, .16);
+  @apply rounded;
+  @apply bg-gray-300;
   @apply dark:bg-slate-600;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgb(0,0,0, .06);
+  @apply bg-gray-100;
   @apply dark:bg-slate-700;
 }
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 dark:border-gray-600 rounded border-2"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 dark:border-gray-600 rounded-md border-2"
     :title="title"
   >
     <img 

diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
@@ -28,7 +28,7 @@
         />
       </div>
     </div>
-    <div class="bottom-0 fixed overflow-x-auto max-w-full pb-2">
+    <div class="bottom-0 fixed max-w-full w-full">
       <div 
         class="
         text-white
@@ -52,12 +52,15 @@
           :attribution="image.attribution"
         />
       </div>
-      <GalleryThumbnailList
-        :current="index"
-        :images="images"
-        @select-index="emit('selectIndex', $event)"
-        @click.stop
-      />
+      <div class="flex justify-center">
+        <GalleryThumbnailList
+          class="pb-2"
+          :current="index"
+          :images="images"
+          @select-index="emit('selectIndex', $event)"
+          @click.stop
+        />
+      </div>
     </div>
     <ImageToolbar
       class="w-full absolute top-0 h-12 left-0"
@@ -133,8 +136,15 @@ const image = computed(() => props.images[props.index])
 
 document.addEventListener('keyup', handleKeyboard)
 
-onMounted(() => imageElement.value.addEventListener('load', () => isLoading.value = false))
-onUnmounted(() => document.removeEventListener('keyup', handleKeyboard))
+onMounted(() => {
+  imageElement.value.addEventListener('load', () => isLoading.value = false)
+  document.body.classList.add('overflow-hidden')
+})
+
+onUnmounted(() => { 
+  document.removeEventListener('keyup', handleKeyboard)
+  document.body.classList.remove('overflow-hidden')
+})
 
 watch(
   () => props.index,