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

36
index.html
View File

@ -764,21 +764,25 @@ main {
.tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); } .tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); }
/* ── GLOSSARY (horizontal slider) ── */ /* ── GLOSSARY (horizontal slider, CSS-grid auto-flow) ── */
.glossary-slider { .glossary-slider {
margin-top: 40px; margin-top: 40px;
max-width: 100%;
} }
.glossary { .glossary {
display: flex; display: grid;
grid-auto-flow: column;
grid-auto-columns: 280px;
gap: 12px; gap: 12px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scroll-snap-type: x proximity; scroll-snap-type: x mandatory;
padding: 4px 4px 12px;
width: 100%;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding-bottom: 8px;
} }
@media (min-width: 640px) { .glossary { grid-auto-columns: 320px; } }
.glossary::-webkit-scrollbar { height: 6px; } .glossary::-webkit-scrollbar { height: 6px; }
.glossary::-webkit-scrollbar-track { background: transparent; } .glossary::-webkit-scrollbar-track { background: transparent; }
.glossary::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .glossary::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@ -789,12 +793,10 @@ main {
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 0 0 280px;
width: 280px;
scroll-snap-align: start; scroll-snap-align: start;
min-height: 200px; 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 */ /* nav controls: arrows + counter, centered below cards */
.gloss-nav { .gloss-nav {
@ -1772,10 +1774,24 @@ const SCHEDULE = [
} }
} }
glossPrev.addEventListener('click', () => goTo(currentIdx - 1)); glossPrev.addEventListener('click', () => {
glossNext.addEventListener('click', () => goTo(currentIdx + 1)); 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 }); glossaryEl.addEventListener('scroll', syncFromScroll, { passive: true });
// 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(); updateNavState();
});
// Render projects // Render projects
const projectsEl = document.getElementById('projects-grid'); const projectsEl = document.getElementById('projects-grid');