Keine Liste ohne Ende -- und die vierte Spalte sagt, was zu tun ist
Filipe: "der ohne account ist total sinnlos, mach was anderes draus.
und mach die ganze seite noch viel uebersichtlicher und ohne so dass
es extrem lange listen gibt mit der zeit."
ZWEI SACHEN, UND BEIDE FANGEN MIT NACHSEHEN AN.
--- 1. Was liegt eigentlich in "Ohne Account"? ---
Nachgezaehlt in den echten Daten:
2 x clip <- eine Luecke: ein Clip kommt IMMER von einem Kanal
1 x moment
1 x fanart <- gehoert zu Recht zu keinem Account
Die Spalte mischte also zwei Dinge, die nichts miteinander zu tun
haben: etwas, das einsortiert gehoert, und etwas, das dort richtig
liegt. Und sie hiess nach dem, was FEHLT. Wer die Zahl sah, wusste
nicht, ob er etwas tun muss -- genau das macht sie "sinnlos".
Jetzt entscheidet der Inhalt ueber Namen und Satz:
Clips dabei -> "Noch einzusortieren" + "2 Clips hier haben keinen
Account. Öffne sie und trag ihn nach."
nur Bilder -> "Ohne TikTok-Quelle" + "Eigene Bilder und Fanart
gehören zu keinem Account. Hier ist nichts zu tun."
NICHT IN ZWEI SPALTEN GETRENNT: Das waere eine mehr, und Filipe hat
im selben Satz um weniger gebeten.
--- 2. "mit der zeit" ist der Kern ---
Heute liegen neun Highlights da und alles passt. In einem Jahr sind es
dreihundert, und dann ist jede Spalte eine Rolle ohne Ende. Der Fehler
faellt erst auf, wenn er schon laestig ist -- deshalb jetzt.
Je Abschnitt zwoelf, der Rest auf einen Druck. Zwoelf, weil zwei
nebeneinander passen: sechs Reihen, genug um zu sehen was zuletzt war,
ohne bis zum Anfang der Zeit zu scrollen.
AN EINER STELLE FUER ALLE DREI FORMEN. Die Seite legt Karten an drei
Stellen in einen Kasten -- Kanalspalten, Abschnitte nach Art,
Zeitstrahl. Dreimal dasselbe hinzuschreiben hiesse, dass beim
naechsten Umbau zwei nachgezogen werden und eine vergessen wird.
ES VERSCHWINDET NICHTS, und die Zahlen in den Koepfen zaehlen weiter
ALLE: Eine Ueberschrift, die 12 sagt und 30 meint, waere schlimmer als
eine lange Liste. Gemessen mit 30 Eintraegen: Kopf zeigt 30, Spalte
zeigt 12, Knopf bietet "18 ältere zeigen", nach dem Druck sind alle 30
da und der Knopf ist weg -- er haette nichts mehr zu tun.
Sortiert ist ohnehin nach Datum absteigend, "die ersten zwoelf" sind
also die neuesten zwoelf und nicht die erstbesten.
Gemessen: 8 Messungen mit dem Datenbestand "ein Jahr spaeter",
0 Befunde. pruef-css-klassen und pruef-highlights in Ordnung.
NICHT VON MIR, mit Gegenprobe belegt: pruef-galerie meldet "mit
mehreren Spalten (1)" -- auch mit zurueckgenommener Aenderung. Eine
Altlast, die nachgezogen gehoert.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -2051,3 +2051,48 @@ body[data-ton] .kopf-zeile::before {
|
||||
[data-bereich="anschlag"] .eintrag-karte { border-left: 3px solid CanvasText; }
|
||||
.anschlag-alt__kopf::after { background: CanvasText; }
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
NICHT ALLES AUF EINMAL (23.09.2026)
|
||||
=====================================================================
|
||||
|
||||
Filipe: "ohne so dass es extrem lange listen gibt mit der zeit."
|
||||
|
||||
Der Knopf steht am Ende eines Abschnitts und sagt, wie viele noch
|
||||
kommen. Er sieht bewusst NICHT aus wie eine Karte: Er ist die
|
||||
Fortsetzung der Liste, kein weiterer Eintrag darin -- wer ihn fuer
|
||||
eine Karte haelt, tippt ihn versehentlich an.
|
||||
|
||||
Ueber die ganze Breite, damit er in einer Galerie mit zwei Spalten
|
||||
nicht als halbe Kachel danebensteht. */
|
||||
.mehr-zeigen {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
padding: 11px 14px;
|
||||
font: inherit; font-size: .84rem;
|
||||
color: var(--text-leise, #9fb3c8);
|
||||
text-align: center; cursor: pointer;
|
||||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||||
border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
|
||||
border-radius: 10px;
|
||||
transition: border-color .16s ease, color .16s ease;
|
||||
}
|
||||
.mehr-zeigen:hover, .mehr-zeigen:focus-visible {
|
||||
color: var(--text);
|
||||
border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mehr-zeigen { transition: none; }
|
||||
}
|
||||
|
||||
/* Der Satz an einer Spalte, die sagt, was zu tun ist -- siehe
|
||||
"Noch einzusortieren" in bereich.js. Leise, aber lesbar: Er ist eine
|
||||
Anleitung, keine Warnung. */
|
||||
.kanalspalte__satz {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0 0 10px;
|
||||
font-size: .82rem; line-height: 1.5;
|
||||
color: var(--text-leise, #9fb3c8);
|
||||
}
|
||||
|
||||
+102
-17
@@ -2049,6 +2049,61 @@
|
||||
}
|
||||
const karten = new Map();
|
||||
|
||||
/* ==== NICHT ALLES AUF EINMAL (23.09.2026) =====================
|
||||
|
||||
Filipe: "mach die ganze seite noch viel uebersichtlicher und
|
||||
ohne so dass es extrem lange listen gibt mit der zeit."
|
||||
|
||||
Das "mit der zeit" ist der Kern. Heute liegen neun Highlights
|
||||
da und alles passt; in einem Jahr sind es dreihundert, und
|
||||
dann ist jede Spalte eine Rolle ohne Ende. Der Fehler faellt
|
||||
erst auf, wenn er schon laestig ist.
|
||||
|
||||
AN EINER STELLE FUER ALLE DREI FORMEN. Die Seite legt Karten
|
||||
an drei Stellen in einen Kasten -- Kanalspalten, Abschnitte
|
||||
nach Art, Zeitstrahl. Dreimal dasselbe hinzuschreiben hiesse,
|
||||
dass beim naechsten Umbau zwei davon nachgezogen werden und
|
||||
eine vergessen wird.
|
||||
|
||||
ZWOELF, WEIL ZWEI NEBENEINANDER PASSEN: sechs Reihen, genug um
|
||||
zu sehen was zuletzt los war, ohne bis zum Anfang der Zeit zu
|
||||
scrollen. Eine Zahl ist hier unvermeidlich; sie steht deshalb
|
||||
EINMAL da und traegt ihren Grund.
|
||||
|
||||
ES VERSCHWINDET NICHTS. Der Knopf sagt, wie viele noch kommen,
|
||||
und holt sie auf einen Druck. Die Zahlen in den Koepfen zaehlen
|
||||
weiter ALLE -- sonst stimmten sie nicht mehr mit dem ueberein,
|
||||
was der Abschnitt enthaelt.
|
||||
|
||||
SORTIERT IST SCHON: Der Server liefert nach Datum absteigend
|
||||
(e.datum DESC, e.id DESC). "Die ersten zwoelf" sind also die
|
||||
neuesten zwoelf, nicht die erstbesten. */
|
||||
const AUF_EINMAL = 12;
|
||||
function kartenLegen(kasten, fach) {
|
||||
for (const e of fach.slice(0, AUF_EINMAL)) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.append(k);
|
||||
}
|
||||
const rest = fach.slice(AUF_EINMAL);
|
||||
if (!rest.length) return;
|
||||
const mehr = el('button', 'mehr-zeigen',
|
||||
rest.length === 1 ? 'Einen älteren zeigen'
|
||||
: rest.length + ' ältere zeigen');
|
||||
mehr.type = 'button';
|
||||
mehr.addEventListener('click', () => {
|
||||
for (const e of rest) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.insertBefore(k, mehr);
|
||||
}
|
||||
/* Der Knopf hat seine Arbeit getan. Stehen zu lassen hiesse,
|
||||
einen anzubieten, der nichts mehr tut. */
|
||||
mehr.remove();
|
||||
});
|
||||
kasten.append(mehr);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DIE HIGHLIGHTS: DREI KANAELE NEBENEINANDER (20.09.2026)
|
||||
|
||||
@@ -2094,7 +2149,7 @@
|
||||
}
|
||||
|
||||
const spalten = el('div', 'kanalspalten');
|
||||
const bauen = (schluessel, name, handle, fach) => {
|
||||
const bauen = (schluessel, name, handle, fach, satz) => {
|
||||
const sp = el('section', 'kanalspalte');
|
||||
sp.dataset.kanal = schluessel || 'ohne';
|
||||
const kopf = el('button', 'kanalspalte__kopf');
|
||||
@@ -2107,6 +2162,12 @@
|
||||
sp.append(kopf);
|
||||
|
||||
const kasten = el('div', 'kanalspalte__inhalt');
|
||||
/* EIN SATZ, DER SAGT, WAS ZU TUN IST. Nur wo es etwas zu tun
|
||||
gibt -- eine Erklaerung an jeder Spalte waere Fuellwerk. */
|
||||
if (satz) {
|
||||
const hinweis = el('p', 'kanalspalte__satz', satz);
|
||||
kasten.append(hinweis);
|
||||
}
|
||||
/* Die Galerie-Form kommt hierher -- in der Spalte, nicht um
|
||||
sie herum. In einer schmalen Spalte ergibt das eine Kachel
|
||||
je Reihe, bei viel Platz zwei. Gerechnet wird nichts. */
|
||||
@@ -2119,18 +2180,50 @@
|
||||
? `Für ${ZEIT_WORT[zeitFilter].toLowerCase()} steht hier nichts.`
|
||||
: 'Hier steht noch nichts.'));
|
||||
}
|
||||
for (const e of fach) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.append(k);
|
||||
}
|
||||
kartenLegen(kasten, fach);
|
||||
sp.append(kasten);
|
||||
window.abschnittKlappbar?.(kopf, kasten, `highlight:kanal:${schluessel || 'ohne'}`);
|
||||
spalten.append(sp);
|
||||
};
|
||||
|
||||
for (const k of kanaele) bauen(k.wert, k.name, k.handle, faecher.get(k.wert) || []);
|
||||
if (ohne.length) bauen('', 'Ohne Account', null, ohne);
|
||||
|
||||
/* ==== DIE VIERTE SPALTE HEISST NACH IHREM INHALT (23.09.2026)
|
||||
|
||||
Filipe: "der ohne account ist total sinnlos, mach was
|
||||
anderes draus."
|
||||
|
||||
Er hat recht, und zwar aus zwei Gruenden. Erstens sagte der
|
||||
Name nur, was FEHLT -- nicht, was dort liegt und schon gar
|
||||
nicht, was zu tun ist. Zweitens lagen dort zwei
|
||||
verschiedene Sachen:
|
||||
|
||||
ein CLIP ohne Account ist eine Luecke. Clips kommen von
|
||||
einem Kanal; steht keiner dabei, wurde der Link nicht
|
||||
erkannt oder nicht mitgegeben. Das gehoert einsortiert.
|
||||
|
||||
ein BILD oder FANART ohne Account ist keine Luecke. Es
|
||||
gibt keinen TikTok-Beitrag dazu, und das ist in Ordnung.
|
||||
|
||||
Beides unter derselben Ueberschrift zu sammeln, heisst: Wer
|
||||
die Zahl sieht, weiss nicht, ob er etwas tun muss. Genau das
|
||||
macht sie "sinnlos".
|
||||
|
||||
Also entscheidet der Inhalt ueber Namen und Satz. Getrennt
|
||||
wird NICHT in zwei Spalten -- das waere eine mehr, und
|
||||
Filipe hat im selben Satz um weniger gebeten. */
|
||||
if (ohne.length) {
|
||||
const clips = ohne.filter((e) => e.art === 'clip').length;
|
||||
bauen('', clips ? 'Noch einzusortieren' : 'Ohne TikTok-Quelle', null, ohne,
|
||||
clips
|
||||
? (clips === 1
|
||||
? 'Ein Clip hier hat keinen Account. Öffne ihn und trag ihn nach – '
|
||||
+ 'dann steht er bei den anderen seines Kanals.'
|
||||
: `${clips} Clips hier haben keinen Account. Öffne sie und trag ihn `
|
||||
+ 'nach – dann stehen sie bei den anderen ihres Kanals.')
|
||||
: 'Eigene Bilder und Fanart gehören zu keinem TikTok-Account. '
|
||||
+ 'Hier ist nichts zu tun.');
|
||||
}
|
||||
|
||||
ziel.append(spalten);
|
||||
sprungZeigen(ziel, karten);
|
||||
@@ -2200,11 +2293,7 @@
|
||||
ziel.append(kopf2);
|
||||
|
||||
const kasten = el('div', 'brettabschnitt__inhalt');
|
||||
for (const e of fach) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.append(k);
|
||||
}
|
||||
kartenLegen(kasten, fach);
|
||||
ziel.append(kasten);
|
||||
/* Der Merker haengt am BRETT und an der Art -- sonst waere
|
||||
"Regel zugeklappt" auf allen Brettern gleichzeitig zu. */
|
||||
@@ -2246,11 +2335,7 @@
|
||||
if (window.klappPfeil) kopf.append(window.klappPfeil());
|
||||
ziel.append(kopf);
|
||||
const kasten = el('div', 'zeitstrahl__inhalt');
|
||||
for (const e of fach) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.append(k);
|
||||
}
|
||||
kartenLegen(kasten, fach);
|
||||
ziel.append(kasten);
|
||||
window.abschnittKlappbar?.(kopf, kasten, `ansteht:${r}`, r === 'vorbei');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user