karim/kgva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: peek column to the left of the file list, mirroring the info text on the right

Browse Source 
replaces the last commits attempt (hover updating the main preview directly) with what was actually asked for: the main preview now stays on the locked file, untouched by hover; a separate 18rem-wide column to the left of the file list — same width and spot as .proj-info on the right — shows whichever OTHER image is under the mouse while something is locked, and disappears again once the mouse leaves the list or lands back on the locked row itself.\n\npositioned via plain absolute positioning against .filebrowser (not scroll-tracked — it scrolls together with the list naturally), sitting inside the padding .proj-layout already reserves to keep the file list anchored. only enabled above 1300px, with a safety margin over the ~1168px point where that reserved space stops being wide enough; caught and fixed a bug in the same pass where .proj-peek had no display:none fallback below that breakpoint and would otherwise render as a bare block in-flow.
This commit is contained in:
kgva CMS
2026-08-11 19:41:06 +00:00
parent 0469e9dab5
commit 37fd39f488
2 changed files with 65 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+34
View File
@@ -251,6 +251,40 @@ body:not(.home) .menu { display: none; }
}
}
/* small peek column — mirrors .proj-info's spot and width on the OTHER side
of the file list, showing whichever image is under the mouse while
something is locked. sits inside the space .proj-layout already reserves
to keep the file list anchored (see above), so it needs that reserved
padding to be at least 18rem + the gap wide to have room; 1300px keeps a
safety margin above the ~1168px point where that stops being true. plain
absolute positioning against .filebrowser — no scroll-tracking needed,
it just scrolls together with the file list it's attached to. */
.proj-peek { display: none; }
@media (min-width: 1300px) {
.filebrowser { position: relative; }
.proj-peek {
display: block;
position: absolute;
top: 0;
right: 100%;
margin-right: 1.5rem;
width: 18rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
pointer-events: none;
}
.proj-peek.is-visible { opacity: 1; visibility: visible; }
.proj-peek img {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: contain;
display: block;
margin: 0;
}
}
/* prev/next as shell "cd" commands — same vocabulary as the rest of the site */
.proj-nav {
font-family: var(--font-family-mono);