From 3ba8cf12d7cdcf385a8cab090fb780eab312d673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 26 Jul 2022 16:45:20 -0300
Subject: [PATCH] Gallery tweaks

---
 src/assets/css/webkit.scss                    |  6 ++--
 src/components/Gallery/GalleryThumbnail.vue   |  2 +-
 .../ImageViewer/ImageViewer.global.vue        | 28 +++++++++++++------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/assets/css/webkit.scss b/src/assets/css/webkit.scss
index c4cc7b7..cd7c7a7 100644
--- 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;
 }
\ No newline at end of file
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 94a8373..d50931f 100644
--- 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
index 1193c43..f1ed777 100644
--- 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,