Community: Starthilfe beim Schreiben -- und vier Funde aus den Bildern

Filipe: "perfektioniere jede einzelne kategorie der community ... ich
will auch dass du fertige und beispiele machst fuer die community
damit die auch start hilfe haben ueberall."

STARTHILFE: Wer zum ersten Mal schreibt, steht vor einem leeren Feld
-- der haeufigste Grund, warum ein Brett still bleibt, obwohl viele
mitlesen. Im Formular stehen jetzt Beispiele: ein Klick fuellt Art,
Ueberschrift und Text. Auf treff, wunsch, highlight und mitmachen --
nicht auf anschlag, ansteht, regeln, denn dort schreibt die Community
nicht, und ein Angebot fuer eine verschlossene Tuer ist keins.

JEDE VORLAGE HAT LUECKEN. Eine, die man absenden KANN, wird
abgesendet; dann steht dort zehnmal derselbe Satz, und der elfte
Mensch merkt, dass hier niemand wirklich schreibt. Die Pruefung misst
das: keine Vorlage ohne "…".

NICHT ZU VERWECHSELN MIT DEM STARTKATALOG. Der ist fuers Team (fertige
Beitraege zum Uebernehmen), das hier fuer die Mitglieder.

--- Vier Funde, drei davon nur aus dem Bild -------------------------

1. ZWEI KNOPFREIHEN MIT DENSELBEN WOERTERN. Auf "Regeln & Hilfe"
   standen "Regel · Haeufige Frage · Hilfe · Was passiert, wenn"
   zweimal untereinander -- die eine filterte, die andere sprang zur
   Ueberschrift, und beide sahen gleich aus. Wo nach Art gegliedert
   wird, entfaellt jetzt der Filter; die Sprungmarken sind Links
   geworden, mit "Springe zu" davor und der Anzahl dahinter.

2. "MELDEN" UNTER JEDER REGEL. Siebzehn Melden-Knoepfe unter Texten
   des Teams -- man meldet keine Regel. Steht jetzt nur noch an
   Beitraegen von Mitgliedern. Die Gegenprobe im Messwerkzeug legt
   dafuer eigens einen Beitrag eines zweiten Mitglieds an: Ohne ihn
   saehe ein abgeschaffter Meldeweg genauso aus wie ein
   funktionierender.

3. DER HINWEIS LAG AUF DER NAECHSTEN BESCHRIFTUNG. Auf 412 px stand
   "Gehoert allen hier - wer Der Treff sieht ..." quer ueber
   "UEBERSCHRIFT". Der Hinweis haengt absolut unter dem Feld, und
   darunter sind 30 px Luft -- genug fuer EINE Zeile. Unter 560 px
   steht ohnehin nur ein Feld je Zeile; dort gibt es nichts
   auszurichten, und er darf einfach im Fluss stehen.

4. UND MEIN EIGENER FEHLER, der alles unsichtbar machte: `vorlagen`
   gab es hier schon -- als Checkliste fuer Creator, mit demselben
   Behaelter `#vorlagen`. Die spaetere Funktionsdeklaration gewinnt,
   zwei Elemente trugen dieselbe Kennung, und die Starthilfe erschien
   NIE. Keine Fehlermeldung, keine rote Pruefung, nichts in der
   Konsole. Gefunden nur durch einen Blick auf das Bild.
   Deshalb prueft pruef-vorlagen jetzt im Browser mit, dass keine
   Kennung doppelt vorkommt -- derselbe Fehler wie am 17.09. mit
   `.teilen`, und beim naechsten Mal soll ihn nicht der Zufall finden.

Nebenbei messbar: "Regeln & Hilfe" ist von 4569 auf 3623 px
geschrumpft, die Karten sind 54 px niedriger.

Geprueft: pruef-vorlagen (neu, 24), pruef-video unveraendert 67.
Gegenproben: unbekannte Art -> rot; Vorlage ohne Luecke -> rot.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-18 19:00:43 +02:00
co-authored by Claude Opus 5
parent d4e05e460a
commit 11c4a795e2
40 changed files with 1077 additions and 574 deletions
+25
View File
@@ -112,6 +112,31 @@
@media (max-width: 560px) {
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
}
/* DER HINWEIS GEHOERT AUF DEM HANDY WIEDER IN DEN FLUSS (18.09.2026).
Er haengt sonst absolut unter dem Feld, und darunter stehen genau
30 px Luft (row-gap). Das reicht fuer EINE Zeile. Der Satz bei „Gilt
fuer" -- „Gehoert allen hier - wer Der Treff sieht, sieht auch
diesen Eintrag." -- braucht auf 412 px ZWEI, und lag damit quer
ueber der naechsten Beschriftung. Im Bildschirmfoto stand
„UEBERSCHRIFT" halb unter dem Hinweis; gemeldet hat das keine Zahl.
Die ganze absolute Konstruktion gibt es nur, damit die Eingaben
MEHRERER Felder nebeneinander auf einer Linie sitzen. Unter 560 px
steht ohnehin nur eins je Zeile -- dort gibt es nichts auszurichten,
und der Hinweis darf einfach dort stehen, wo er hingehoert.
Das ist die bessere Antwort als „row-gap groesser machen": Die
naechste Zeile Text waere sonst wieder eine zu viel. */
@media (max-width: 560px) {
.neu__raster { row-gap: 16px; }
.neu__raster > * { grid-template-rows: auto auto; }
.neu__raster > * > .feld-hinweis {
position: static;
margin-top: 6px;
}
}
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.feld-schild {
+80 -9
View File
@@ -1065,20 +1065,51 @@
/* Die Sprungmarken — der Unterschied zwischen einem Dokument und einer
langen Seite. */
/* WARUM DAS HIER KEINE PILLEN MEHR SIND (18.09.2026).
Sie sahen aus wie die Filterknöpfe darüber: gleiche Form, gleiche
Größe, gleiche Wörter. Auf „Regeln & Hilfe" standen damit zwei
identisch wirkende Reihen untereinander, von denen die eine filterte
und die andere sprang. Niemand kann das erraten.
Jetzt sind es Links, und sie sehen aus wie Links: unterstrichen,
ohne Rahmen, mit „Springe zu" davor und der Anzahl dahinter. Die
Filterreihe entfällt auf diesen Brettern ganz. */
.brettmarken {
display: flex; flex-wrap: wrap; gap: 6px;
display: flex; flex-wrap: wrap; gap: 4px 14px;
align-items: baseline;
margin: 0 0 18px; padding-bottom: 14px;
border-bottom: 1px solid var(--rand);
}
.brettmarken__weg {
padding: 5px 12px; border-radius: 999px;
font-size: .8rem; font-weight: 600; text-decoration: none;
color: var(--text-leise);
border: 1px solid var(--rand-hell);
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
.brettmarken__wort {
font-size: .78rem;
color: var(--text-still);
margin-inline-end: 2px;
}
.brettmarken__weg:hover {
color: var(--text); background: rgba(255, 255, 255, .04);
.brettmarken__weg {
display: inline-flex; align-items: baseline; gap: 5px;
font-size: .84rem; font-weight: 600;
color: var(--text-leise);
text-decoration: underline;
text-decoration-color: var(--rand-hell);
text-underline-offset: 3px;
/* Die Fläche zum Tippen bleibt groß genug, obwohl nichts umrandet
ist -- sonst trifft man auf dem Handy den Nachbarn. */
padding: 6px 2px;
transition: color var(--tempo), text-decoration-color var(--tempo);
}
.brettmarken__weg:hover,
.brettmarken__weg:focus-visible {
color: var(--text);
text-decoration-color: currentColor;
}
/* Die Anzahl sagt, ob sich der Sprung lohnt -- und dass hier nicht
gefiltert wird. */
.brettmarken__zahl {
font-size: .72rem; font-weight: 700;
color: var(--text-still);
padding: 1px 6px; border-radius: 999px;
background: rgba(255, 255, 255, .06);
}
/* Die Abschnittsüberschrift. scroll-margin, damit die Überschrift beim
@@ -1433,3 +1464,43 @@
color: #9fb3c9;
font-size: .84rem;
}
/* ---- STARTHILFE BEIM SCHREIBEN (18.09.2026) -----------------------
Ein leeres Feld ist der häufigste Grund, warum ein Brett still
bleibt, obwohl viele mitlesen. Die Zeile steht ganz oben im
Formular — vor Art und Datum, weil sie beides mit ausfüllt.
Gedämpft gehalten: Es ist ein Angebot, keine Aufforderung. Wer weiß,
was er schreiben will, soll daran vorbeilesen können. */
.starthilfe {
margin: 0 0 16px;
padding: 12px 14px;
border: 1px dashed var(--rand-hell);
border-radius: 10px;
background: rgba(255, 255, 255, .02);
}
.starthilfe__wort {
margin: 0 0 9px;
font-size: .84rem;
color: var(--text-leise);
}
.starthilfe__reihe {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.starthilfe__beispiel {
min-height: 38px;
padding: 7px 13px;
border: 1px solid var(--rand-hell);
border-radius: 999px;
background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
color: var(--text);
font: inherit;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: border-color var(--tempo), background var(--tempo);
}
.starthilfe__beispiel:hover { border-color: var(--akzent); }
.starthilfe__beispiel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }