fix(gallery): redo image sizing + adding description (#407)

components/modal/ModalContainer.vue

@@ -32,7 +32,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
   <ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
     <UserSignIn />
   </ModalDialog>
-  <ModalDialog v-model="isPreviewHelpOpen">
+  <ModalDialog v-model="isPreviewHelpOpen" max-w-125>
     <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
   <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>

components/modal/ModalDialog.vue

@@ -144,7 +144,7 @@ export default {
             <!-- We use `class` here to make v-bind being able to be override them -->
             <div
               ref="elDialogMain"
-              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
+              class="dialog-main rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
               v-bind="bindTypeToAny($attrs)"
             >
               <slot />

components/modal/ModalMediaPreview.vue

@@ -29,41 +29,43 @@ function onClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div relative h-full w-full flex select-none pointer-events-none>
-    <div absolute top-0 left-0 right-0 text-white text-center>
-      {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
-    </div>
+  <div relative h-full w-full flex select-none pointer-events-none pt-12>
     <button
-      v-if="hasNext"
-      pointer-events-auto
-      btn-action-icon bg="black/20" aria-label="Close"
-      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
-      absolute top="1/2" right-1
-      :title="$t('action.next')"
-      @click="next"
+      v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1
+      :title="$t('action.next')" @click="next"
     >
       <div i-ri:arrow-right-s-line text-white />
     </button>
     <button
-      v-if="hasPrev"
-      pointer-events-auto
-      btn-action-icon bg="black/20" aria-label="Close"
-      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
-      absolute top="1/2" left-1
-      :title="$t('action.prev')"
-      @click="prev"
+      v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1
+      :title="$t('action.prev')" @click="prev"
     >
       <div i-ri:arrow-left-s-line text-white />
     </button>
-    <img :src="current.url || current.previewUrl" :alt="current.description || ''" max-h="95%" max-w="95%" ma>
-
-    <button
-      btn-action-icon bg="black/20" aria-label="Close"
-      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
-      absolute top-0 right-0 m1 pointer-events-auto
-      @click="emit('close')"
+    <img
+      :src="current.url || current.previewUrl" :alt="current.description || ''" max-h-full max-w-full ma
     >
-      <div i-ri:close-fill text-white />
-    </button>
+
+    <div absolute top-0 w-full flex justify-between>
+      <button
+        btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
+        dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
+      >
+        <div i-ri:close-fill text-white />
+      </button>
+      <div bg="black/30" dark:bg="white/10" ml-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
+        <div v-if="mediaPreviewList.length > 1" p="y-1 x-2" rounded-r-0 shrink-0>
+          {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
+        </div>
+        <p
+          v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-r-full line-clamp-1
+          ws-pre-wrap break-all :title="current.description" w-full
+        >
+          {{ current.description }}
+        </p>
+      </div>
+    </div>
   </div>
 </template>

locales/en-US.json

@@ -31,6 +31,7 @@
     "bookmarked": "Bookmarked",
     "boost": "Boost",
     "boosted": "Boosted",
+    "close": "Close",
     "compose": "Compose",
     "enter_app": "Enter App",
     "favourite": "Favourite",