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

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

Een gated voorstel bereikte de andere guardians nooit

Op de vloot nagekeken waarom YouTube-voorbeelden bij beta uit blijven: het
voorstel van sound-fabrics staat er, met een ja van een van de drie guardians,
en het is stil verlopen. Niet omdat iemand bezwaar had, maar omdat niemand
anders het ooit gezien heeft.

Het voorstel wordt geadresseerd aan de server van het kind, want die telt en
handhaaft (5.6). Maar daarmee bereikt het alleen de voorsteller en het kind. De
twee guardians op andere servers weten van niets, kunnen dus niet antwoorden, en
een drempel van twee is onhaalbaar. Elk voorstel verloopt na een dag.

De ontbrekende schakel is het doorsturen, precies wat 5.3 al doet voor een
gated follow: de server van het kind kent de gezaghebbende guardian-lijst, dus
die stuurt het voorstel door. Elke guardian bewaart een kopie die hij kan
beantwoorden, en het antwoord reist terug naar het kind, dat telt.

Changed files:
src/config/database.js

  • tabel ap_gated_reviews, de guardian-kopie (zelfde vorm als ap_follow_reviews)

src/services/guardianship/gated.js

  • de kopie-opslag: bewaren, lezen, beantwoorden, opruimen

src/services/guardianship/handshake.js

  • ward-kant: doorsturen naar de andere guardians zodra het voorstel openstaat
  • guardian-kant: de doorgestuurde kopie bewaren om te kunnen antwoorden

src/routes/guardian.js

  • gatedReviews in de dashboardstaat; POST /guardian/api/gated/:id stuurt het antwoord naar de inbox van het kind

src/assets/js/guardian.js, src/assets/css/guardian.css

src/services/i18n.js

  • de teksten in nl, en, de

test/gated-settings.test.js

  • de hele keten: voorstellen, doorsturen naar allebei de anderen, de kopie opslaan, antwoorden, en pas bij twee van drie gaat de gate open

remarks: dit forceert niets; het maakt alleen mogelijk wat de spec al bedoelde.
Twee van de drie guardians moeten nog steeds akkoord gaan, en het venster is
24 uur.

-robo
Co-Authored-By: Claude Opus 5 <noreply@…>
  • Property mode set to 100644
File size: 8.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); }
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; }
161
162/* Een voorgestelde gated setting (FEP-633c 5.6) van een mede-guardian. */
163.g-card.gated { border-left: 3px solid var(--accent); }
164.g-card.gated .row { margin-top: 8px; gap: 8px; }
Note: See TracBrowser for help on using the repository browser.