Changeset 5412cbb in Klonkt for src/assets/css/ward.css

Timestamp:

08/12/2026 08:38:08 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

2086ea2

Parents:

4bb93aa

Message:

Ward-PWA: de (+) voor een nieuw gesprek

De hemel toont alleen met wie je al sprak; de (+) is de deur naar de
rest. Hij zit op de OORSPRONG van het veld en pant en zoomt met de
gezichten mee, zodat hij altijd het midden van de vliegende avatars is,
waar de hemel ook heen drijft. Precies waar de plaatsing bewust ruimte
vrijhoudt: elk gezicht hangt minstens 1.4 cel naar buiten.

De tik kiest eerst een gezicht en pas daarna de (+), met een raakzone
die meeschaalt met de zoom. De kiezer erachter toont iedereen met een
volgrelatie, welke kant op dan ook: dezelfde bron als de Connect-pagina
(listConnections), want de vraag is dezelfde. Kies iemand en het lege
gesprek opent gewoon; het eerste bericht maakt het echt.

Changed files:
src/routes/ward.js

• /api/friends: following + followers samengevoegd, met naam en icoon

src/assets/js/ward-sky.js

• de (+) getekend op de veldoorsprong; onNew naast onPick

src/assets/js/ward.js

• de vriendenkiezer, die doorvalt in openThread

src/views/pages/ward.ejs + src/assets/css/ward.css

• de kiezer als dialoog

src/services/i18n.js

• twee sleutels in nl, en, de

test/ward-pwa.test.js

• beide richtingen zijn een deur, en elke deur heeft een naam

remarks: 899 tests groen.

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

File:

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

src/assets/css/ward.css

@@ -150 +150 @@
 .wave-answers button { border: 0; border-radius: 10px; padding: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
 #wave-cancel { margin-top: 10px; border: 0; background: none; color: var(--dim); font: inherit; }
+
+/* ── De vriendenkiezer achter de (+) ──────────────────────────────────── */
+dialog#friends-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 380px; width: calc(100% - 48px);
+  max-height: 70vh; overflow-y: auto;
+  background: var(--card); color: var(--ink);
+}
+dialog#friends-dialog::backdrop { background: rgba(0,0,0,.4); }
+dialog#friends-dialog h2 { margin: 0 0 12px; font-size: 1.05rem; }
+.friend button.row {
+  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
+  border: 0; background: none; color: var(--ink); padding: 4px 2px; font: inherit; cursor: pointer;
+}
+.friend .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
+.friend .wie { display: flex; flex-direction: column; }
+#friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }