rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add thumbail only option to gallery card

Browse source
This commit is contained in:
Julian Stirling 2026-07-06 10:01:34 +01:00
parent aa10d52487
commit 6b17a61d55
1 changed files with 84 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

36
webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
View file

@ -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,6 +16,7 @@
/>
</div>
</div>
<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">
@ -35,7 +39,9 @@
button-label="Download JPEG"
/>
</div>
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
<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"
@ -73,6 +79,7 @@
</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;
}