@fy-/fws-vue 2.3.28 → 2.3.30

package/components/ui/DefaultGallery.vue

@@ -129,53 +129,30 @@ const currentImage = computed(() => {
 const imageCount = computed(() => props.images.length)
 const currentIndex = computed(() => modelValue.value + 1)
 
-// Simple direct approach that correctly handles the info panel
+// Simple image sizing that relies on flexbox layout to handle the info panel
 const updateImageSizes = useDebounceFn(() => {
-  // First immediately run to prevent lag in calculations
-  forceUpdateImageSizes()
-
-  // Then run again after a short delay to ensure all DOM updates are applied
-  setTimeout(() => {
-    forceUpdateImageSizes()
-  }, 10)
-}, 50)
-
-// Directly update image sizes without debounce to ensure immediate layout updates
-function forceUpdateImageSizes() {
   // Get the main image
   const mainImage = document.querySelector('.image-display img') as HTMLImageElement
   if (!mainImage) return
 
-  // Get exact measurements of all UI elements
-  const topHeight = topControlsRef.value?.offsetHeight || 0
-
-  // CRITICAL: Get actual DOM measurement for info panel, not just reactive ref value
-  let infoHeight = 0
-  if (infoPanel.value && infoPanelRef.value) {
-    infoHeight = infoPanelRef.value.offsetHeight
-    // Ensure we have a real measurement
-    if (infoHeight < 5 && infoPanelRef.value.firstElementChild) {
-      infoHeight = (infoPanelRef.value.firstElementChild as HTMLElement).offsetHeight + 24 // Add padding
-    }
-  }
-
-  // Standard padding with extra safety margin
-  const padding = 40
-
-  // Calculate available height by subtracting ALL elements
-  const availableHeight = windowHeight.value - topHeight - infoHeight - padding
-
-  // Apply the exact height constraint to the image
-  mainImage.style.maxHeight = `${availableHeight}px`
-  mainImage.style.width = 'auto'
+  // Standard padding
+  const padding = 24
 
   // Handle width constraints
   const sidebarWidth = sidePanel.value ? 256 : 0
   const availableWidth = windowWidth.value - sidebarWidth - padding * 2
+
+  // Set width constraints
   mainImage.style.maxWidth = windowWidth.value <= 768
     ? '90vw'
     : `${availableWidth}px`
-}
+
+  // Let height be auto to preserve aspect ratio and fit in flexbox container
+  mainImage.style.height = 'auto'
+
+  // Set a reasonable max-height if needed
+  mainImage.style.maxHeight = '75vh'
+}, 50)
 
 // Modal controls
 function setModal(value: boolean) {
@@ -579,9 +556,9 @@ onUnmounted(() => {
           ref="galleryContentRef"
           class="w-full h-full flex flex-col lg:flex-row"
         >
-          <!-- Main Image Area - Fills available space -->
+          <!-- Main Image Area with flex column layout -->
           <div
-            class="relative flex-1 h-full flex items-center justify-center"
+            class="relative flex-1 h-full flex flex-col"
             :style="{ paddingTop: `${topControlsHeight}px` }"
             :class="{ 'lg:pr-64': sidePanel, 'lg:max-w-[calc(100%-16rem)]': sidePanel }"
             style="max-width: 100%;"
@@ -609,10 +586,10 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Image Display Container -->
+            <!-- Image Container - flex-grow to fill available space -->
             <div
               ref="imageContainerRef"
-              class="image-container flex-grow flex items-center justify-center"
+              class="flex-grow flex items-center justify-center"
               @touchstart="touchStart"
               @touchend="touchEnd"
             >
@@ -682,7 +659,7 @@ onUnmounted(() => {
               </div>
             </transition>
 
-            <!-- Info Panel Below Image positioned to not overlap with image -->
+            <!-- Info Panel directly in flex column flow -->
             <transition
               enter-active-class="transition-all duration-300 ease-out"
               enter-from-class="opacity-0 transform translate-y-4"
@@ -690,21 +667,11 @@ onUnmounted(() => {
               leave-active-class="transition-all duration-300 ease-in"
               leave-from-class="opacity-100 transform translate-y-0"
               leave-to-class="opacity-0 transform translate-y-4"
-              @before-enter="updateImageSizes"
-              @enter="updateImageSizes"
-              @after-enter="updateImageSizes"
-              @before-leave="updateImageSizes"
-              @leave="updateImageSizes"
-              @after-leave="updateImageSizes"
             >
               <div
                 v-if="infoPanel && images[modelValue]"
                 ref="infoPanelRef"
-                class="info-panel px-4 py-3 backdrop-blur-md bg-fv-neutral-900/80"
-                @transitionstart="updateImageSizes"
-                @transitionend="updateImageSizes"
-                @transitionrun="updateImageSizes"
-                @resize="updateImageSizes"
+                class="w-full px-4 py-3 backdrop-blur-md bg-fv-neutral-900/80 border-t border-fv-neutral-800"
               >
                 <slot :value="images[modelValue]" />
               </div>
@@ -723,7 +690,7 @@ onUnmounted(() => {
             <div
               v-if="sidePanel"
               ref="sidePanelRef"
-              class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md overflow-y-auto z-40 cool-scroll"
+              class="side-panel hidden lg:block absolute right-0 top-0 bottom-0 w-64 overflow-y-auto z-40 cool-scroll"
               :style="{ paddingTop: `${topControlsHeight + 8}px` }"
             >
               <!-- Paging Controls if needed -->
@@ -954,11 +921,6 @@ onUnmounted(() => {
   width: 100%;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 50;
 }
 
 /* Transition styles for next (right) navigation */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.28",
+  "version": "2.3.30",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",