source: Klonkt/src/assets/css/guardian.css@ 0202104

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

De gebruikerskant van 3.6: de ward ziet zijn vangnet, de guardian handelt

Drie oppervlakken rondgemaakt op de beschikbaarheid die er sinds vanmorgen
server-side in zit.

Berichten (de ward): de guardians-balk toont per guardian de buddy-list-stip
met het label erbij: beschikbaar, afwezig tot een datum, offline. Het kind ziet
de echte omvang van zijn vangnet, niet alleen de namen. Owner-only omdat de
pagina dat is.

De Guardian-PWA (de guardian): in het paneel per kind staan de mede-guardians
met dezelfde stippen; op een slapende verschijnt de bewuste, zeldzame
vervolgstap "Voorstel: loslaten bij afwezigheid", die langs dezelfde
C2S-pijplijn loopt als de Shaer-apps (Offer van shaer:Lapse, lokaal ward opent
direct, remote ward krijgt het voorstel bezorgd). Lopende lapses staan als
kaart bij de aanvragen, met Eens/Oneens over de bestaande offer-draad en de zin
die het frame bewaakt. En "Even afwezig": een week of een maand, een directe
note met shaer:away naar alle wards, lokaal direct toegepast.

Shaer (beide apps): de lapse-kaart toont stemknoppen alleen aan leden van de
set. De ward kijkt mee naar wat zijn guardians beslissen; het is daar niet de
rechter, om precies de reden uit de editor's note van 3.6.3.

Onderweg gerepareerd: parseStamp kende alleen strings, waardoor een epoch-ms
endTime als lege datum rendde ("unavailable till" zonder datum).

Changed files:
src/routes/posts.js

  • /messages geeft de guardians hun beschikbaarheid mee

src/views/pages/messages.ejs

  • de stip en het label per guardian, met de opmaak erbij

src/routes/guardian.js

  • dashboardState: mede-guardians met status per lokaal kind, plus lapses
  • POST /guardian/api/away en /guardian/api/lapse
  • de nieuwe labels in uiStrings

src/assets/js/guardian.js

  • de guardians-sectie in het paneel, de lapse-kaart, de afwezig-knoppen

src/views/pages/guardian.ejs

  • de "Even afwezig"-sectie

src/assets/css/guardian.css

  • de stippen en de lapse-kaart

src/middleware/render.js

  • parseStamp accepteert epoch ms

src/services/i18n.js

  • de labels en teksten in nl, en, de

remarks: end-to-end in de browser nagelopen op de wegwerp-database: het kind
ziet oma afwezig-tot, opa offline en guard beschikbaar; de guardian opent het
paneel, stelt de lapse voor op de slapende opa (kaart verschijnt, eigen stem
geteld), drukt "A week", en bij het kind staat guard meteen op afwezig tot
5 augustus. 276 tests groen. Niet uitgerold.

-robo
Co-Authored-By: Claude Fable 5 <noreply@…>
  • Property mode set to 100644
File size: 8.3 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); }
147
148/* ── Beschikbaarheid (FEP-633c 3.6) ────────────────────────────────────────
149 De buddy-list-stip op de verantwoordelijkheids-as: groen beschikbaar, geel
150 afwezig-verklaard met een einde, grijs slapend-geconstateerd (een antwoord
151 herstelt alles). Labels zijn UI; de draad houdt de spec-termen. */
152.g-avdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
153.g-avdot.is-active { background: var(--ok); }
154.g-avdot.is-away { background: #e0a83a; }
155.g-avdot.is-dormant { background: #8a93a3; }
156.g-avlabel { color: var(--sub); font-size: .8rem; white-space: nowrap; }
157.row.g-guard { gap: 8px; margin-top: 6px; }
158.g-away-row { display: flex; gap: 8px; }
159.g-card.lapse { border-left: 3px solid #8a93a3; }
160.g-card.lapse .row { margin-top: 8px; gap: 8px; }
Note: See TracBrowser for help on using the repository browser.