Changeset ea138c0 in Klonkt for src/views/partials/msg-item.ejs

Timestamp:

08/07/2026 11:37:53 AM (5 weeks ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1e172f3

Parents:

f889429

git-author:

Robin <roboburr@…> (08/07/2026 11:37:51 AM)

git-committer:

roboburr <roboburr@…> (08/07/2026 11:37:53 AM)

Message:

Gesprekken in- en uitklappen door op de tegenpartij te tikken

Barts aanwijzing: de uitsparing met de naam is ook de knop. Dat is waar je van
nature naar wijst als je "dit gesprek" bedoelt, en het scheelt een extra
bedieningselement in een lijst die juist rustiger moest worden.

Een BUTTON en geen span met een klikhandler: dan werkt hij met het toetsenbord en
leest een schermlezer de stand voor (aria-expanded). Zonder JavaScript doet hij
niets, en dan staat het gesprek open -- wat ook de beginstand is. Standaard
uitgeklapt, zoals gevraagd.

Ingeklapt blijven de naam en het AANTAL staan. Dat aantal is juist ingeklapt het
meest waard: het is dan het enige wat zegt hoe groot het gesprek is.

Twee dingen die eromheen moesten:

RAAKVLAK de uitsparing is 18px hoog en dat is op een telefoon niet te raken.

De knop krijgt een minimumhoogte; de uitsparing blijft klein, het
doel wordt groter.

ZOEKEN een treffer in een dichtgeklapt gesprek liet alleen de naam zien: je

zoekt iets, het staat er, en je ziet het niet. Zolang er gezocht
wordt gaat zo'n gesprek open en daarna keert hij terug naar de stand
die de lezer zelf koos.

De stand leeft alleen in de pagina en niet in opslag. Een gesprek dat je gisteren
dichtklapte stilhouden is iets anders dan het opruimen van je scherm van nu.

De nieuwe CSS staat NA .msg-item, om dezelfde reden als de rest van dat blok: bij
gelijke specificiteit wint de laatste regel.

Templates compileren, suite 551/551. De pagina zelf staat achter een login, dus
het gedrag in beeld is aan Bart.

File:

• src/views/partials/msg-item.ejs (modified) (1 diff)

src/views/partials/msg-item.ejs

@@ -15 +15 @@
           <div class="msg-thread-head">
             <%# Tegenpartij en aantal in EEN uitsparing: het is een label bij het
-                gesprek, geen kop erboven. Zo houdt de inhoud de ruimte. %>
-            <span class="msg-thread-who"><%= _tlabel %><% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %></span>
+                gesprek, geen kop erboven. Zo houdt de inhoud de ruimte.
+
+                Deze uitsparing is ook de knop die het gesprek in- en uitklapt
+                (Barts aanwijzing): tikken op de tegenpartij is waar je van
+                nature naar wijst als je "dit gesprek" bedoelt. Een BUTTON en
+                geen span met een klikhandler, want dan werkt hij ook met het
+                toetsenbord en leest een schermlezer de stand voor.
+
+                Zonder JavaScript doet hij niets, en dan staat het gesprek
+                gewoon open -- dat is ook de stand waar we mee beginnen. %>
+            <button type="button" class="msg-thread-who" aria-expanded="true">
+              <span class="msg-thread-name"><%= _tlabel %></span>
+              <% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %>
+              <svg class="msg-thread-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
+            </button>
             <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
             <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze