ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show a full-size slide on hover in the slide manager

Browse Source 
The thumbnails are 120x68 and cropped with object-fit: cover, so any text on a
slide is unreadable and the edges are cut off. Picking the right slide to
reorder or delete meant opening images by hand to tell them apart.

Hovering a thumbnail now shows the whole slide, bounded by the viewport rather
than the image so a 3300x2550 upload does not fill the screen, with the filename
underneath.

Fixed position rather than inside the row: the list scrolls and a
relatively-positioned parent would clip it. pointer-events: none so the preview
can never sit between the cursor and the move or delete buttons.
This commit is contained in:
cproudlock
2026-08-06 10:04:21 -04:00
parent a18335b61c
commit 8fd2b3bcd2
1 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
plugins/slides/frontend/views/SlideManager.vue
View File

@@ -36,7 +36,8 @@
<div v-for="(slide, idx) in slides" :key="slide.slideid" class="slide-row">
<input type="checkbox" class="pick" :value="slide.filename" v-model="selected" />
<span class="order-num">{{ idx + 1 }}</span>
<img :src="withBase(slide.url)" :alt="slide.filename" class="thumb" />
<img :src="withBase(slide.url)" :alt="slide.filename" class="thumb"
@mouseenter="previewSlide = slide" @mouseleave="previewSlide = null" />
<span class="fname" :title="slide.filename">{{ slide.filename }}</span>
<div class="move">
<button class="btn btn-sm btn-secondary" :disabled="idx === 0" @click="move(idx, -1)" title="Move up">&uarr;</button>
@@ -45,6 +46,18 @@
</div>
</div>
</div>
<!--
Hover preview. A 120x68 thumbnail is cropped (object-fit: cover) and far
too small to read the text on a slide, so picking the right one meant
opening images by hand. Fixed position rather than inside the row: a
relatively-positioned parent would clip it, and the list scrolls.
Pointer-events none so it can never sit between the cursor and a button.
-->
<div v-if="previewSlide" class="slide-preview">
<img :src="withBase(previewSlide.url)" :alt="previewSlide.filename" />
<div class="slide-preview-name">{{ previewSlide.filename }}</div>
</div>
</div>
</template>
@@ -53,6 +66,9 @@ import { ref, computed, onMounted } from 'vue'
import { slidesApi } from '@/api'
import { withBase } from '@/utils/basePath'
// Slide currently hovered, shown enlarged. Null when the cursor is elsewhere.
const previewSlide = ref(null)
const surfaces = [
{ key: 'lobby', label: 'Lobby Display' },
{ key: 'shopfloor', label: 'Shopfloor Screensaver' }
@@ -191,6 +207,41 @@ onMounted(load)
object-fit: cover;
border-radius: 4px;
background: #000;
cursor: zoom-in;
}
.slide-preview {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
z-index: 1000;
padding: 0.5rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.slide-preview img {
display: block;
/* Bounded by the viewport, not the image: a 3300x2550 slide would otherwise
fill the screen. object-fit contain keeps the whole slide visible, since
the point is reading it rather than filling the box. */
max-width: min(46vw, 900px);
max-height: 76vh;
object-fit: contain;
background: #000;
border-radius: 4px;
}
.slide-preview-name {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--text-light);
text-align: center;
word-break: break-all;
}
.fname {
flex: 1;