From 71b9fc09c171a807dccfe37fc965c8a2bfe3ae32 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 22:28:09 +0200 Subject: [PATCH] Anfrage-Detail: zentriertes Fenster statt seitlicher Leiste Rueckmeldung 22.08.2026 mit Bildschirmfoto: "ich will das nicht so ich will es viel viel viel besser und uebersichtlicher und schoener zentriert in der mitte." Berechtigt, und aus mehreren Gruenden. Eine seitlich eingeschobene Leiste ist fuer so viel Inhalt das falsche Format: * Der Blick springt beim Oeffnen nach rechts. * Die Liste dahinter bleibt halb sichtbar und lenkt ab. * Alles muss sich in eine schmale Spalte quetschen -- auf dem Bildschirmfoto stand "keine Angabe" dadurch achtmal untereinander, und die Abwesenheit von Information nahm mehr Platz ein als die Information selbst. Jetzt: mittig, 940px breit, zweispaltig ab Tablet. Der Blick bleibt, wo er ist, und zusammengehoerende Angaben stehen nebeneinander. Weitere Entscheidungen: * Mauerwerk-Umbruch (columns) statt Raster. Die Abschnitte sind unterschiedlich hoch; ein Raster haette grosse Luecken gerissen. * Jeder Abschnitt bekommt eine eigene Flaeche statt nur einer Trennlinie. * Die Kopfzeile klebt beim Scrollen oben fest. Bei einer langen Anfrage weiss man sonst nach dem Scrollen nicht mehr, wessen Daten man liest. * "keine Angabe" wird kleiner und blasser dargestellt. Es ist die ABWESENHEIT einer Information und darf nicht aussehen wie eine. * Die Oeffnen-Animation skaliert dezent aus der Mitte statt von rechts hereinzufahren, und ist bei prefers-reduced-motion ganz aus. 9/9 Tests weiterhin gruen. Co-Authored-By: Claude Opus 5 --- webdesign/verwaltung.html | 73 +++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 6 deletions(-) diff --git a/webdesign/verwaltung.html b/webdesign/verwaltung.html index e5a7e23a..c406f115 100644 --- a/webdesign/verwaltung.html +++ b/webdesign/verwaltung.html @@ -142,14 +142,73 @@ .vw-detail { position: fixed; inset: 0; z-index: 100; display: none; } .vw-detail.vw-auf { display: block; } .vw-detail-schatten { position: absolute; inset: 0; background: rgba(2,4,8,.78); backdrop-filter: blur(3px); } + /* ---------- Detailansicht: zentriertes Fenster ---------- + Vorher eine seitlich eingeschobene Leiste. Fuer so viel Inhalt ist + das das falsche Format: Der Blick springt beim Oeffnen nach rechts, + die Liste dahinter bleibt halb sichtbar und lenkt ab, und alles muss + sich in eine schmale Spalte quetschen -- "keine Angabe" stand + dadurch achtmal untereinander. + + Jetzt mittig, breiter und zweispaltig. Der Blick bleibt, wo er ist, + und zusammengehoerende Angaben stehen nebeneinander statt + hintereinander. */ .vw-detail-blatt { - position: absolute; top: 0; right: 0; bottom: 0; - width: min(680px, 100%); - background: #080d16; border-left: 1px solid var(--wd-rand-stark); - overflow-y: auto; padding: 1.4rem clamp(1rem,3vw,1.8rem) 3rem; - animation: vw-rein .28s cubic-bezier(.22,1,.36,1) both; + position: absolute; + top: 50%; left: 50%; transform: translate(-50%, -50%); + width: min(940px, calc(100vw - 2rem)); + max-height: min(88vh, 900px); + background: linear-gradient(180deg, #0b1523, #070c15); + border: 1px solid var(--wd-rand-stark); + border-radius: 20px; + box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(127,208,232,.06) inset; + overflow-y: auto; + padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem); + animation: vw-rein .26s cubic-bezier(.22,1,.36,1) both; } - @keyframes vw-rein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } + @keyframes vw-rein { + from { transform: translate(-50%, -46%) scale(.97); opacity: 0; } + to { transform: translate(-50%, -50%) scale(1); opacity: 1; } + } + @media (prefers-reduced-motion: reduce) { + .vw-detail-blatt { animation: none; } + } + + /* Kopfzeile klebt oben fest — bei langen Anfragen weiss man sonst nach + dem Scrollen nicht mehr, wessen Daten man gerade liest. */ + .vw-detail-kopf { + position: sticky; top: calc(clamp(1.2rem, 3vw, 1.9rem) * -1); + margin: calc(clamp(1.2rem, 3vw, 1.9rem) * -1) calc(clamp(1rem, 3vw, 2rem) * -1) 1.2rem; + padding: 1.1rem clamp(1rem, 3vw, 2rem); + background: rgba(11, 21, 35, .96); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--wd-rand); + border-radius: 20px 20px 0 0; + z-index: 2; + } + + /* Zwei Spalten ab Tablet: die Abschnitte sind unterschiedlich hoch, + deshalb Mauerwerk statt Raster — sonst entstehen grosse Luecken. */ + @media (min-width: 780px) { + .vw-detail-spalten { columns: 2; column-gap: 1.4rem; } + .vw-detail-spalten > .vw-abschnitt { + break-inside: avoid; -webkit-column-break-inside: avoid; + display: inline-block; width: 100%; + } + } + + /* Jeder Abschnitt wird eine eigene Flaeche statt nur einer Linie. */ + .vw-detail-spalten > .vw-abschnitt { + padding: .95rem 1.1rem 1rem; + border-radius: 14px; + background: rgba(16, 26, 41, .5); + border: 1px solid var(--wd-rand); + margin-bottom: 1.1rem; + } + .vw-detail-spalten > .vw-abschnitt > h3 { border-bottom: none; padding-bottom: 0; margin-bottom: .7rem; } + + /* "keine Angabe" tritt zurueck: Es ist die Abwesenheit einer Information + und darf nicht so aussehen wie eine. */ + .vw-paar dd.vw-leer { font-size: .88rem; opacity: .55; } @media (prefers-reduced-motion: reduce) { .vw-detail-blatt { animation: none; } } .vw-detail-kopf { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; } .vw-zu { @@ -757,6 +816,7 @@ '' + s(STATUS_TEXT[a.status] || a.status) + "" + '' + "" + + '
' + '

Kontakt

' + paar("E-Mail", a.email) + @@ -842,6 +902,7 @@ '

Archivieren löscht nichts — die Anfrage bleibt vollständig erhalten und lässt sich jederzeit zurückholen.

' + '" + + "
" + "
"; blatt.querySelector(".vw-zu").addEventListener("click", schliesseDetail);