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 %} -
+