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

Improve schedule duplicate blocks and conflict styling
Some checks are pending
CI / backend (push) Waiting to run
Details
CI / frontend (push) Waiting to run
Details

Browse source
This commit is contained in:
bes-r 2026-07-06 20:55:18 +02:00
parent 958ace1536
commit 4459f60019
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/pages.jsx
View file

@ -2464,7 +2464,7 @@ export function RoosterScherm({ mode }) {
out.push(
<div className="blok-splitsing enkel" key={`los-${k}`}>
{klasKop(eerste.doel_naam, eerste.doel_type, blks.length > 1 ? blks.length : null, doelIcoon(eerste.doel_type))}
<div className="split-vakken">{blks.map((b) => renderVakKaart(b, iso, kal))}</div>
<div className={blks.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blks.map((b) => renderVakKaart(b, iso, kal))}</div>
</div>
);
});
@ -2481,7 +2481,7 @@ export function RoosterScherm({ mode }) {
return (
<div className="split-kolom" key={gid}>
<div className="split-kop split-node-kop">{groep ? groep.naam : "Groep"}</div>
<div className="split-vakken">{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
<div className={groepBlokken.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
</div>
);
})}
@ -2499,7 +2499,7 @@ export function RoosterScherm({ mode }) {
out.push(
<div className="blok-splitsing enkel" key={`groep-${gid}`}>
{klasKop(groepNaam, "groep", groepBlokken.length > 1 ? groepBlokken.length : null, "👥")}
<div className="split-vakken">{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
<div className={groepBlokken.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
</div>
);
return;
@ -2514,7 +2514,7 @@ export function RoosterScherm({ mode }) {
{heleGroep.length > 0 && (
<div className="split-kolom">
<div className="split-kop split-node-kop">Hele groep</div>
<div className="split-vakken">{heleGroep.map((b) => renderVakKaart(b, iso, kal))}</div>
<div className={heleGroep.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{heleGroep.map((b) => renderVakKaart(b, iso, kal))}</div>
</div>
)}
{subIds.map((sid) => {
@ -2523,7 +2523,7 @@ export function RoosterScherm({ mode }) {
return (
<div className="split-kolom" key={sid}>
<div className="split-kop split-node-kop">{sub ? sub.naam : "Subgroep"}</div>
<div className="split-vakken">{blocks.map((b) => renderVakKaart(b, iso, kal))}</div>
<div className={blocks.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blocks.map((b) => renderVakKaart(b, iso, kal))}</div>
</div>
);
})}

23
frontend/src/styles.css
View file

@ -235,6 +235,14 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.split-kop { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.split-node-kop { display: inline-flex; max-width: 100%; align-items: center; border: 1px solid #bfdbfe; border-radius: 6px; background: #fff; color: var(--brand); padding: 4px 7px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-vakken { display: grid; gap: 6px; }
.split-vakken.meerdere-vakken {
gap: 5px;
padding-left: 7px;
border-left: 2px solid var(--line);
}
.split-vakken.meerdere-vakken .vak-kaart {
border-radius: 6px;
}
.split-vak { position: relative; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px; background: #fff; padding: 6px 6px 5px; margin-bottom: 6px; cursor: pointer; box-shadow: 0 1px 0 rgba(31,41,55,.03); }
.split-vak.open { box-shadow: 0 0 0 2px var(--brand-soft); }
.split-vak.vervallen { opacity: .55; }
@ -572,7 +580,10 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.wm-vak-kop { display: flex; align-items: center; gap: 4px; }
.wm-vak-naam { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.wm-vak-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.wm-vak.in-conflict { outline: 2px solid #ef4444; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.wm-vak.in-conflict {
outline: 0;
box-shadow: inset 0 0 0 2px #ef4444, 0 1px 0 rgba(31,41,55,.03);
}
.wm-add { width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px; cursor: pointer; font: inherit; font-size: 13px; opacity: .6; }
.wm-cel:hover .wm-add { opacity: 1; }
.wm-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
@ -608,8 +619,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.details-compact .split-kolommen { gap: 6px; }
.details-compact .split-vakken { gap: 5px; }
.details-compact .rb-picto { height: 18px; width: 18px; }
.details-compact .split-title span,
.details-compact .split-count { display: none; }
.details-compact .split-title span { display: none; }
.rooster-edit .vak-kaart { background: #fff; }
.rooster-edit .slot-add { opacity: .35; padding: 4px; }
.rooster-edit .slot-cel:hover .slot-add { opacity: 1; }
@ -679,4 +689,9 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.conflict-lijst li { padding: 4px 0 4px 16px; position: relative; color: #7f1d1d; font-size: 14px; }
.conflict-lijst li::before { content: "•"; position: absolute; left: 2px; }
.conflict-lijst li.waarschuwing { color: #92400e; }
.rooster-blok.in-conflict, .split-vak.in-conflict, .vak-kaart.in-conflict { outline: 2px solid #ef4444; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.rooster-blok.in-conflict,
.split-vak.in-conflict,
.vak-kaart.in-conflict {
outline: 0;
box-shadow: inset 0 0 0 2px #ef4444, 0 1px 0 rgba(31,41,55,.03);
}