vibe/gitea-pages
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glossary slider: switch to CSS-grid auto-flow column + console.log diagnostics

Browse Source
This commit is contained in:
ask 2026-05-17 20:40:22 +05:00
parent 22137c6f90
commit 0ee5812834
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -764,21 +764,25 @@ main {
.tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); }
/* ── GLOSSARY (horizontal slider) ── */
/* ── GLOSSARY (horizontal slider, CSS-grid auto-flow) ── */
.glossary-slider {
margin-top: 40px;
max-width: 100%;
}
.glossary {
display: flex;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 280px;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
padding: 4px 4px 12px;
width: 100%;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
@media (min-width: 640px) { .glossary { grid-auto-columns: 320px; } }
.glossary::-webkit-scrollbar { height: 6px; }
.glossary::-webkit-scrollbar-track { background: transparent; }
.glossary::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@ -789,12 +793,10 @@ main {
background: #fff;
display: flex;
flex-direction: column;
flex: 0 0 280px;
width: 280px;
scroll-snap-align: start;
min-height: 200px;
}
@media (min-width: 640px) { .gloss-item { flex-basis: 320px; width: 320px; min-height: 220px; } }
@media (min-width: 640px) { .gloss-item { min-height: 220px; } }
/* nav controls: arrows + counter, centered below cards */
.gloss-nav {
@ -1772,10 +1774,24 @@ const SCHEDULE = [
}
}
glossPrev.addEventListener('click', () => goTo(currentIdx - 1));
glossNext.addEventListener('click', () => goTo(currentIdx + 1));
glossPrev.addEventListener('click', () => {
console.log('[gloss] prev clicked, was idx=' + currentIdx);
goTo(currentIdx - 1);
});
glossNext.addEventListener('click', () => {
console.log('[gloss] next clicked, was idx=' + currentIdx);
goTo(currentIdx + 1);
});
glossaryEl.addEventListener('scroll', syncFromScroll, { passive: true });
updateNavState();
// Defer to ensure layout is settled before reporting/computing metrics
requestAnimationFrame(() => {
console.log('[gloss] slider init: cards=' + totalCards +
' scrollWidth=' + glossaryEl.scrollWidth +
' clientWidth=' + glossaryEl.clientWidth +
' canScroll=' + (glossaryEl.scrollWidth > glossaryEl.clientWidth));
updateNavState();
});
// Render projects
const projectsEl = document.getElementById('projects-grid');