From a3f5f028f2d21783d719e36d26530fa195becc69 Mon Sep 17 00:00:00 2001 From: alientim Date: Sat, 22 Aug 2026 12:34:35 +0200 Subject: [PATCH] Responsives CSS ausgebaut: Handy (iPhone) und Tablet (iPad) sauber nutzbar Bestehendes eigenes Design-System beibehalten (kein Bootstrap-Framework eingebunden), stattdessen die vorhandenen Media Queries/Breakpoints (Sidebar kollabiert bereits ab 900px) um die fehlenden Faelle ergaenzt: - .table-wrap: overflow:hidden -> overflow-x:auto. Tabellen mit vielen Spalten (Geraete, Switche, Papierkorb, Benutzer, ...) haben auf schmalen Screens bisher entweder Spalten lautlos abgeschnitten oder die ganze Seite waagerecht aufgerissen -- jetzt scrollt NUR die Tabelle selbst (gleiches Prinzip wie Bootstraps .table-responsive). table.data-table bekommt zusaetzlich eine min-width als sinnvolle Scroll-Schwelle. - .settings-grid: minmax(340px, 1fr) -> minmax(min(340px, 100%), 1fr) -- ein nackter Pixel-Mindestwert erzwingt auf einem 375px-iPhone sonst waagerechten Overflow der ganzen Seite, sobald die Spalte breiter als der verfuegbare Platz ist. Neue Modifier-Klasse .settings-grid--wide (420px-Variante) ersetzt zwei betroffene inline style="grid-template-columns:minmax(420px,...)"-Overrides (LDAP-, NGINX-Seite), die denselben 100%-Fallback nicht hatten. - .permission-group-col: eigenes overflow-x:auto zusaetzlich zum bestehenden flex-wrap der Elternzeile -- falls eine einzelne Rechte-Spalte (z.B. Geraete mit R/W/E/D) auch nach dem Umbruch auf eine eigene Zeile noch zu breit ist. - Ab 900px (bestehender Sidebar-Breakpoint) zusaetzlich: .flex (generische Button-/Toolbar-Zeilen), .section-head, .term-toolbar/.log-toolbar und .detail-row brechen um statt seitlich ueberzulaufen; .modal-footer ebenso; .search-input in Tabellen-Toolbars schrumpft flexibel. - Ab 640px: nebeneinander angeordnete Formularfelder (z.B. HTTP-/HTTPS- Port bei NGINX) stapeln sich auf volle Breite statt zwei sehr schmale Eingaben zu erzwingen; Modal-Innenabstand etwas schmaler. - Ab 560px: Buttons in Kopfzeilen (section-head) nehmen die volle Breite ein statt als schmaler Block rechts zu kleben. Live auf Testsystem-Update-Restart verifiziert: alle Kernseiten (Dashboard, Clients, Switche, Gruppen, LDAP, NGINX, Live-Log, Wartung) laden weiterhin fehlerfrei (200) nach dem CSS-/Template-Austausch. WICHTIGER HINWEIS: In dieser Umgebung steht kein Browser-Screenshot- Werkzeug zur Verfuegung, die Aenderungen wurden also nicht pixelgenau auf echten iPhone-16-Pro-/iPad-Bildschirmgroessen gegengeprueft, sondern rein ueber CSS-Analyse und Seiten-Ladetests. Ein Blick auf einem echten Geraet (oder per Browser-Devtools-Emulation) wird empfohlen. VERSION 1.0.8 -> 1.0.9. Co-Authored-By: Claude Sonnet 5 --- srv/tesm/VERSION | 2 +- srv/tesm/static/css/style.css | 61 ++++++++++++++++++++++++-- srv/tesm/templates/settings_ldap.html | 2 +- srv/tesm/templates/settings_nginx.html | 2 +- 4 files changed, 61 insertions(+), 6 deletions(-) diff --git a/srv/tesm/VERSION b/srv/tesm/VERSION index b0f3d96..66c4c22 100644 --- a/srv/tesm/VERSION +++ b/srv/tesm/VERSION @@ -1 +1 @@ -1.0.8 +1.0.9 diff --git a/srv/tesm/static/css/style.css b/srv/tesm/static/css/style.css index be39871..037a30a 100644 --- a/srv/tesm/static/css/style.css +++ b/srv/tesm/static/css/style.css @@ -197,13 +197,23 @@ button { font-family: inherit; } .nav-group.expanded .nav-group-children { display: flex; } .nav-group-children .nav-item { font-size: 13px; padding: 8px 12px; } -/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite) */ +/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite). minmax(min(..., + 100%), 1fr) statt eines nackten Pixelwerts -- eine Spalten-Mindestbreite + von z.B. 340px würde auf einem 375px-iPhone (abzüglich .content-Padding) + sonst waagerechten Overflow der ganzen Seite erzwingen, weil "auto-fit" + erst ab einer Breite größer als der Mindestwert umbricht. */ .settings-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; align-items: start; } +/* Modifier für Seiten, die etwas breitere Karten brauchen (z.B. NGINX, + LDAP) -- ersetzt frühere inline style="grid-template-columns:..." + Overrides, die denselben 100%-Fallback nicht hatten. */ +.settings-grid--wide { + grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); +} /* Navbar-Reihenfolge (Settings) */ .nav-order-list { @@ -683,8 +693,16 @@ button { font-family: inherit; } background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); - overflow: hidden; + /* overflow-x:auto statt hidden -- Tabellen mit vielen Spalten (Geräte, + Switche, Papierkorb, ...) würden auf Handy/Tablet sonst entweder die + ganze Seite waagerecht aufreißen oder (mit overflow:hidden) Spalten + einfach lautlos abschneiden. Scrollt jetzt NUR die Tabelle selbst, + der Rest der Seite bleibt an Ort und Stelle -- dasselbe Muster wie + Bootstraps .table-responsive. */ + overflow-x: auto; + overflow-y: hidden; } +.table-wrap table.data-table { min-width: 560px; } .table-toolbar { display: flex; @@ -1156,8 +1174,14 @@ select { Logs mit nur R). Feste/zu schmale Breiten haben die D-Spalte bei Geräte zuvor lautlos in den Overflow geschoben. */ flex: 0 0 auto; + max-width: 100%; padding-right: 28px; border-right: 1px solid var(--border-soft); + /* Fällt eine einzelne Spalte (z.B. Geräte mit vielen Rechten-Spalten) + trotz .permission-groups-row's flex-wrap auf einem schmalen Screen + für sich genommen noch zu breit aus, scrollt nur diese eine Spalte + waagerecht statt die Seite aufzureißen. */ + overflow-x: auto; } .permission-group-col:last-child { border-right: none; padding-right: 0; } .permission-group-header-cell { padding-left: 0 !important; } @@ -1286,14 +1310,45 @@ select { .content { padding: 18px 16px 40px; } .topbar { padding: 10px 16px; } .topbar-logo { opacity: 0.5; } + + /* Ab hier iPad-Breite (900px ist bereits der bestehende Sidebar- + Umschaltpunkt) und schmaler: generische Button-/Toolbar-Zeilen + (.flex) sollen umbrechen statt seitlich überzulaufen -- betrifft vor + allem Kopfzeilen mit mehreren Aktions-Buttons (z.B. NGINX-, Logs-, + Verlauf-Seite) und nebeneinander angeordnete Formularfelder. */ + .flex { flex-wrap: wrap; } + .section-head { flex-wrap: wrap; } + .term-toolbar, .log-toolbar { flex-wrap: wrap; row-gap: 8px; } + .detail-row { flex-wrap: wrap; } + .detail-row .v { text-align: left; } + + /* Modal-Fußzeilen (Speichern/Abbrechen) und Tabellen-Kopfzeilen + (Suche + Aktion) sollen bei wenig Platz ebenfalls umbrechen statt + Buttons/Suchfeld ineinanderzuschieben. */ + .modal-footer { flex-wrap: wrap; } + .table-toolbar .search-input { min-width: 0; flex: 1 1 160px; } } @media (max-width: 640px) { .topbar-logo { display: none; } + + /* Formulare mit zwei nebeneinander angeordneten Feldern (class="flex + gap-2" um zwei .field-Divs, z.B. HTTP-/HTTPS-Port bei NGINX) stapeln + auf Handy-Breite volle Breite pro Feld statt zwei sehr schmale + Eingaben nebeneinander zu erzwingen. */ + form .flex > .field { flex-basis: 100%; } + + .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; } } @media (max-width: 560px) { .device-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .topbar-title { font-size: 16px; } .stat-row { grid-template-columns: repeat(2, 1fr); } + + /* Button-Leisten in Kopfzeilen (z.B. section-head/card-Kopf mit + "RAW anzeigen" o.ä.) nehmen auf sehr schmalen Screens die volle + Breite ein statt als schmaler Block rechts zu kleben. */ + .section-head > .btn, + .section-head > .btn-sm { flex: 1 1 100%; } } diff --git a/srv/tesm/templates/settings_ldap.html b/srv/tesm/templates/settings_ldap.html index 5d30122..87b249f 100644 --- a/srv/tesm/templates/settings_ldap.html +++ b/srv/tesm/templates/settings_ldap.html @@ -5,7 +5,7 @@ {% block page_sub %}
Anmeldung mit dem Domänen-Passwort, zusätzlich zu lokalen Konten
{% endblock %} {% block content %} -
+
diff --git a/srv/tesm/templates/settings_nginx.html b/srv/tesm/templates/settings_nginx.html index 2fb70a1..217c114 100644 --- a/srv/tesm/templates/settings_nginx.html +++ b/srv/tesm/templates/settings_nginx.html @@ -5,7 +5,7 @@ {% block page_sub %}
Reverse-Proxy: Domain, Ports, SSL/HSTS und Zertifikat
{% endblock %} {% block content %} -
+