source: Klonkt/src/assets/css/guardian.css@ 6c152a5

main
Last change on this file since 6c152a5 was 742ba7e, checked in by Robin Genis <roboburr@…>, 6 weeks ago

Een ward loslaten vraagt eerst, en zegt wat het doet

Loslaten zat achter een window.confirm met een lap tekst erin. Dat is precies
het soort dialoog dat mensen wegklikken om ervan af te zijn, terwijl dit de
zwaarste knop in de app is. Nu is het een stap in het paneel: eerst de gevolgen,
dan ja of nee, met nee links zodat de uitweg de makkelijke is om te raken.

De waarschuwing wordt opgebouwd uit wat er echt aan de hand is, niet uit een
vaste zin, want loslaten betekent twee verschillende dingen. Blijven er andere
guardians over, dan stap jij op en blijft het kind een ward (FEP-633c 3.3). Ben
je de laatste, dan is het emancipatie, en 3.4 zegt uitdrukkelijk dat geen enkele
guardian daar alleen over gaat: drie instemmende volwassenen, of een meerderheid
met twee getuigen. Een nieuwe route zoekt dat op het moment van drukken op, want
voor een ward die wij niet hosten moet daarvoor die server bevraagd worden en
dat hoort niet bij elke ververs-ronde.

En het derde ding dat er hoorde te staan: het Undo federeert nog niet (fase 4 in
relations.js), dus vandaag haalt de knop de band alleen hier weg terwijl de
server van het kind je gewoon als guardian blijft noemen. Zonder die regel drukt
een guardian erop in de overtuiging dat het kind losgelaten is.

Changed files:
src/routes/guardian.js

  • GET /guardian/wards/release-check: telt de guardians van dit kind (lokaal uit de relaties, remote uit shaer:guardians van de actor) en weigert een ward die niet van jou is
  • de nieuwe labels toegevoegd aan uiStrings

src/assets/js/guardian.js

  • releaseStep: de waarschuwing plus ja/nee, in plaats van window.confirm
  • de site gaat mee in de check, anders kijkt de server naar de verkeerde

src/assets/css/guardian.css

  • --danger toegevoegd; die bestond niet, waardoor het kader en de knop onzichtbaar bleven
  • opmaak voor het waarschuwingsblok

src/services/i18n.js

  • 24 strings voor de waarschuwing in nl, en, de

test/guardian-panel.test.js

  • loslaten gaat in twee stappen en niet via window.confirm
  • elke CSS-variabele die de PWA gebruikt is er ook een die hij definieert

remarks: alle vier de gevallen in de browser nagelopen: laatste guardian,
meerdere guardians, onbereikbare server, en een ward die niet van je is. Nee
zet de knop terug zonder iets te doen, ja verwijdert alleen die ene relatie.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 7.5 KB
Line 
1/* Guardian PWA (FEP-633c): its own calm, dark surface; the buoy orange is
2 the accent. Standalone: this page never inherits the site theme. */
3:root {
4 --bg: #141a24;
5 --card: #1e2632;
6 --ink: #e8ecf2;
7 --sub: #93a0b4;
8 --line: #2c3646;
9 --accent: #ff6b35;
10 --ok: #4caf7d;
11 --danger: #e05a5a; /* alleen voor onomkeerbare stappen, zoals een ward loslaten */
12}
13* { box-sizing: border-box; }
14body {
15 margin: 0;
16 background: var(--bg);
17 color: var(--ink);
18 font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
19 padding-bottom: 48px;
20}
21.g-head {
22 display: flex;
23 align-items: center;
24 gap: 12px;
25 padding: 16px;
26 background: var(--card);
27 border-bottom: 1px solid var(--line);
28 position: sticky;
29 top: 0;
30 z-index: 2;
31}
32.g-head-txt { flex: 1; }
33.g-head h1 { font-size: 1.15rem; margin: 0; }
34.g-head .g-sub { margin: 0; color: var(--sub); font-size: .78rem; }
35.g-buoy { font-size: 1.7rem; }
36.g-me { color: var(--sub); font-size: .85rem; }
37#site-picker {
38 background: var(--bg); color: var(--ink);
39 border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
40}
41main { max-width: 640px; margin: 0 auto; padding: 8px 16px; }
42
43section { padding: 18px 0; border-bottom: 1px solid var(--line); }
44section:last-child { border-bottom: 0; }
45.g-sec-head { display: flex; align-items: center; gap: 8px; }
46.g-sec-head h2 { font-size: 1.02rem; margin: 0; }
47.g-badge {
48 background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
49 min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 7px;
50}
51.g-sec-sub { color: var(--sub); font-size: .84rem; margin: 4px 0 12px; }
52.g-empty { color: var(--sub); font-size: .9rem; margin: 6px 0 0; }
53.g-msg { font-size: .85rem; color: var(--ok); margin: 8px 0 0; }
54.g-msg.err { color: #ff7a7a; }
55.g-list { display: flex; flex-direction: column; gap: 8px; }
56
57.g-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
58.g-card.help { border-left: 3px solid var(--accent); }
59.g-card .row { display: flex; align-items: center; gap: 10px; }
60.g-card .row .grow { flex: 1; min-width: 0; }
61.g-card .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
62.g-card .when { color: var(--sub); font-size: .76rem; white-space: nowrap; }
63.g-card .body { margin-top: 8px; font-size: .92rem; overflow-wrap: anywhere; }
64.g-card .body img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
65.g-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .82rem; text-decoration: none; }
66
67.tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
68.tag.wait { background: #3a2f1a; color: #e8b04b; }
69.tag.ok { background: #17301f; color: var(--ok); }
70.tag.co { background: #2a1f3a; color: #c39bff; }
71
72#adopt-form { display: flex; gap: 8px; }
73#adopt-form input {
74 flex: 1; min-width: 0;
75 background: var(--bg); color: var(--ink);
76 border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
77}
78button {
79 background: var(--accent); color: #fff; border: 0;
80 border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer;
81}
82button:disabled { opacity: .5; cursor: default; }
83button.quiet { background: transparent; color: var(--sub); border: 1px solid var(--line); font-weight: 500; }
84button.quiet.is-on { color: var(--ok); border-color: var(--ok); }
85button.small { padding: 6px 12px; font-size: .82rem; }
86
87/* Wards' corner (v2 meekijken) */
88.g-card.feed .g-when { color: var(--muted, #888); font-size: .8em; margin-left: auto; }
89.g-card.feed .feed-body { margin-top: 6px; line-height: 1.4; }
90.g-card.feed .feed-body img { max-width: 100%; border-radius: 8px; }
91
92/* ── The body of a post ────────────────────────────────────────────────────
93 The 🛟 card shows a real post, so it is rendered by the same partial de
94 Krant and Berichten use (partials/note-body). These are that partial's
95 classes, in the PWA's own colours: the dashboard is standalone and does not
96 load the site's stylesheet. */
97.g-note .tl-content { line-height: 1.5; overflow-wrap: anywhere; }
98.g-note .tl-content p { margin: .35rem 0; }
99.g-note .tl-content p:first-child { margin-top: 0; }
100.g-note .tl-content p:last-child { margin-bottom: 0; }
101.g-note .tl-content a { color: var(--accent); }
102.g-note img.emoji { height: 1.25em; width: auto; margin: 0 .05em; vertical-align: -.2em;
103 display: inline-block; border-radius: 0; background: none; }
104
105/* Quote card and link preview: one card, two origins. */
106.g-note .tl-quote { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
107 border: 1px solid var(--line); background: var(--card-2, rgba(128,128,128,.07)); }
108.g-note .tl-quote-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-width: 0; }
109.g-note .tl-quote-avatar { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
110.g-note .tl-quote-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
111.g-note .tl-quote-handle { color: var(--sub); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
112.g-note .tl-quote-body { color: var(--sub); font-size: .88rem; line-height: 1.45; max-height: 14em; overflow: hidden; }
113.g-note .tl-quote-media { display: block; margin: 6px 0 0; }
114
115/* The capture a 🛟 usually carries. */
116.g-note .tl-media { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
117.g-note .tl-media-img { display: block; border-radius: 10px; overflow: hidden; }
118.g-note .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; }
119.g-note .tl-media-video, .g-note .tl-media-audio { width: 100%; margin: 8px 0 0; border-radius: 10px; display: block; }
120.g-note .tl-media-video { max-height: 320px; background: #000; }
121
122/* ── Paneel per ward ───────────────────────────────────────────────────────
123 Een guardian denkt per kind, niet per functie: achter de regel van een kind
124 zit alles over dat kind. De regel zelf draagt de tellers, zodat een dicht
125 paneel nooit iets verbergt dat een antwoord nodig heeft. */
126.g-card.ward > .row { gap: 8px; }
127.g-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
128.g-panel[hidden] { display: none; }
129.g-panel-sec + .g-panel-sec { margin-top: 16px; }
130.g-panel-sec h3 { margin: 0 0 6px; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
131 text-transform: uppercase; color: var(--sub); }
132.g-panel-sec .g-card { background: transparent; border-color: var(--line); }
133.g-panel-sec .g-card + .g-card { margin-top: 6px; }
134.g-panel-sec .row { flex-wrap: wrap; }
135.g-empty.small { margin: 0; font-size: .85rem; }
136.tag.help { color: var(--accent); border-color: var(--accent); }
137
138/* Loslaten van een ward: geen browser-confirm maar een stap in het paneel, met
139 de gevolgen erbij. Rustig van kleur; het is een besluit, geen alarm. */
140.g-warn { margin-top: 10px; padding: 12px 14px; border-radius: 10px;
141 border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
142.g-warn strong { display: block; margin-bottom: 6px; }
143.g-warn p { margin: 0 0 8px; font-size: .88rem; line-height: 1.45; color: var(--sub); }
144.g-warn p.grave { color: var(--ink); font-weight: 500; }
145.g-warn .row { margin-top: 10px; gap: 8px; }
146button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
Note: See TracBrowser for help on using the repository browser.