diff --git a/plugins/slides/frontend/views/SlideManager.vue b/plugins/slides/frontend/views/SlideManager.vue index 25568d1..ee8604f 100644 --- a/plugins/slides/frontend/views/SlideManager.vue +++ b/plugins/slides/frontend/views/SlideManager.vue @@ -36,7 +36,8 @@
{{ idx + 1 }} - + {{ slide.filename }}
@@ -45,6 +46,18 @@
+ + +
+ +
{{ previewSlide.filename }}
+
@@ -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;