ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: search scroll jump (atomic list swap, no clear-before-await); services grid back to 6 tiles (2 subdued planned) + planned line for the rest

Browse Source
This commit is contained in:
ctao
2026-07-25 18:33:06 +02:00
parent 1ef2cab89e
commit affa3262ef
3 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/search-client.js
+13 -8
View File
@@ -69,29 +69,31 @@
// the newest articles from the same index.
async function idle() {
if (input.value.trim().length >= 2) return;
list.innerHTML = '';
// Build off-DOM, swap atomically — clearing before the await shrinks the
// page mid-flight and the browser clamps the scroll position ("jumps up").
const frag = document.createDocumentFragment();
const r = recents();
if (r.length) {
list.append(label('Recent'));
for (const term of r) list.append(row([term], '/search?q=' + encodeURIComponent(term), term));
frag.append(label('Recent'));
for (const term of r) frag.append(row([term], '/search?q=' + encodeURIComponent(term), term));
}
const fresh = (await ensureIndex()).slice(0, Math.max(1, 5 - r.length));
if (input.value.trim().length >= 2) return; // typed meanwhile — run() owns the list
list.append(label('Latest news'));
frag.append(label('Latest news'));
for (const p of fresh) {
const li = row([p.title], '/news/' + encodeURIComponent(p.slug));
const small = document.createElement('small');
small.textContent = p.date;
li.append(small);
list.append(li);
frag.append(li);
}
list.replaceChildren(frag);
hint();
status.textContent = opts.hint || (r.length ? 'Showing recent searches and latest news' : 'Showing latest news');
}
async function run() {
const q = input.value.trim().toLowerCase();
if (q.length < 2) { list.innerHTML = ''; idle(); return; }
list.innerHTML = '';
if (q.length < 2) { list.replaceChildren(); idle(); return; }
const idx = await ensureIndex();
const hits = idx
.filter((p) => (p.title + ' ' + p.description + ' ' + p.category).toLowerCase().includes(q))
@@ -100,13 +102,16 @@
status.textContent = hits.length
? hits.length + ' ' + unit + (hits.length === 1 ? '' : 's') + ' for “' + input.value.trim() + '”'
: 'No results for “' + input.value.trim() + '” — try a shorter or different term.';
// Off-DOM build + atomic swap (no transient page-height collapse)
const frag = document.createDocumentFragment();
for (const p of hits) {
const li = row(highlight(p.title, q), '/news/' + encodeURIComponent(p.slug));
const small = document.createElement('small');
small.textContent = p.date;
li.append(small);
list.append(li);
frag.append(li);
}
list.replaceChildren(frag);
hint();
}
input.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(run, 150); });
src/pages/index.astro
+13 -7
View File
@@ -27,10 +27,14 @@ const services = [
icon: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>' },
{ title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.',
icon: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="m5.7 5.7 3.5 3.5m5.6 0 3.5-3.5m0 12.6-3.5-3.5m-5.6 0-3.5 3.5"/>' },
// Two subdued planned tiles complete the 2×3 grid (an orphan 4th tile in a
// 3-col grid reads broken); the remaining TBD services stay on the quiet line.
{ title: 'Software', planned: true, desc: 'Science analysis tools and pipelines — planned.',
icon: '<rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="m7 9.5 3 2.5-3 2.5M12.5 15H17"/>' },
{ title: 'Documentation', planned: true, desc: 'User guides and technical documentation — planned.',
icon: '<path d="M12 6.7C10.6 5.2 8.6 4.5 5.7 4.5H4v13.6h1.7c2.9 0 4.9.7 6.3 2.2 1.4-1.5 3.4-2.2 6.3-2.2H20V4.5h-1.7c-2.9 0-4.9.7-6.3 2.2z"/><path d="M12 6.7v13.6"/>' },
];
// Planned services (SPEC §3.1/§3.3.2, all TBD): one quiet line instead of dead
// tiles — a grid should not ship tiles that do nothing (Apple-lens audit).
const planned = ['Software', 'Documentation', 'Scheduling', 'Science alerts'];
const planned = ['Scheduling', 'Science alerts'];
---
<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
{/* Photographic hero: LST-1 under the La Palma night sky (copied from the
@@ -66,11 +70,13 @@ const planned = ['Software', 'Documentation', 'Scheduling', 'Science alerts'];
<div class="section-head"><h2>Services</h2></div>
<div class="grid">
{services.map((s) => (
<article class="card tile">
<article class={s.planned ? 'card tile tile--planned' : 'card tile'}>
<svg class="ico" aria-hidden="true" viewBox="0 0 24 24" set:html={s.icon} />
<h3>{s.ext
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
: <a href={s.href}>{s.title}</a>}</h3>
<h3>{s.planned
? s.title
: (s.ext
? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
: <a href={s.href}>{s.title}</a>)}</h3>
<p class="desc">{s.desc}</p>
</article>
))}
src/styles/global.css
+3 -1
View File
@@ -468,7 +468,9 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive
.tile { padding: var(--space-m); gap: 8px; }
.tile .ico { width: 26px; height: 26px; stroke-width: 1.75; stroke-linejoin: round; color: var(--galaxy); }
.tile h3 { margin: 0; }
/* Planned services — one quiet line under the grid, never dead tiles */
/* Planned tiles complete the grid rows but stay subdued (no link, muted) */
.tile--planned :is(h3, .ico) { color: var(--muted); }
/* Remaining planned services — one quiet line under the grid */
.planned-note { color: var(--muted); font-size: var(--fs-s); margin: var(--space-m) 0 0; }
/* Article — 70ch column; on ≥1200px a sticky "On this page" rail sits to the right */