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

feat: sticky locked-image thumbnail while scrolling; two-click preview-then-open on the portfolio index

Browse Source 
the locked image now gets a small pinned copy (18rem, same width as the text column) that appears once the real preview scrolls out of view and disappears again once the text runs out — fixed-position + scroll-driven rather than CSS sticky, since the filebrowser box is only ever as tall as its own content, not the much taller text next to it.\n\nalso scoped the existing click-outside-unfreezes-the-lock listener to clicks inside .filebrowser only, since with listings now starting locked, a click to read or select a word in the text would otherwise silently kill the sticky preview.\n\nportfolio index: rows there are real links (href + data-img together), so a single click used to jump straight into the project — the only way to preview a different one first was hovering, which does nothing for touch and is now also blocked while something is locked. first click on a different project now just previews it (like hover used to); a second click on the same row, or clicking the preview image itself, opens it.
This commit is contained in:
kgva CMS
2026-08-11 19:12:43 +00:00
parent 5c5b267a7f
commit 113a954b16
2 changed files with 115 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+36
View File
@@ -172,6 +172,10 @@ body:not(.home) .menu { display: none; }
display: block;
transition: opacity 0.25s ease;
}
/* portfolio index only (not project pages): the big preview is itself a
second way into the already-previewed project, next to clicking its row
again */
.filebrowser:not(.tui--files) .tui__preview img { cursor: pointer; }
/* project page: image files (no date column), show full image (contain) */
.tui--files .tui__ls a { grid-template-columns: 11ch 1fr; }
@@ -247,6 +251,38 @@ body:not(.home) .menu { display: none; }
}
}
/* small pinned copy of the locked image — appears at the left edge (same
spot the real preview normally sits) once that preview has scrolled out
of view, and disappears again once the text next to it runs out. width
matches .proj-info so the two columns read as a pair. fixed, not sticky:
the file list's own box is only as tall as its own content, not the much
taller text next to it, so sticky positioning has nothing to be bounded
by — a scroll-driven fixed element sidesteps that entirely. */
.proj-sticky {
position: fixed;
top: 50%;
left: calc((100vw - var(--container-width)) / 2);
transform: translateY(-50%);
width: 18rem;
z-index: 5;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease;
pointer-events: none;
}
.proj-sticky.is-visible { opacity: 1; visibility: visible; }
.proj-sticky img {
width: 100%;
height: auto;
max-height: 60vh;
object-fit: contain;
display: block;
margin: 0;
}
@media (max-width: 1099.98px) {
.proj-sticky { display: none; }
}
/* prev/next as shell "cd" commands — same vocabulary as the rest of the site */
.proj-nav {
font-family: var(--font-family-mono);