From d18c55eef55b6ab1e93ba5eac82f37e89efb6a34 Mon Sep 17 00:00:00 2001 From: Clemens Creutzburg Date: Wed, 22 Jul 2026 11:51:14 +0200 Subject: [PATCH] Formular-Abstaende korrigiert und Anleitungsseite ergaenzt Abstaende: Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar keinen, und die Formular-Grids nutzen keinen vertikalen Gutter (gtr-uniform). Dadurch war der Abstand vom Feld zum naechsten Label 0, waehrend Label zu eigenem Feld 1em betrug - das Label wirkte, als gehoere es zum Feld darueber. Jetzt sitzt das Label eng an seinem eigenen Feld (0,5em) und die Felder haben 1,5em Abstand nach unten. Ausserdem stylt main.css die Typen number, date, datetime-local und file gar nicht; diese Felder erschienen als kleine native Kaestchen zwischen den sonst einheitlichen Feldern (z. B. "Listenfenster in Tagen" und "Zeilenhoehe im Ausdruck"). Sie bekommen jetzt dasselbe Aussehen wie die Textfelder. Die Anpassungen liegen in einer eigenen assets/css/app.css, damit main.css als Template-Datei unveraendert bleibt. Nebenbei: .hint-box.error war nirgends definiert, obwohl es die haeufigste Variante ist - Fehlermeldungen erschienen ungefaerbt wie neutrale Hinweise. In faq.php, hinweise.php, namenanpassen.php und stricheintragen.php standen
/

als Abstandsersatz hinter Labels und Feldern; mit den neuen Abstaenden waere daraus doppelter Leerraum geworden. Entfernt, das Layout kommt jetzt aus dem CSS. Anleitung: Neue Seite anleitung.php mit den wichtigsten Funktionen, gegliedert nach Zielgruppe. Die Abschnitte fuer Kassenwart bzw. Administration werden nur eingeblendet, wenn die Rolle sie auch nutzen kann - sonst stuenden dort Hinweise auf Menuepunkte, die es fuer den Nutzer nicht gibt. Verlinkt im Menue unter "Kaffeeliste" und im Smoke-Test abgedeckt. Geprueft: alle 12 Formularseiten rendern fehlerfrei, http-smoke 34/0, role-matrix 55/0, tenant-isolation 12/0, settings-flow 15/0. Co-Authored-By: Claude Opus 4.8 --- anleitung.php | 243 +++++++++++++++++++++++++++++++++++++++++ assets/css/app.css | 127 +++++++++++++++++++++ faq.php | 16 +-- footer.php | 1 + header.php | 1 + hinweise.php | 8 +- namenanpassen.php | 3 +- scripts/http-smoke.php | 14 +++ stricheintragen.php | 3 +- 9 files changed, 401 insertions(+), 15 deletions(-) create mode 100644 anleitung.php create mode 100644 assets/css/app.css diff --git a/anleitung.php b/anleitung.php new file mode 100644 index 0000000..e263dd4 --- /dev/null +++ b/anleitung.php @@ -0,0 +1,243 @@ + + + + + diff --git a/assets/css/app.css b/assets/css/app.css new file mode 100644 index 0000000..be25d5b --- /dev/null +++ b/assets/css/app.css @@ -0,0 +1,127 @@ +/* + * Anpassungen der Kaffeeliste gegenueber dem HTML5-UP-Template (main.css). + * Bewusst eine eigene Datei, damit main.css unveraendert bleibt und bei einem + * Template-Update nicht mit eigenen Aenderungen kollidiert. Wird in header.php + * NACH main.css geladen. + */ + +/* --------------------------------------------------------------------------- + * Formular-Abstaende + * + * Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar + * keinen. In einem Formular mit mehreren Feldern klebte das naechste Label + * dadurch direkt am Feld darueber und wirkte, als gehoere es zu diesem statt + * zum eigenen Feld. Jetzt gilt: Label eng am eigenen Feld, deutlicher Abstand + * zur naechsten Gruppe. + * ------------------------------------------------------------------------ */ +label { + margin-bottom: 0.5em; +} + +input[type="text"], +input[type="password"], +input[type="email"], +input[type="tel"], +input[type="search"], +input[type="url"], +input[type="number"], +input[type="date"], +input[type="datetime-local"], +input[type="file"], +select, +textarea { + margin-bottom: 1.5em; +} + +/* Achtung: hier bewusst KEIN ".row > * > :last-child { margin-bottom: 0 }". + In einer Grid-Spalte ist das Eingabefeld das letzte Kind - genau dessen + unterer Abstand erzeugt die Trennung zur naechsten Formularzeile. */ + +/* In Tabellen und nebeneinanderliegenden Bedienelementen wuerde der + zusaetzliche Abstand die Zeilen auseinanderziehen. */ +td label, +td input, +td select, +td textarea, +.form-inline label, +.form-inline input, +.form-inline select { + margin-bottom: 0; +} + +/* --------------------------------------------------------------------------- + * Zahlen-, Datums- und Dateifelder + * + * main.css stylt diese Typen nicht, sie erschienen deshalb als kleine native + * Kaestchen zwischen den sonst einheitlich gestalteten Feldern. Hier wird das + * Aussehen der Textfelder uebernommen. + * ------------------------------------------------------------------------ */ +input[type="number"], +input[type="date"], +input[type="datetime-local"] { + background: #ffffff; + border: solid 1px rgba(210, 215, 217, 0.75); + border-radius: 0.375em; + color: inherit; + display: block; + height: 2.75em; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; +} + +input[type="number"]:focus, +input[type="date"]:focus { + border-color: #38761d; + box-shadow: 0 0 0 1px #38761d; +} + +/* In Tabellen (Striche/Einzahlungen erfassen) bleiben die Zahlenfelder + kompakt, sonst sprengen sie die Spaltenbreite. */ +td input[type="number"] { + width: 100%; + min-width: 5em; +} + +input[type="file"] { + display: block; + width: 100%; +} + +/* --------------------------------------------------------------------------- + * Checkbox-Zeilen + * + * Checkbox und zugehoeriges Label stehen nebeneinander; ohne Ausgleich sitzt + * die Beschriftung nicht auf einer Linie mit den Feldern der Nachbarspalte. + * ------------------------------------------------------------------------ */ +input[type="checkbox"] + label, +input[type="radio"] + label { + margin-bottom: 1.5em; +} + +/* --------------------------------------------------------------------------- + * Hinweisboxen + * + * main.css definiert den Grundstil und die Varianten .info/.warning/.success, + * aber keine .error-Variante - obwohl sie in der App am haeufigsten verwendet + * wird. Ohne sie erscheinen Fehlermeldungen ungefaerbt wie neutrale Hinweise. + * Farbgebung analog zu den vorhandenen Varianten. + * ------------------------------------------------------------------------ */ +.hint-box.error { + background: #fdecea; + border-left: 5px solid #d32f2f; + color: #7f1d1d; +} + +/* Der Grundstil ist ein Flex-Container; Absaetze darin sollen unten keinen + zusaetzlichen Abstand erzeugen. */ +.hint-box > :last-child { + margin-bottom: 0; +} + +/* Mehrere Absaetze/Listen in einer Box sollen untereinander stehen statt + nebeneinander (Flex-Grundstil). */ +.hint-box { + flex-direction: column; +} diff --git a/faq.php b/faq.php index 0b54788..c56f892 100644 --- a/faq.php +++ b/faq.php @@ -105,10 +105,10 @@ if ($bearbeitenId !== null) { -
-

-
-

+ + + + Abbrechen @@ -139,10 +139,10 @@ if ($bearbeitenId !== null) {
-
-

-
-

+ + + +
diff --git a/footer.php b/footer.php index 5ce4522..d92ce64 100644 --- a/footer.php +++ b/footer.php @@ -23,6 +23,7 @@ $canUseVerwaltungGroup = $saasCanUseLedgerNav; Kaffeeliste diff --git a/header.php b/header.php index 30448bc..6c545d8 100644 --- a/header.php +++ b/header.php @@ -10,6 +10,7 @@ + -
-

-
-

+ + + + diff --git a/namenanpassen.php b/namenanpassen.php index 8476005..91fad5d 100644 --- a/namenanpassen.php +++ b/namenanpassen.php @@ -98,9 +98,8 @@ $fehler = null;
-
+ -

diff --git a/scripts/http-smoke.php b/scripts/http-smoke.php index 8ea9f03..ea4ec1b 100644 --- a/scripts/http-smoke.php +++ b/scripts/http-smoke.php @@ -118,6 +118,20 @@ $checks = [ 'auth' => true, 'contains' => ['FAQ - Kaffeeliste'], ], + [ + // Der Smoke-Login ist Owner, deshalb muessen auch die + // Verwaltungsabschnitte erscheinen. + 'label' => 'Anleitung', + 'path' => 'anleitung.php', + 'auth' => true, + 'contains' => [ + 'Anleitung', + 'Für alle Mitglieder', + 'Für Kassenwart und Verwaltung', + 'Für Administratoren', + 'Rollen im Überblick', + ], + ], [ 'label' => 'Login', 'path' => 'login.php', diff --git a/stricheintragen.php b/stricheintragen.php index 9db19b4..bea4064 100644 --- a/stricheintragen.php +++ b/stricheintragen.php @@ -141,8 +141,9 @@ $kostenproStrichAnzeige = number_format(($settings['mark_price_cents'] ?? 20) / noetig - das Feld ist ein Blockelement mit eigenem Abstand. echo " -
"; + "; echo ""; echo "