Add thumbail only option to gallery card

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-body" :class="{ 'thumbnail-only-card': thumbnailOnly }">
-      <div class="uk-card-media-top">
+      <div
-        <div class="view-image uk-padding-remove uk-height-1-1">
+        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>
+      <template v-if="!thumbnailOnly">
-      <div class="button-container">
+        <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
-        <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
+        <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"
+            action="stitch_scan"
-            submit-label="Download All"
+            :can-terminate="true"
-            :can-terminate="false"
             :submit-data="{ scan_name: itemData.name }"
-            :button-primary="true"
+            :button-primary="false"
-            @response="downloadZipFile"
+            :modal-progress="true"
             @error="modalError"
           />
-          <EndpointButton
+          <button
-            class="uk-width-1-2"
+            v-if="itemData.dzi"
-            :button-primary="true"
+            class="uk-button uk-button-default uk-width-1-1"
-            :is-disabled="!itemData.stitch_available"
+            @click="requestViewer"
-            :url="downloadStitchFile"
+          >
-            button-label="Download JPEG"
+            Show Stitched Scan
-          />
+          </button>
         </div>
-        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
+        <div v-if="itemData.card_type === 'Scan'" class="item-info">
-        <action-button
+          <ul>
-          v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
+            <li>{{ itemData.number_of_images }} images</li>
-          submit-label="Stitch Images"
+            <li>Created: {{ formatDate(itemData.created) }}</li>
-          thing="smart_scan"
+            <li>Duration: {{ formatDuration(itemData.duration) }}</li>
-          action="stitch_scan"
+          </ul>
-          :can-terminate="true"
+          <ul>
-          :submit-data="{ scan_name: itemData.name }"
+            <li v-if="itemData.number_of_images < 2" class="warning-msg">
-          :button-primary="false"
+              Not enough images to stitch
-          :modal-progress="true"
+            </li>
-          @error="modalError"
+            <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
-        />
+              Interactive preview not available
-        <button
+            </li>
-          v-if="itemData.dzi"
+            <li v-else-if="!itemData.stitch_available" class="alert-msg">
-          class="uk-button uk-button-default uk-width-1-1"
+              High quality stitch not available
-          @click="requestViewer"
+            </li>
-        >
+          </ul>
-          Show Stitched Scan
+        </div>
-        </button>
+      </template>
-      </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>
   </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;
 }