DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reaktionen: Vorschlaege, ganzer Katalog, eigene Favoriten

Browse Source 
Filipe: "soll viel besser und geiler sein und man soll auch auswaehlen
koennen, also paar als vorschlaege mit der moeglichkeit andere
auszuwaehlen und als favoriten zu speichern."

Aus einem Streifen mit sechs Zeichen ist eine Karte geworden:
Vorschlaege oben, Suchfeld, darunter der Katalog in sechs Gruppen --
82 Zeichen, jedes mit deutschen Suchwoertern. Wer "feuer" tippt, muss
nicht scrollen.

DREI LISTEN, DREI FRAGEN, und sie werden gern verwechselt:
  KATALOG    Was gibt es?              fest, workspace-reaktionen.js
  VORSCHLAG  Was steht vorn, solange   fest -- bis jemand eigene
             ich nichts gewaehlt habe? Favoriten hat
  FAVORITEN  Was hat DIESER Mensch     in der Datenbank
             sich gemerkt?

Nur der Katalog entscheidet, was ANGENOMMEN wird. Vorschlag und
Favoriten sind Reihenfolge, keine Erlaubnis -- sonst koennte man sich
ueber einen Favoriten etwas erlauben, das im Katalog nicht steht. Die
erlaubte Menge wird aus dem Katalog ABGELEITET; eine zweite Liste
daneben waere die, in der ein Zeichen fehlt, das die Oberflaeche
anbietet.

FAVORITEN HAENGEN AM MENSCHEN, NICHT AM GERAET. Im Browser abgelegt
waeren sie am Handy andere als am Rechner und beim naechsten Loeschen
der Seitendaten weg.

DER STERN SCHALTET EINEN MODUS, statt an jedem Zeichen einen zweiten
Knopf zu haben: Am Handy gibt es kein "daneben zeigen". Im Merk-Modus
faerbt sich die ganze Tafel, damit niemand reagiert, wenn er merken
wollte. Die Tafel bleibt dabei offen -- acht Favoriten waeren sonst
acht Mal Aufmachen -- und die Vorschlagszeile aendert sich sofort mit.

DIE GRENZE SAGT BESCHEID, statt still den aeltesten wegzuwerfen: Wer
einen neunten merken will, bekommt "nimm erst einen weg". Ein Favorit,
der ohne Ansage verschwindet, sieht wie ein Fehler aus.

Eine Selbstpruefung beim Laden meldet doppelte Zeichen im Katalog und
Vorschlaege, die nicht darin stehen -- beides waere in der Tafel still.

pruef-chat-aufloesen 85 -> 115. Gemessen wird, was PASSIERT, nicht dass
es Elemente gibt: dass die Suche wirklich eingrenzt (1 statt 82) und
das Richtige findet, dass ein Fehlgriff "Nichts zu ... gefunden" sagt
statt eine leere Flaeche zu zeigen, und vor allem, dass im Merk-Modus
KEINE Reaktion entsteht -- an der Zahl der Reaktionen gemessen, nicht
an der Absicht.

NEBENBEFUND AUS DER EIGENEN PRUEFUNG: pruef-css-klassen hat meine
Gruppenueberschrift mit 10,56 px abgelehnt (Grenze 11,5). Richtig so --
eine gesperrte Versalzeile ist ohnehin schwerer zu lesen, die darf
nicht auch noch die kleinste sein. Auf .72rem angehoben, statt die
Grundlinie zu verschieben.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-14 14:04:57 +02:00
co-authored by Claude Opus 5
parent 47269bda21
commit 9f277435a5
35 changed files with 1113 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/chat.css
+143 -18
View File
@@ -1013,30 +1013,155 @@
.reaktionen__zeichen { font-size: .95rem; line-height: 1; }
.reaktionen__zahl { font-variant-numeric: tabular-nums; }
/* Die Auswahl klappt AN der Nachricht auf, nicht in einem Fenster.
Wer ein Zeichen anklickt, ist in zwei Sekunden fertig; ein Dialog
dafuer waere mehr Weg als Zweck. */
/* Die Tafel: eine Karte, kein Pillenstreifen (14.09.2026).
Filipe: "soll viel besser und geiler sein und man soll auch
auswaehlen koennen, also paar als vorschlaege mit der moeglichkeit
andere auszuwaehlen und als favoriten zu speichern."
Die erste Fassung war eine Reihe von sechs Zeichen in einer Pille.
Das sah nach Notloesung aus -- und es WAR eine: Mehr ging nicht
hinein. Jetzt ist es eine Karte mit drei Teilen: Vorschlaege oben,
Suche, Katalog. Der Katalog rollt, die Vorschlaege bleiben stehen.
GEDECKT, NICHT GRELL: Die Zeichen bringen ihre eigene Farbe mit. Die
Karte darum ist dunkel und ruhig, damit die Zeichen die einzigen
bunten Punkte sind. */
.reagieren-tafel {
display: flex; gap: 2px;
margin: 7px 0 0;
padding: 4px;
border: 1px solid var(--rand); border-radius: 999px;
background: var(--flaeche-hoch, rgba(255, 255, 255, .05));
width: max-content; max-width: 100%;
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .8);
position: relative; z-index: 5;
margin: 8px 0 2px;
width: min(330px, 100%);
border: 1px solid var(--rand-hell, var(--rand));
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
var(--flaeche-tief, #131a24);
box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .95),
inset 0 1px 0 rgba(255, 255, 255, .06);
padding: 9px 9px 7px;
animation: tafel-auf .13s ease-out;
}
.reagieren-tafel__zeichen {
appearance: none; border: 0; border-radius: 999px;
padding: 4px 7px;
@keyframes tafel-auf {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.reagieren-tafel { animation: none; }
}
/* Kopf: die Vorschlaege nehmen den Platz, der Stern bleibt rechts. */
.reagieren-tafel__kopf {
display: flex; align-items: center; gap: 6px;
}
.reagieren-tafel__schnell {
flex: 1; min-width: 0;
display: flex; flex-wrap: wrap; gap: 2px;
}
.reagieren-tafel__stern {
flex: none;
appearance: none; border: 1px solid transparent; border-radius: 10px;
width: 30px; height: 30px;
background: none; cursor: pointer;
font-size: 1.05rem; line-height: 1;
transition: background var(--tempo), transform var(--tempo);
font-size: .95rem; line-height: 1;
color: var(--text-still);
transition: color var(--tempo), background var(--tempo), border-color var(--tempo);
}
.reagieren-tafel__zeichen:hover { background: rgba(255, 255, 255, .09); transform: scale(1.12); }
.reagieren-tafel__zeichen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.reagieren-tafel__stern:hover { color: var(--text-leise); background: rgba(255, 255, 255, .06); }
.reagieren-tafel__stern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Im Merk-Modus ist der Stern AN -- und die ganze Tafel sagt es mit,
damit niemand aus Versehen reagiert, wenn er merken wollte. */
.reagieren-tafel[data-merken="ja"] .reagieren-tafel__stern {
color: var(--akzent);
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
background: color-mix(in srgb, var(--akzent) 14%, transparent);
}
.reagieren-tafel[data-merken="ja"] {
border-color: color-mix(in srgb, var(--akzent) 40%, var(--rand));
}
.reagieren-tafel__hinweis {
margin: 0; padding: 0 2px;
font-size: .72rem; line-height: 1.45;
color: var(--text-still);
}
.reagieren-tafel__hinweis:empty { display: none; }
.reagieren-tafel__suche {
width: 100%; box-sizing: border-box;
margin: 7px 0 6px;
padding: 6px 10px;
border: 1px solid var(--rand); border-radius: 10px;
background: rgba(0, 0, 0, .25);
font: inherit; font-size: .78rem;
color: var(--text);
}
.reagieren-tafel__suche::placeholder { color: var(--text-still); }
.reagieren-tafel__suche:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Der Katalog rollt INNEN. Eine Tafel, die laenger wird als der
Bildschirm, schiebt den Chat weg und ihre eigene Suche nach oben
hinaus. */
.reagieren-tafel__katalog {
max-height: 210px; overflow-y: auto;
padding-right: 2px;
overscroll-behavior: contain;
}
.reagieren-tafel__gruppe {
margin: 6px 0 3px; padding: 0 2px;
/* .72rem = 11.52 px und damit knapp ueber der Lesbarkeitsgrenze von
11.5 px, die pruef-css-klassen zieht. Mein erster Wert (.66rem =
10.56 px) ist dort aufgeschlagen -- richtig so: Eine gesperrte
Versalzeile ist ohnehin schon schwerer zu lesen als normale
Schrift, da darf sie nicht auch noch die kleinste sein. */
font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--text-still);
}
.reagieren-tafel__gruppe:first-child { margin-top: 0; }
.reagieren-tafel__reihe { display: flex; flex-wrap: wrap; gap: 2px; }
.reagieren-tafel__leer {
margin: 10px 2px; font-size: .76rem; color: var(--text-still);
}
.reagieren-tafel__zeichen {
position: relative;
appearance: none; border: 1px solid transparent; border-radius: 10px;
width: 34px; height: 32px;
padding: 0;
background: none; cursor: pointer;
font-size: 1.15rem; line-height: 1;
transition: background var(--tempo), transform var(--tempo), border-color var(--tempo);
}
.reagieren-tafel__zeichen:hover {
background: rgba(255, 255, 255, .09);
transform: scale(1.14);
}
.reagieren-tafel__zeichen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* EIN FAVORIT TRAEGT EINEN PUNKT, keinen Rahmen: Der Rahmen gehoert im
Merk-Modus dem, was man gerade anfasst. Ein kleiner Punkt unten sagt
"gemerkt", ohne mit dem Zeichen zu konkurrieren. */
.reagieren-tafel__zeichen[data-favorit="ja"]::after {
content: ""; position: absolute;
left: 50%; bottom: 2px; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%;
background: var(--akzent);
}
/* Im Merk-Modus wird der Punkt zum Rahmen -- dort geht es genau darum. */
.reagieren-tafel[data-merken="ja"] .reagieren-tafel__zeichen[data-favorit="ja"] {
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.reagieren-tafel__zeichen:hover { transform: none; }
.reagieren-tafel__zeichen, .reaktionen__stueck { transition: none; }
.reagieren-tafel__zeichen, .reagieren-tafel__stern { transition: none; }
}
/* Am Handy darf die Tafel die ganze Breite nehmen -- 330 px neben
einer Sprechblase waeren dort ein Streifen. */
@media (max-width: 560px) {
.reagieren-tafel { width: 100%; }
.reagieren-tafel__katalog { max-height: 44vh; }
}
.chat__kopf-knoepfe {