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> <template>
<div class="uk-card"> <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 <img
id="thumbnail-stitched-image" id="thumbnail-stitched-image"
:class="[viewerAvailable ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']" :class="[viewerAvailable ? 'clickable' : 'disabled', thumbnailOnly && 'thumbnail-only']"
class="thumbnail-fit" class="thumbnail-fit"
:src="thumbnailPath" :src="thumbnailPath"
onerror="this.src = '/titleiconpink.svg'" onerror="this.src = '/titleiconpink.svg'"
@ -13,6 +16,7 @@
/> />
</div> </div>
</div> </div>
<template v-if="!thumbnailOnly">
<h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3> <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
<div class="button-container"> <div class="button-container">
<div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons"> <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
@ -35,7 +39,9 @@
button-label="Download JPEG" button-label="Download JPEG"
/> />
</div> </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 <action-button
v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)" v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
submit-label="Stitch Images" submit-label="Stitch Images"
@ -73,6 +79,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</template>
</div> </div>
</div> </div>
</template> </template>
@ -97,6 +104,11 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
thumbnailOnly: {
type: Boolean,
default: false,
required: false,
},
}, },
emits: ["viewer-requested", "update-requested"], emits: ["viewer-requested", "update-requested"],
@ -210,6 +222,15 @@ ul {
text-align: center; text-align: center;
} }
.thumbnail-only-card {
width: auto;
}
.thumbnail-only-container {
height: 150px;
width: 150px;
}
.thumbnail-fit { .thumbnail-fit {
max-height: 120px; max-height: 120px;
max-width: 240px; max-width: 240px;
@ -217,6 +238,11 @@ ul {
overflow-y: hidden; overflow-y: hidden;
} }
.thumbnail-fit.thumbnail-only {
max-height: 150px;
max-width: 150px;
}
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }