Harlekin/AfiS-Aktensystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Suche fängt bei „Alle" an, Bereiche in der Kopfzeile sind Knöpfe

Browse Source 
**Suche.** Sie startete auf den Fallakten, und man musste die Art vorher
wählen — die falsche Reihenfolge: wer einen Namen eintippt, weiss noch nicht,
ob er eine Fallakte, ein Dokument oder eine Personalakte sucht. Er will wissen,
wo der Name vorkommt.

„Alle" ist jetzt der Auslieferungszustand und zeigt je Art fünf Treffer als
eigenen Block, mit dem Weg in die volle Liste daneben. Getrennte Blöcke statt
einer gemischten Liste nach Rang: ein Aktenzeichen neben einem Namen neben
einer Dokumentnummer hat keine erkennbare Ordnung. Die einzelnen Arten bleiben
als Filter, und nur dort gibt es Facetten und Blättern — beides bezieht sich
auf eine Grundmenge, ein Statusfilter über Fall- und Personalakten zugleich
wäre bei der einen ein Filter und bei der anderen ein Ausschluss.

**Kopfzeile.** Die Bereiche waren Textlinks: von einem Fliesstextlink nicht zu
unterscheiden und ohne Hinweis darauf, wo man gerade ist. Jetzt dieselbe
Knopfform wie alles Bedienbare, der aktive Bereich gefüllt.

Der gefüllte Zustand trägt hellen Text statt der Akzentfarbe: auf der getönten
Fläche wäre Akzent auf Akzent und der Kontrast fiele unter die Untergrenze.
Dazu etwas grosszügigere Polsterung an beiden Knopfgrössen, .btn-count für
Zahlen in Knöpfen, und kein Doppelring mehr am Profilbild.

Nachgesehen mit dem gebauten CSS im Browser, hell und dunkel.
This commit is contained in:
Harlekin
2026-09-03 21:59:06 +02:00
parent d51df03c87
commit eef145c97b
8 changed files with 304 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/globals.css
+31 -4
View File
@@ -240,7 +240,7 @@
border-radius: var(--radius-control);
background-color: var(--color-raised);
color: var(--color-text);
padding: 0.3rem 0.85rem;
padding: 0.35rem 0.95rem;
font-family: var(--font-condensed);
font-size: var(--text-xs);
line-height: 1.45;
@@ -291,7 +291,7 @@
/* Fuer dichte Zeilen: Etikettenleisten, Werkzeuge an einem Eintrag. */
.btn-sm {
padding: 0.15rem 0.6rem;
padding: 0.22rem 0.75rem;
font-size: var(--text-2xs);
}
@@ -299,9 +299,30 @@
Reaktion gesetzt oder nicht, Reiter offen oder nicht. */
.btn[aria-current='page'],
.btn[aria-pressed='true'] {
background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-raised));
/* Der gefuellte Zustand traegt hellen Text, nicht die Akzentfarbe: auf der
getoenten Flaeche waere Akzent auf Akzent, und der Kontrast faellt unter
die Untergrenze aus docs/10-design-system.md. */
background-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-raised));
border-color: var(--color-accent);
color: var(--color-accent);
color: var(--color-text);
}
.btn[aria-current='page']:hover,
.btn[aria-pressed='true']:hover {
color: var(--color-text);
background-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-raised));
}
/* Die Zahl in einem Knopf: eine Angabe, kein Teil der Beschriftung. Sie
sitzt deshalb ruhiger und in Mono. */
.btn-count {
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--color-text-dim);
}
.btn[aria-current='page'] .btn-count {
color: var(--color-text);
}
/* Waehrend eine Aktion laeuft. Kein Spinner, nur ein ruhiger Zustand:
@@ -393,6 +414,12 @@
padding-block: 0.35rem;
}
/* Steckt das Bild in einem Knopf, traegt der Knopf den Rahmen. Zwei
ineinander waeren ein Doppelring. */
.btn > .avatar {
border: 0;
}
/* Das Profilbild oben rechts und ueberall sonst, wo eine Person auftaucht. */
.avatar {
display: inline-flex;