bes-r/roosterwijs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scope-balk: chips wrappen + persoonkeuze op eigen regel

Browse source
This commit is contained in:
bes-r 2026-06-18 23:04:26 +02:00
parent 7f1ada1d48
commit 8361484749
2 changed files with 43 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages.jsx
View file

@ -2478,8 +2478,9 @@ export function RoosterScherm({ mode }) {
{schooljaar && (edit ? tab === "week" : true) && ( {schooljaar && (edit ? tab === "week" : true) && (
<div className="rooster-balk no-print scope-balk"> <div className="rooster-balk no-print scope-balk">
<span className="scope-label">Toon</span>
{(groepen.length > 0 || leerpleinen.length > 0) && ( {(groepen.length > 0 || leerpleinen.length > 0) && (
<div className="scope-rij">
<span className="scope-label">Toon</span>
<div className="klas-strip"> <div className="klas-strip">
<button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button> <button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
{groepen.map((g) => ( {groepen.map((g) => (
@ -2489,7 +2490,10 @@ export function RoosterScherm({ mode }) {
<button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button> <button type="button" key={"lp" + lp.id} className={scopeType === "leerplein" && Number(scopeId) === lp.id ? "chip on chip-plein" : "chip chip-plein"} onClick={() => { setScopeType("leerplein"); setScopeId(String(lp.id)); }}>{lp.naam}</button>
))} ))}
</div> </div>
</div>
)} )}
<div className="scope-rij">
<span className="scope-label">of één persoon</span>
<select <select
className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"} className={(scopeType === "leerling" || scopeType === "personeel") ? "scope-persoon on" : "scope-persoon"}
value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""} value={scopeType === "leerling" ? "l" + scopeId : scopeType === "personeel" ? "p" + scopeId : ""}
@ -2500,7 +2504,7 @@ export function RoosterScherm({ mode }) {
else { setScopeType("personeel"); setScopeId(v.slice(1)); } else { setScopeType("personeel"); setScopeId(v.slice(1)); }
}} }}
> >
<option value="">👤 Eén persoon…</option> <option value="">👤 kies een leerling of medewerker…</option>
{leerlingen.length > 0 && ( {leerlingen.length > 0 && (
<optgroup label="Leerlingen"> <optgroup label="Leerlingen">
{leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)} {leerlingen.map((l) => <option key={"l" + l.id} value={"l" + l.id}>{l.volledige_naam}</option>)}
@ -2514,6 +2518,7 @@ export function RoosterScherm({ mode }) {
</select> </select>
{scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>} {scopeType !== "alles" && scopeId && <span className="muted small scope-aantal">{zichtbareBlokken.length} blok(ken)</span>}
</div> </div>
</div>
)} )}
{edit && ( {edit && (

11
frontend/src/styles.css
View file

@ -214,7 +214,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.split-vak-kop { display: flex; align-items: center; gap: 5px; } .split-vak-kop { display: flex; align-items: center; gap: 5px; }
.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; } .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; } .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: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .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; } .klas-strip .chip { white-space: nowrap; flex: 0 0 auto; }
/* --- Blok-bewerker --- */ /* --- Blok-bewerker --- */
@ -271,11 +271,12 @@ 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; } .modal-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 12px; }
.rooster-blok.klikbaar { cursor: pointer; } .rooster-blok.klikbaar { cursor: pointer; }
.rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); } .rooster-blok.klikbaar:hover { box-shadow: 0 0 0 2px var(--brand-soft); }
.scope-balk { margin-top: -6px; align-items: center; gap: 8px; } .scope-balk { margin-top: -6px; flex-direction: column; align-items: stretch; gap: 8px; }
.scope-label { color: var(--muted); font-size: 14px; flex: 0 0 auto; } .scope-rij { display: flex; align-items: baseline; gap: 8px; }
.scope-persoon { flex: 0 0 auto; max-width: 200px; } .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-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; } .scope-persoon.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.scope-aantal { flex: 0 0 auto; white-space: nowrap; } .scope-aantal { flex: 0 0 auto; white-space: nowrap; align-self: center; }
/* --- Afdrukken --- */ /* --- Afdrukken --- */
.print-knop { margin-left: auto; background: #fff; } .print-knop { margin-left: auto; background: #fff; }