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

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

Guardian-PWA: duidelijker + verstuurde offer altijd zichtbaar

Twee klachten opgelost.

"Ik zie niet dat ik verstuurd heb": de offer werd wél opgeslagen, maar als de
directe bezorging aan de remote ward faalde gaf de flow 502 en ververste de
PWA niet, dus de kaart verscheen niet. Nu: bezorging is async met retry (de
delivery-queue), de handshake geeft altijd 202 (opgeslagen) met een
delivered-vlag, en de PWA ververst altijd en toont de offer onder een eigen
sectie "Verzonden aanvragen · wacht op antwoord". Faalt de eerste bezorging,
dan meldt de UI dat we blijven proberen.

"Mag allemaal duidelijker": de pagina is herzien met vaste secties met kop en
uitleg: Hulpverzoeken (met teller), Ward adopteren (met uitleg wat er gebeurt),
Verzonden aanvragen, Mijn wards (actief-tag), Meldingen. Statussen als tags,
nette lege staten, alles via i18n (nl/en/de).

Changed files:
src/services/ActivityPubService.js

  • deliverToActor: enqueue+retry+logging, geeft {delivered, inbox}

src/services/guardianship/handshake.js

src/routes/guardian.js

  • /adopt niet meer hard falen op bezorg-hik; delivered terug; meer strings

src/views/pages/guardian.ejs

  • herziene, duidelijke secties

src/assets/js/guardian.js

  • aparte "Verzonden aanvragen"-sectie, altijd verversen na adopt

src/assets/css/guardian.css

  • sectie-koppen, status-tags, nette lege staten

src/services/i18n.js

  • uitgebreide guardian.*-teksten nl/en/de

remarks: als de offer "niet binnenkomt" bij de ward, moet diens Klonkt de
nieuwe code draaien (demo/beta/demohub zijn bij); een oude Klonkt of Mastodon
snapt de Offer-Relationship niet.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 3.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}
12* { box-sizing: border-box; }
13body {
14 margin: 0;
15 background: var(--bg);
16 color: var(--ink);
17 font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
18 padding-bottom: 48px;
19}
20.g-head {
21 display: flex;
22 align-items: center;
23 gap: 12px;
24 padding: 16px;
25 background: var(--card);
26 border-bottom: 1px solid var(--line);
27 position: sticky;
28 top: 0;
29 z-index: 2;
30}
31.g-head-txt { flex: 1; }
32.g-head h1 { font-size: 1.15rem; margin: 0; }
33.g-head .g-sub { margin: 0; color: var(--sub); font-size: .78rem; }
34.g-buoy { font-size: 1.7rem; }
35.g-me { color: var(--sub); font-size: .85rem; }
36#site-picker {
37 background: var(--bg); color: var(--ink);
38 border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
39}
40main { max-width: 640px; margin: 0 auto; padding: 8px 16px; }
41
42section { padding: 18px 0; border-bottom: 1px solid var(--line); }
43section:last-child { border-bottom: 0; }
44.g-sec-head { display: flex; align-items: center; gap: 8px; }
45.g-sec-head h2 { font-size: 1.02rem; margin: 0; }
46.g-badge {
47 background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
48 min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 7px;
49}
50.g-sec-sub { color: var(--sub); font-size: .84rem; margin: 4px 0 12px; }
51.g-empty { color: var(--sub); font-size: .9rem; margin: 6px 0 0; }
52.g-msg { font-size: .85rem; color: var(--ok); margin: 8px 0 0; }
53.g-msg.err { color: #ff7a7a; }
54.g-list { display: flex; flex-direction: column; gap: 8px; }
55
56.g-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
57.g-card.help { border-left: 3px solid var(--accent); }
58.g-card .row { display: flex; align-items: center; gap: 10px; }
59.g-card .row .grow { flex: 1; min-width: 0; }
60.g-card .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
61.g-card .when { color: var(--sub); font-size: .76rem; white-space: nowrap; }
62.g-card .body { margin-top: 8px; font-size: .92rem; overflow-wrap: anywhere; }
63.g-card .body img { max-width: 100%; border-radius: 8px; margin-top: 6px; }
64.g-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .82rem; text-decoration: none; }
65
66.tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
67.tag.wait { background: #3a2f1a; color: #e8b04b; }
68.tag.ok { background: #17301f; color: var(--ok); }
69
70#adopt-form { display: flex; gap: 8px; }
71#adopt-form input {
72 flex: 1; min-width: 0;
73 background: var(--bg); color: var(--ink);
74 border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
75}
76button {
77 background: var(--accent); color: #fff; border: 0;
78 border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer;
79}
80button:disabled { opacity: .5; cursor: default; }
81button.quiet { background: transparent; color: var(--sub); border: 1px solid var(--line); font-weight: 500; }
82button.quiet.is-on { color: var(--ok); border-color: var(--ok); }
83button.small { padding: 6px 12px; font-size: .82rem; }
Note: See TracBrowser for help on using the repository browser.