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

Glossary slider: move nav arrows below cards, add 'N / 14' counter

Browse Source
This commit is contained in:
ask 2026-05-17 20:27:48 +05:00
parent e0daa85982
commit 66e831f07f
1 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
index.html
View File

@ -767,17 +767,17 @@ main {
/* ── GLOSSARY (horizontal slider) ── */
.glossary-slider {
margin-top: 40px;
position: relative;
}
.glossary {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 8px;
padding: 4px 4px 16px; /* breathing room + scrollbar gutter */
padding: 4px 4px 12px;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.glossary::-webkit-scrollbar { height: 6px; }
@ -790,34 +790,47 @@ main {
background: #fff;
display: flex;
flex-direction: column;
flex: 0 0 280px; /* fixed card width */
flex: 0 0 280px;
width: 280px;
scroll-snap-align: start;
min-height: 180px;
min-height: 200px;
}
@media (min-width: 640px) { .gloss-item { flex-basis: 320px; min-height: 200px; } }
@media (min-width: 640px) { .gloss-item { flex-basis: 320px; width: 320px; min-height: 220px; } }
/* nav buttons */
/* nav controls: arrows + counter, centered below cards */
.gloss-nav {
display: none; /* mobile: rely on swipe */
position: absolute;
top: -52px; right: 0;
gap: 8px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
@media (min-width: 640px) { .gloss-nav { display: flex; } }
.gloss-nav-btn {
width: 36px; height: 36px;
width: 40px; height: 40px;
border: 1px solid var(--border);
background: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 150ms ease, opacity 150ms ease;
transition: background 150ms ease, opacity 150ms ease, border-color 150ms ease;
color: var(--text-65);
}
.gloss-nav-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.gloss-nav-btn:hover:not(:disabled) {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
.gloss-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gloss-nav-btn svg { width: 16px; height: 16px; }
.gloss-nav-btn svg { width: 18px; height: 18px; }
.gloss-counter {
font-size: 0.8125rem;
color: var(--text-55);
font-variant-numeric: tabular-nums;
min-width: 64px;
text-align: center;
}
.gloss-trigger {
width: 100%;
@ -1435,15 +1448,16 @@ footer {
</p>
</div>
<div class="glossary-slider">
<div class="glossary" id="glossary-list"></div>
<div class="gloss-nav">
<button type="button" id="gloss-prev" class="gloss-nav-btn" aria-label="Назад">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>
</button>
<span class="gloss-counter" id="gloss-counter">1 / 14</span>
<button type="button" id="gloss-next" class="gloss-nav-btn" aria-label="Вперёд">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>
</button>
</div>
<div class="glossary" id="glossary-list"></div>
</div>
</div>
</section>
@ -1730,22 +1744,39 @@ const SCHEDULE = [
// Slider controls
const glossPrev = document.getElementById('gloss-prev');
const glossNext = document.getElementById('gloss-next');
function scrollByCard(direction) {
const glossCounter = document.getElementById('gloss-counter');
const totalCards = GLOSSARY.length;
function cardStep() {
const firstCard = glossaryEl.querySelector('.gloss-item');
if (!firstCard) return;
const step = firstCard.getBoundingClientRect().width + 12; // card + gap
glossaryEl.scrollBy({ left: direction * step, behavior: 'smooth' });
if (!firstCard) return 0;
const cs = window.getComputedStyle(glossaryEl);
const gap = parseFloat(cs.columnGap || cs.gap || '12');
return firstCard.getBoundingClientRect().width + gap;
}
function currentIndex() {
const step = cardStep();
return step ? Math.round(glossaryEl.scrollLeft / step) : 0;
}
function scrollToIndex(i) {
const step = cardStep();
const clamped = Math.max(0, Math.min(totalCards - 1, i));
glossaryEl.scrollTo({ left: clamped * step, behavior: 'smooth' });
}
function updateGlossNav() {
const maxScroll = glossaryEl.scrollWidth - glossaryEl.clientWidth - 2;
const idx = currentIndex();
glossCounter.textContent = `${idx + 1} / ${totalCards}`;
const maxScroll = glossaryEl.scrollWidth - glossaryEl.clientWidth;
glossPrev.disabled = glossaryEl.scrollLeft <= 2;
glossNext.disabled = glossaryEl.scrollLeft >= maxScroll;
glossNext.disabled = glossaryEl.scrollLeft >= maxScroll - 2;
}
glossPrev.addEventListener('click', () => scrollByCard(-1));
glossNext.addEventListener('click', () => scrollByCard(1));
glossPrev.addEventListener('click', () => scrollToIndex(currentIndex() - 1));
glossNext.addEventListener('click', () => scrollToIndex(currentIndex() + 1));
glossaryEl.addEventListener('scroll', updateGlossNav, { passive: true });
window.addEventListener('resize', updateGlossNav);
updateGlossNav();
// initial state after layout settles
requestAnimationFrame(updateGlossNav);
// Render projects
const projectsEl = document.getElementById('projects-grid');