From 6b17a61d557dd199d1b706ef2ee843a35381c9a1 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Mon, 6 Jul 2026 10:01:34 +0100
Subject: [PATCH] Add thumbail only option to gallery card

---
 .../galleryComponents/galleryCard.vue         | 142 +++++++++++-------
 1 file changed, 84 insertions(+), 58 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
index f53e93be..0e010254 100644
--- a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
+++ b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="uk-card">
-    <div class="uk-card-body">
-      <div class="uk-card-media-top">
-        <div class="view-image uk-padding-remove uk-height-1-1">
+    <div class="uk-card-body" :class="{ 'thumbnail-only-card': thumbnailOnly }">
+      <div
+        class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle"
+        :class="{ 'thumbnail-only-container': thumbnailOnly }"
+      >
+        <div class="uk-padding-remove">
           <img
             id="thumbnail-stitched-image"
-            :class="[viewerAvailable ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
+            :class="[viewerAvailable ? 'clickable' : 'disabled', thumbnailOnly && 'thumbnail-only']"
             class="thumbnail-fit"
             :src="thumbnailPath"
             onerror="this.src = '/titleiconpink.svg'"
@@ -13,66 +16,70 @@
           />
         </div>
       </div>
-      <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
-      <div class="button-container">
-        <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
+      <template v-if="!thumbnailOnly">
+        <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
+        <div class="button-container">
+          <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
+            <action-button
+              class="uk-width-1-2"
+              thing="smart_scan"
+              action="download_zip"
+              submit-label="Download All"
+              :can-terminate="false"
+              :submit-data="{ scan_name: itemData.name }"
+              :button-primary="true"
+              @response="downloadZipFile"
+              @error="modalError"
+            />
+            <EndpointButton
+              class="uk-width-1-2"
+              :button-primary="true"
+              :is-disabled="!itemData.stitch_available"
+              :url="downloadStitchFile"
+              button-label="Download JPEG"
+            />
+          </div>
+          <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
+            Delete
+          </button>
           <action-button
-            class="uk-width-1-2"
+            v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
+            submit-label="Stitch Images"
             thing="smart_scan"
-            action="download_zip"
-            submit-label="Download All"
-            :can-terminate="false"
+            action="stitch_scan"
+            :can-terminate="true"
             :submit-data="{ scan_name: itemData.name }"
-            :button-primary="true"
-            @response="downloadZipFile"
+            :button-primary="false"
+            :modal-progress="true"
             @error="modalError"
           />
-          <EndpointButton
-            class="uk-width-1-2"
-            :button-primary="true"
-            :is-disabled="!itemData.stitch_available"
-            :url="downloadStitchFile"
-            button-label="Download JPEG"
-          />
+          <button
+            v-if="itemData.dzi"
+            class="uk-button uk-button-default uk-width-1-1"
+            @click="requestViewer"
+          >
+            Show Stitched Scan
+          </button>
         </div>
-        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
-        <action-button
-          v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
-          submit-label="Stitch Images"
-          thing="smart_scan"
-          action="stitch_scan"
-          :can-terminate="true"
-          :submit-data="{ scan_name: itemData.name }"
-          :button-primary="false"
-          :modal-progress="true"
-          @error="modalError"
-        />
-        <button
-          v-if="itemData.dzi"
-          class="uk-button uk-button-default uk-width-1-1"
-          @click="requestViewer"
-        >
-          Show Stitched Scan
-        </button>
-      </div>
-      <div v-if="itemData.card_type === 'Scan'" class="item-info">
-        <ul>
-          <li>{{ itemData.number_of_images }} images</li>
-          <li>Created: {{ formatDate(itemData.created) }}</li>
-          <li>Duration: {{ formatDuration(itemData.duration) }}</li>
-        </ul>
-        <ul>
-          <li v-if="itemData.number_of_images < 2" class="warning-msg">
-            Not enough images to stitch
-          </li>
-          <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
-            Interactive preview not available
-          </li>
-          <li v-else-if="!itemData.stitch_available" class="alert-msg">
-            High quality stitch not available
-          </li>
-        </ul>
-      </div>
+        <div v-if="itemData.card_type === 'Scan'" class="item-info">
+          <ul>
+            <li>{{ itemData.number_of_images }} images</li>
+            <li>Created: {{ formatDate(itemData.created) }}</li>
+            <li>Duration: {{ formatDuration(itemData.duration) }}</li>
+          </ul>
+          <ul>
+            <li v-if="itemData.number_of_images < 2" class="warning-msg">
+              Not enough images to stitch
+            </li>
+            <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
+              Interactive preview not available
+            </li>
+            <li v-else-if="!itemData.stitch_available" class="alert-msg">
+              High quality stitch not available
+            </li>
+          </ul>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -97,6 +104,11 @@ export default {
       type: Object,
       required: true,
     },
+    thumbnailOnly: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
 
   emits: ["viewer-requested", "update-requested"],
@@ -210,6 +222,15 @@ ul {
   text-align: center;
 }
 
+.thumbnail-only-card {
+  width: auto;
+}
+
+.thumbnail-only-container {
+  height: 150px;
+  width: 150px;
+}
+
 .thumbnail-fit {
   max-height: 120px;
   max-width: 240px;
@@ -217,6 +238,11 @@ ul {
   overflow-y: hidden;
 }
 
+.thumbnail-fit.thumbnail-only {
+  max-height: 150px;
+  max-width: 150px;
+}
+
 .clickable {
   cursor: pointer;
 }