Highlights: drei Accounts nebeneinander, nach Zeit geteilt
DogFather, HasiDog und DogFather Clips haben eigene Zuschauer und einen eigenen Ton -- das steht so schon an KANAELE im Server. Eine gemeinsame Galerie behauptete, sie waeren ein Topf; wer fuer Clips schneidet, suchte in jeder Reihe nach den Kacheln, die ihn angehen. Jetzt drei Spalten nebeneinander, jede zuklappbar, jede mit ihrem Handle und ihrer Zahl. Eine vierte Spalte gibt es nur, wenn sie gebraucht wird: Bilder ohne TikTok-Link gehoeren zu keinem Account, und sie verschwinden zu lassen waere der schlimmere Fehler. Die Reihenfolge kommt vom SERVER. Der Browser hatte dafuer eine eigene kleine Liste (KANAL_WORT) -- dieselben drei Namen in anderer Reihenfolge, ohne Handles. Beim vierten Account waere genau diese Kopie die vergessene. Dazu eine Zeitleiste: Aktuell (heute), Diese Woche, Dieser Monat, Dieses Jahr, Alles. Kalenderzeitraeume, keine Rueckblicke -- wer am Dienstag "diese Woche" fragt, meint Montag und Dienstag. Jeder Knopf traegt seine Zahl; ohne sie klickt man ins Leere und weiss nicht, ob es am Filter lag. Und beim Anlegen laesst sich der Account waehlen -- fuer Bilder und Momente ohne Link. Bei einem TikTok-Link leitet der Server ihn weiterhin aus dem Handle ab; das ist genauer, weil niemand sich vertippen kann. Beim Bauen gemessen statt vermutet: Der Spaltenkasten lag IM Galerie-Raster von #liste und bekam eine Zelle von 376 px -- Elternbreite 1160. Die drei standen untereinander. Die Galerie gehoert jetzt in die Spalte, nicht um sie herum. pruef-highlights.mjs: 26 Pruefungen, mit Gegenproben (Gast bekommt die Liste nicht, erfundener Account wird abgelehnt, zweiter Klick hebt den Filter auf). pruef-video.mjs weiterhin 67/0. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1799,3 +1799,118 @@ body[data-ton] .kopf-zeile::before {
|
||||
transparent 62%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
DIE HIGHLIGHTS: DREI ACCOUNTS NEBENEINANDER (20.09.2026)
|
||||
|
||||
Filipe: „die highlights sollen in 3 kategorien sein nebeneinander,
|
||||
dogfather, hasidog und dogfather clips. und die liste soll man auch
|
||||
zu und auf klappen können."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
`auto-fit` UND NICHT `repeat(3, …)`
|
||||
|
||||
Drei feste Spalten wären auf einem Handy drei Streifen von 100 px,
|
||||
in denen kein Titel steht. `minmax(230px, 1fr)` misst statt zu
|
||||
rechnen: Nebeneinander, solange der Platz für 230 px je Spalte
|
||||
reicht, sonst untereinander. Kommt ein vierter Account dazu, bricht
|
||||
die Regel von selbst richtig um — bei einer festen 3 wäre er die
|
||||
Zeile, die jemand vergisst.
|
||||
|
||||
Das ist dieselbe Lehre wie bei der Kopfleiste am 06.09.2026: Wo es
|
||||
geht, eine Regel statt einer Zahl.
|
||||
===================================================================== */
|
||||
.kanalspalten {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.kanalspalte {
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--flaeche) 70%, transparent);
|
||||
overflow: hidden;
|
||||
/* Der farbige Strich oben ist das, was die drei auf einen Blick
|
||||
unterscheidet -- vor jedem gelesenen Wort. */
|
||||
border-top: 3px solid var(--kfarbe, var(--rand-hell));
|
||||
}
|
||||
.kanalspalte[data-kanal="dogfather"] { --kfarbe: #7c6cf0; }
|
||||
.kanalspalte[data-kanal="hasidog"] { --kfarbe: #e58bbd; }
|
||||
.kanalspalte[data-kanal="clips"] { --kfarbe: #4fb9c8; }
|
||||
.kanalspalte[data-kanal="ohne"] { --kfarbe: var(--rand-hell); }
|
||||
|
||||
.kanalspalte__kopf {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
width: 100%;
|
||||
padding: 11px 13px;
|
||||
border: 0; background: color-mix(in srgb, var(--kfarbe) 9%, transparent);
|
||||
color: var(--text);
|
||||
font: inherit; font-weight: 650;
|
||||
text-align: left; cursor: pointer;
|
||||
}
|
||||
.kanalspalte__kopf:hover { background: color-mix(in srgb, var(--kfarbe) 16%, transparent); }
|
||||
.kanalspalte__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
||||
|
||||
.kanalspalte__wort { flex: 1 1 auto; min-width: 0; display: block; }
|
||||
/* Das Handle DARUNTER, nicht daneben: In einer Spalte von 230 px
|
||||
schöbe „@dogis.modi.gang" neben dem Namen die Zahl aus dem Bild. */
|
||||
.kanalspalte__handle {
|
||||
display: block;
|
||||
font-size: .72rem; font-weight: 500; color: var(--text-leise);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.kanalspalte__zahl {
|
||||
flex: 0 0 auto;
|
||||
min-width: 22px; padding: 1px 7px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--kfarbe) 26%, transparent);
|
||||
font-size: .74rem; font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.kanalspalte__inhalt {
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
/* Die Galerie-Form IN der Spalte. `minmax(180px, 1fr)` statt der 280 px
|
||||
von `#liste`: Eine Spalte ist schmaler als die ganze Seite, und mit
|
||||
280 px bliebe in einer 376-px-Spalte eine Kachel je Reihe, auch wenn
|
||||
zwei hineinpassen. */
|
||||
.kanalspalte__inhalt[data-galerie="ja"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
.kanalspalte__leer { margin: 0; font-size: .82rem; }
|
||||
|
||||
/* =====================================================================
|
||||
DIE ZEITLEISTE
|
||||
|
||||
Sie steht ÜBER den Kanalknöpfen und sieht anders aus als sie: zwei
|
||||
Reihen, die gleich aussehen und Verschiedenes tun, sind die Sorte
|
||||
Doppeldeutigkeit, die am 18.09. auf „Regeln & Hilfe" schon einmal
|
||||
aufgefallen ist.
|
||||
===================================================================== */
|
||||
.filter__zeiten {
|
||||
display: flex; flex-wrap: wrap; gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.filter__zeit { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.filter__zeit[aria-pressed="true"] {
|
||||
border-color: var(--akzent);
|
||||
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
.filter__zeit:disabled { opacity: .42; cursor: default; }
|
||||
.filter__zeit-zahl {
|
||||
font-size: .72rem; font-variant-numeric: tabular-nums;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
.filter__zeit[aria-pressed="true"] .filter__zeit-zahl { color: inherit; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.kanalspalte { border: 1px solid CanvasText; border-top-width: 4px; }
|
||||
.filter__zeit[aria-pressed="true"] { border: 2px solid Highlight; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user