diff options
| -rw-r--r-- | public/css/style.css | 20 | ||||
| -rw-r--r-- | views/admin/album.erb | 31 |
2 files changed, 51 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css index abbedf6..ec22f39 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -388,6 +388,26 @@ tr.original-file td { opacity: .5; } .delete-check { accent-color: #c0392b; width: 16px; height: 16px; cursor: pointer; } tr.delete-marked td { background: rgba(192,57,43,.08); } +/* ── Admin thumb hover preview ─────────────────────────────────────────── */ +#admin-thumb-preview { + display: none; + position: fixed; + z-index: 9999; + pointer-events: none; + padding: 4px; + border: 2px solid var(--border); + border-radius: var(--radius); + background: var(--bg2); + box-shadow: 0 8px 24px rgba(0,0,0,.6); +} +#admin-thumb-preview img { + display: block; + width: 300px; + height: 300px; + object-fit: cover; + border-radius: calc(var(--radius) - 2px); +} + /* ── Admin update panel ────────────────────────────────────────────────── */ .admin-update { margin-top: 32px; } .admin-update h2 { font-size: 1rem; color: var(--text-dim); margin-bottom: 6px; } diff --git a/views/admin/album.erb b/views/admin/album.erb index 14a8f07..8c9ebe1 100644 --- a/views/admin/album.erb +++ b/views/admin/album.erb @@ -122,6 +122,37 @@ e.preventDefault(); } }); + + // Hover preview for admin thumbnails + (function () { + const preview = document.createElement('div'); + preview.id = 'admin-thumb-preview'; + preview.innerHTML = '<img alt="">'; + document.body.appendChild(preview); + const pimg = preview.querySelector('img'); + + function reposition(e) { + const pw = 300 + 12, ph = 300 + 12; + let x = e.clientX + 18, y = e.clientY + 18; + if (x + pw > window.innerWidth) x = e.clientX - pw - 8; + if (y + ph > window.innerHeight) y = e.clientY - ph - 8; + preview.style.left = x + 'px'; + preview.style.top = y + 'px'; + } + + document.querySelectorAll('.files-table td:first-child img').forEach(function (thumb) { + thumb.style.cursor = 'zoom-in'; + thumb.addEventListener('mouseenter', function (e) { + pimg.src = thumb.src; + preview.style.display = 'block'; + reposition(e); + }); + thumb.addEventListener('mousemove', reposition); + thumb.addEventListener('mouseleave', function () { + preview.style.display = 'none'; + }); + }); + })(); })(); </script> |