From 2600db7f6918b7f64ffb65295e0bee1ebde65576 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:14:32 +0200
Subject: [PATCH] filterbalk strakker + rooster weergaveschakelaar
 (kolommen/dagen onder elkaar)

---
 frontend/src/pages.jsx  |  7 ++++++-
 frontend/src/styles.css | 20 +++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 6a0fbbb..803ae3f 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2055,6 +2055,8 @@ export function RoosterScherm({ mode }) {
   const [hoverSlot, setHoverSlot] = useState(null);
   const [conflictOpen, setConflictOpen] = useState(false);
   const [genOpen, setGenOpen] = useState(false);
+  const [weergave, setWeergaveState] = useState(() => { try { return localStorage.getItem("rw_weergave") || "kolom"; } catch { return "kolom"; } });
+  const setWeergave = (v) => { setWeergaveState(v); try { localStorage.setItem("rw_weergave", v); } catch { /* niet beschikbaar */ } };
 
   useEffect(() => {
     listResource("schooljaren").then((j) => { setSchooljaren(j); if (j.length) setSchooljaar((s) => s || String(j[0].id)); }).catch((e) => setError(e.message));
@@ -2471,6 +2473,9 @@ export function RoosterScherm({ mode }) {
           </div>
         )}
         {edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Vak toevoegen" onClick={toonForm ? sluitNieuwBlok : openNieuwBlok}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Vak"}</span></button>}
+        {schooljaar && (edit ? tab === "week" : true) && (
+          <button className="btn icon-label weergave-knop" title={weergave === "kolom" ? "Toon dagen onder elkaar" : "Toon dagen als kolommen"} onClick={() => setWeergave(weergave === "kolom" ? "lijst" : "kolom")}>{weergave === "kolom" ? "☰" : "▦"} <span>{weergave === "kolom" ? "Dagen onder elkaar" : "Kolommen"}</span></button>
+        )}
         {printAan && schooljaar && (edit ? tab === "week" : true) && (
           <button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
         )}
@@ -2660,7 +2665,7 @@ export function RoosterScherm({ mode }) {
       )}
 
       {schooljaar && tab === "week" && (
-        <div className="rooster-grid">
+        <div className={weergave === "lijst" ? "rooster-grid lijst" : "rooster-grid"}>
           {WEEKDAGEN.map((d, i) => {
             const datum = weekDatums[i];
             const iso = fmtISO(datum);
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6ef338e..23658ef 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -139,7 +139,12 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .tag.dag-vakantie { background: #dcfce7; color: #166534; }
 
 .rooster-scherm { width: 100%; }
-.rooster-grid { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 10px; margin-top: 18px; width: 100%; }
+.rooster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 18px; width: 100%; }
+/* "Dagen onder elkaar": elke dag een volledige band, tijdvakken naast elkaar; de week scrollt verticaal mee. */
+.rooster-grid.lijst { display: flex; flex-direction: column; gap: 12px; }
+.rooster-grid.lijst .rooster-kolom { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
+.rooster-grid.lijst .rooster-dag { flex: 0 0 100%; text-align: left; padding-right: 32px; margin-bottom: 4px; }
+.rooster-grid.lijst .slot-cel { flex: 1 1 210px; max-width: 320px; margin-bottom: 0; }
 .rooster-kolom { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 80px; }
 .rooster-dag { position: relative; font-weight: 600; font-size: 13px; text-align: center; padding: 6px 32px 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; min-height: 36px; }
 .rooster-blok { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; }
@@ -215,7 +220,6 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
 .split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
 .klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
-.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
 
 /* --- Blok-bewerker --- */
 .blok-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; cursor: default; }
@@ -271,12 +275,14 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
 .rooster-blok.klikbaar { cursor: pointer; }
 .rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
-.scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 8px; }
-.scope-rij { display: flex; align-items: baseline; gap: 8px; }
-.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; min-width: 88px; padding-top: 4px; }
-.scope-persoon { flex: 0 0 auto; max-width: 280px; }
+.scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
+.scope-rij { display: flex; align-items: center; gap: 10px; }
+.scope-label { color: var(--muted); font-size: 13px; font-weight: 600; flex: 0 0 auto; width: 104px; text-align: right; white-space: nowrap; }
+.klas-strip .chip { white-space: nowrap; flex: 0 0 auto; min-width: 62px; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; }
+.klas-strip .chip.chip-plein { min-width: 96px; }
+.scope-persoon { flex: 0 0 auto; max-width: 300px; min-height: 34px; }
 .scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
-.scope-aantal { flex: 0 0 auto; white-space: nowrap; align-self: center; }
+.scope-aantal { flex: 0 0 auto; white-space: nowrap; }
 
 /* --- Afdrukken --- */
 .print-knop { margin-left: auto; background: #fff; }