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

CSS tweaks and show warnings for scan thumbnails if preview is unavailable

Browse source
This commit is contained in:
Julian Stirling 2026-07-07 14:06:01 +01:00
parent ba11f65219
commit 1f7a8a1a4e
2 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

7
webapp/src/assets/less/variables.less
View file

@ -380,15 +380,12 @@
.ofm-top-nav-square-button { .ofm-top-nav-square-button {
margin-top: 4px; margin-top: 4px;
height: 38px; height: 38px;
width: 38px; aspect-ratio: 1;
} }
.ofm-top-nav-square-button.material-icon { .ofm-top-nav-square-button.material-icon {
// MAterial icons are 24x24 , set padding to centre // Material icons are 24x24 , set padding to centre
padding: 6px !important; padding: 6px !important;
margin-top: 4px;
height: 38px;
width: 38px;
} }
// A button styled like text. For use in menus // A button styled like text. For use in menus

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

@ -67,19 +67,21 @@
<li>Created: {{ formatDate(itemData.created) }}</li> <li>Created: {{ formatDate(itemData.created) }}</li>
<li>Duration: {{ formatDuration(itemData.duration) }}</li> <li>Duration: {{ formatDuration(itemData.duration) }}</li>
</ul> </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>
</template> </template>
<div :class="{ 'thumbnail-only-warning': thumbnailOnly }">
<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>
</div> </div>
</template> </template>
@ -231,6 +233,10 @@ ul {
width: 150px; width: 150px;
} }
.thumbnail-only-warning {
width: 150px;
}
.thumbnail-fit { .thumbnail-fit {
max-height: 120px; max-height: 120px;
max-width: 240px; max-width: 240px;