feat: portal IA per spec (home entry point, /news, /proposals+redirect, /support), live search + suggestions, article TOC, mobile disclosure menu, CMS preview styles, modernization pass 1

2026-07-24 23:00:07 +02:00
parent 11e7eb484f
commit cf35739a64
17 changed files with 627 additions and 231 deletions
@@ -1,17 +1,71 @@
 ---
 import Base from '../layouts/Base.astro';
+
+// Sample data, clearly labelled as mock in the UI. Per SPEC §3.3.2 the dashboard
+// aggregates: proposal statuses, scheduling info, data products, help-desk tickets.
+const proposals = [
+  { id: 'PROP-2026-0142', title: 'AGN flare monitoring with LST sub-array', status: 'In review', kind: 'review' },
+  { id: 'PROP-2026-0089', title: 'Galactic PeVatron survey follow-up', status: 'Accepted', kind: 'ok' },
+  { id: 'PROP-2025-0231', title: 'GRB afterglow ToO programme', status: 'Draft', kind: 'draft' },
+];
+const products = [
+  { id: 'OBS-88213', desc: 'DL3 event lists — PKS 2155-304 (12 runs)', date: '2026-07-18' },
+  { id: 'OBS-87990', desc: 'DL3 event lists — Crab Nebula calibration', date: '2026-07-02' },
+];
+const fmt = (iso) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso));
+const tickets = [
+  { id: '#4821', subject: 'Proposal form: co-I affiliation not saved', status: 'Answered', kind: 'ok' },
+  { id: '#4711', subject: 'Data download quota question', status: 'Open', kind: 'review' },
+];
 ---
-<Base title="CTAO Portal — Dashboard" description="Panel z danymi z innych serwisów">
+<Base title="CTAO Science Portal — Dashboard" description="User dashboard (mock)">
+  <section class="hero-band">
+    <div class="container hero">
+      <div class="eyebrow">User area</div>
+      <h1>Dashboard</h1>
+      <p>Your proposals, data products and support tickets in one place</p>
+    </div>
+  </section>
+
  <section class="container page">
-    <span class="badge-mock">Makieta — dane przykładowe</span>
-    <div class="placeholder">
-      <div>
-        <div class="big">📡</div>
-        <h1>Dashboard użytkownika</h1>
-        <p>Wg specyfikacji SUSS: status wniosków, harmonogramy, produkty danych i zgłoszenia
-        helpdesku użytkownika — zbierane z pozostałych serwisów.<br/>
-        To część <strong>dynamiczna</strong> (nasz zakres, Release 5), utrzymywana osobno od
-        statycznych treści. Wszystko na tej stronie jest makietą.</p>
+    <span class="badge-mock">Mock — sample data, no live services connected</span>
+    <div class="dash-grid">
+      <div class="panel">
+        <h2 class="panel-title">My proposals</h2>
+        <ul class="rows">
+          {proposals.map((p) => (
+            <li>
+              <span class="row-id">{p.id}</span>
+              <span class="row-main">{p.title}</span>
+              <span class={`pill pill--${p.kind}`}>{p.status}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div class="panel">
+        <h2 class="panel-title">Recent data products</h2>
+        <ul class="rows">
+          {products.map((d) => (
+            <li>
+              <span class="row-id">{d.id}</span>
+              <span class="row-main">{d.desc}</span>
+              <time class="row-date" datetime={d.date}>{fmt(d.date)}</time>
+            </li>
+          ))}
+        </ul>
+        <p class="notice">Search and download in the <a href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener" class="external">Data Explorer</a> (external, LUX team).</p>
+      </div>
+      <div class="panel">
+        <h2 class="panel-title">Help-desk tickets</h2>
+        <ul class="rows">
+          {tickets.map((t) => (
+            <li>
+              <span class="row-id">{t.id}</span>
+              <span class="row-main">{t.subject}</span>
+              <span class={`pill pill--${t.kind}`}>{t.status}</span>
+            </li>
+          ))}
+        </ul>
      </div>
    </div>
  </section>