Changeset 70677e96 in Klonkt for src/assets/css

Timestamp:

07/28/2026 07:43:49 PM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

742ba7e

Parents:

a7bcf66

Message:

Guardian-PWA: een paneel per kind

/guardian was een platte lijst van zeven secties: de wards' berichten, de
volgverzoeken, de hulpvragen, adopteren, verzonden aanvragen, wards, meldingen.
Wie een kind wilde overzien moest tussen die secties heen en weer, en nergens
stond bij elkaar wat er over dat ene kind speelt. Een guardian denkt niet per
functie maar per kind.

Nu is de wards-lijst de ingang: elk kind is een regel die opent naar een paneel
met zijn instellingen, zijn volgverzoeken, zijn hulpvragen en zijn recente
berichten. De regel zelf draagt de tellers (hulpvragen, volgverzoeken), zodat
een dicht paneel nooit iets verbergt dat een antwoord nodig heeft; dat is
belangrijk voor de volgverzoeken, want daar zit de follow-gating in.

De hulpvragen blijven daarnaast bovenaan staan, over alle kinderen heen, want
dat is waar deze app voor bestaat en het moet opvallen zonder dat je eerst een
kind opent. Ze verschijnen dus bewust twee keer: bovenaan de recente, in het
paneel de volledige geschiedenis van dat kind.

De hulpvraag is geen alarm. Er wordt niemand automatisch gewaarschuwd; een
guardian kan hem stil oplossen. De kaart is daarom rustig gehouden.

Changed files:
src/views/pages/guardian.ejs

• feed-section en follow-section weg als losse secties

src/assets/js/guardian.js

• helpCard, feedCard en followCard losgetrokken zodat beide plekken ze delen
• wardPanel: instellingen, volgverzoeken, hulpvragen, berichten, acties
• openPanels onthoudt wat open staat, zodat verversen niet dichtklapt
• feed en volgverzoeken vullen nu een cache en hertekenen de wards-lijst

src/assets/css/guardian.css

• opmaak voor het paneel en de tellers op de regel

src/routes/guardian.js

• authorUri en wardUri meegeven: de sleutels waarop gegroepeerd wordt
• de nieuwe labels toegevoegd aan uiStrings

src/services/i18n.js

• 39 strings voor het paneel in nl, en, de

New file:
test/guardian-panel.test.js

• de client schrijft nergens naar een verdwenen sectie
• elke paneelsectie heeft zijn groepeersleutel
• elk label dat de client gebruikt wordt ook geserveerd

remarks: geverifieerd in de browser op een wegwerp-database met twee kinderen:
elk paneel toont alleen zijn eigen volgverzoek, hulpvraag en post, een geopend
paneel blijft open over een ververs-ronde heen, en op 375px loopt niets buiten
beeld. De afhandel-lifecycle (oppakken/afgehandeld, shaer-jxi) en luid publiek
als tweede gated feature (shaer-3kp) komen hierna in dit paneel.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/assets/css/guardian.css (modified) (1 diff)

src/assets/css/guardian.css

@@ -118 +118 @@
 .g-note .tl-media-video, .g-note .tl-media-audio { width: 100%; margin: 8px 0 0; border-radius: 10px; display: block; }
 .g-note .tl-media-video { max-height: 320px; background: #000; }
+
+/* ── Paneel per ward ───────────────────────────────────────────────────────
+   Een guardian denkt per kind, niet per functie: achter de regel van een kind
+   zit alles over dat kind. De regel zelf draagt de tellers, zodat een dicht
+   paneel nooit iets verbergt dat een antwoord nodig heeft. */
+.g-card.ward > .row { gap: 8px; }
+.g-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
+.g-panel[hidden] { display: none; }
+.g-panel-sec + .g-panel-sec { margin-top: 16px; }
+.g-panel-sec h3 { margin: 0 0 6px; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
+  text-transform: uppercase; color: var(--sub); }
+.g-panel-sec .g-card { background: transparent; border-color: var(--line); }
+.g-panel-sec .g-card + .g-card { margin-top: 6px; }
+.g-panel-sec .row { flex-wrap: wrap; }
+.g-empty.small { margin: 0; font-size: .85rem; }
+.tag.help { color: var(--accent); border-color: var(--accent); }