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 <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
{% block page_sub %}<div class="topbar-sub">Anmeldung mit dem Domänen-Passwort, zusätzlich zu lokalen Konten</div>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
|
||||
<div class="settings-grid settings-grid--wide">
|
||||
|
||||
<div class="card card-pad">
|
||||
<div class="section-head" style="margin-bottom:16px;">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% block page_sub %}<div class="topbar-sub">Reverse-Proxy: Domain, Ports, SSL/HSTS und Zertifikat</div>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
|
||||
<div class="settings-grid settings-grid--wide">
|
||||
|
||||
<div class="card card-pad">
|
||||
<div class="section-head" style="margin-bottom:16px;">
|
||||
|
||||
Reference in New Issue
Block a user