/* =========================================================================== Raumverwaltung — views/admin/room.ejs --------------------------------------------------------------------------- Zwei Dinge stehen hier: die Reiterleiste (zehn Reiter statt sieben) und die Ordnerliste. Die Ordnerliste ist der eigentliche Grund für diese Datei. Vorher trug jede der 28 Zeilen fünf Formulare gleichzeitig — Eingabefeld, Freigabestufe, Datenstatus, zwei Verschiebepfeile, Löschen. Die Zeile war 93 Pixel hoch, zehn Ordner passten auf einen Bildschirm, und die Hierarchie war zwischen den Bedienelementen nicht mehr zu erkennen. Jetzt gilt dieselbe Vorgabe wie für die Anforderungsliste (public/style-irl.css): eine Zeile je Ordner, knappe Höhe, Bearbeiten erst auf Klick. Präfix „vwo-" für die Ordnerliste und „vw-" für alles Übrige. Kein Klassenname aus einer anderen Datei wird überschrieben — zwei Dateien, die sich um denselben Namen streiten, sind ein Ratespiel. Diese Datei wird in views/partials/head.ejs zuletzt geladen. Betreiber: IHC - Invest in Healthcare GmbH =========================================================================== */ /* ---------- Reiterleiste ---------- Zehn Reiter passen mit der allgemeinen Polsterung (11/18 px) erst ab rund 1600 px in eine Zeile. Hier stehen sie enger; unter 1100 px bricht die Leiste um, statt zu rollen — auf einem schmalen Fenster am Rechner ist eine verborgene Rollleiste nicht zu erkennen. */ .vw-tabs a { padding: 10px 12px; font-size: 14px; } @media (max-width: 1100px) { .vw-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; } .vw-tabs a { padding: 9px 10px; font-size: 13.5px; } } /* ---------- Dashboard ---------- */ .vw-dashkopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: -6px 0 14px; } .vw-dashkopf p { margin: 0; max-width: 62ch; } .vw-dashknoepfe { display: flex; flex-wrap: wrap; gap: 8px; } /* Zwischenüberschrift innerhalb einer Karte (z. B. Vertraulichkeitserklärung im Reiter „Sicherheit"). */ .vw-h3 { font-size: 14.5px; margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid var(--soft); } /* =========================================================================== Ordnerliste =========================================================================== */ .vwo-liste { /* Spaltenbreiten an genau einer Stelle. Summe = 100 %. Der Kopf ist ein Flexbereich, die Liste eine Tabelle mit table-layout: fixed — ohne gemeinsame Werte liefen beide auseinander. */ --vwo-name: 46%; --vwo-stufe: 15%; --vwo-inhalt: 15%; --vwo-status: 20%; --vwo-akt: 4%; padding: 14px 18px 10px; } .vwo-kopf h2 { margin: 0 0 2px; } .vwo-kopf p { margin: 0 0 8px; max-width: 78ch; } .vwo-spaltenkopf { display: flex; align-items: center; padding: 3px 0 4px; border-bottom: 1px solid var(--soft); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--slate); } .vwo-spaltenkopf > span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vwo-spaltenkopf .vwo-c-name { flex: 0 0 var(--vwo-name); } .vwo-spaltenkopf .vwo-c-stufe { flex: 0 0 var(--vwo-stufe); } .vwo-spaltenkopf .vwo-c-inhalt { flex: 0 0 var(--vwo-inhalt); } .vwo-spaltenkopf .vwo-c-status { flex: 0 0 var(--vwo-status); } .vwo-spaltenkopf .vwo-c-akt { flex: 0 0 var(--vwo-akt); } /* table-layout: fixed ist die Voraussetzung dafür, dass ein langer Ordnername die Spalte NICHT breiter macht, sondern gekürzt wird. Ohne sie bestimmte der längste Name die Breite und die Tabelle liefe über den rechten Rand. */ .vwo-tab { width: 100%; table-layout: fixed; border-collapse: collapse; } .vwo-tab td { padding: 0 6px; vertical-align: middle; } .vwo-tab .vwo-c-name { width: var(--vwo-name); } .vwo-tab .vwo-c-stufe { width: var(--vwo-stufe); } .vwo-tab .vwo-c-inhalt { width: var(--vwo-inhalt); color: var(--slate); } .vwo-tab .vwo-c-status { width: var(--vwo-status); } .vwo-tab .vwo-c-akt { width: var(--vwo-akt); text-align: right; } .vwo-zeile { border-top: 1px solid var(--bg); cursor: pointer; } .vwo-zeile > td { height: 24px; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vwo-zeile:hover { background: var(--bg); } .vwo-zeile.auf { background: #EEF2F7; } /* ---------- Hierarchie ---------- Sie muss ohne Nachdenken erkennbar sein: Oberordner tragen die dunkle Schrift und eine helle Fläche, Unterordner sind eingerückt und heller gesetzt. Die Einrückung selbst steht am Verweis (padding-left je Ebene), damit die ganze Trefferfläche mitwandert. */ .vwo-ober > td { background: #ECEEF3; } .vwo-ober:hover > td { background: #E3E6ED; } .vwo-ober.auf > td { background: #DDE4EE; } .vwo-ober .vwo-name { font-weight: 600; color: var(--navy); font-size: 13.5px; } .vwo-unter .vwo-name { color: var(--ink); } /* Der senkrechte Strich zeigt die Zugehörigkeit auch dann, wenn der Oberordner gerade über dem oberen Bildrand steht. */ .vwo-unter > .vwo-c-name { box-shadow: inset 12px 0 0 -11px var(--line); } .vwo-auf { display: flex; align-items: center; gap: 7px; min-width: 0; padding-top: 2px; padding-bottom: 2px; color: inherit; } .vwo-auf:hover { color: inherit; } .vwo-idx { flex: 0 0 auto; min-width: 2.4rem; color: var(--slate); font-size: 11.5px; font-variant-numeric: tabular-nums; } .vwo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vwo-en { flex: 0 1 auto; color: var(--slate); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; } .vwo-mark { flex: 0 0 auto; } .vwo-fest { cursor: pointer; } .vwo-c-stufe .badge, .vwo-c-status .vwo-st { font-size: 11.5px; } .vwo-st { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .vwo-st .fstat { margin-left: 0; } .vwo-stt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vwo-c-inhalt { font-size: 12.5px; } .vwo-chev { display: inline-flex; color: var(--line); transition: transform .15s; } .vwo-zeile.auf .vwo-chev { transform: rotate(90deg); color: var(--slate); } /* ---------- Die aufklappende Zeile ---------- Sie steht dort, wo der Ordner steht, und schiebt nur nach unten. Ein seitlicher Bereich hätte die Liste verdeckt — genau die Unruhe, die weg soll. */ .vwo-editzeile > td { padding: 0; background: #F7F9FC; border-top: 1px solid var(--soft); } .vwo-edit { padding: 10px 14px 12px; } .vwo-editkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13.5px; } .vwo-editkopf b { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; } .vwo-zu { flex: 0 0 auto; } .vwo-edit p { margin: 0 0 8px; } .vwo-editreihen { display: flex; flex-wrap: wrap; gap: 10px 26px; } .vwo-block { margin: 0; min-width: 0; } .vwo-blocktitel { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--slate); } .vwo-felder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* Ohne width: auto griffe die allgemeine Regel input/select { width: 100% } aus style.css und machte aus jedem Feld eine eigene Zeile. */ .vwo-felder input[type=text], .vwo-felder select { width: auto; min-width: 8.5rem; max-width: 100%; padding: 4px 8px; font-size: 13px; height: auto; } .vwo-felder .btn.small { padding: 4px 10px; font-size: 12.5px; } .vwo-knoepfe form { margin: 0; } .vwo-fuss { margin: 10px 6px 0; } /* ---------- Struktur einfügen ---------- */ .vwo-anpassen { padding: 14px 20px; margin-top: 14px; } .vwo-anpassen > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); width: fit-content; } .vwo-anpassen form { margin-top: 10px; } /* =========================================================================== Schmalere Bildschirme --------------------------------------------------------------------------- Fünf Spalten sind bei 390 px unlesbar. Ab 860 px wird aus jeder Zeile ein kleiner Block: Name oben, darunter Stufe, Inhalt und Status nebeneinander. Die Spaltenüberschrift entfällt — sie stünde über etwas, das nicht mehr in Spalten steht. =========================================================================== */ @media (max-width: 1200px) { .vwo-liste { --vwo-name: 40%; --vwo-stufe: 17%; --vwo-inhalt: 16%; --vwo-status: 22%; --vwo-akt: 5%; } } @media (max-width: 860px) { .vwo-spaltenkopf { display: none; } /* tr ist hier bewusst NICHT aufgeführt: „.vwo-tab tr" wäre spezifischer als „.vwo-zeile" und machte aus der Zeile wieder einen Block, noch bevor das Raster greift. */ .vwo-tab, .vwo-tab tbody, .vwo-tab td { display: block; width: auto; } .vwo-tab .vwo-editzeile { display: block; } /* Die Prozentbreiten müssen ausdrücklich zurückgenommen werden: die Spaltenregeln sind spezifischer als „td { width: auto }". */ .vwo-tab .vwo-c-name, .vwo-tab .vwo-c-stufe, .vwo-tab .vwo-c-inhalt, .vwo-tab .vwo-c-status, .vwo-tab .vwo-c-akt { width: auto; } .vwo-tab .vwo-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 4px; border-top: 1px solid var(--soft); } .vwo-zeile > td { height: auto; padding: 0; white-space: normal; overflow: visible; } .vwo-tab .vwo-c-name { grid-column: 1; grid-row: 1; } .vwo-tab .vwo-c-akt { grid-column: 2; grid-row: 1; justify-self: end; } .vwo-tab .vwo-c-stufe { grid-column: 1; grid-row: 2; } .vwo-tab .vwo-c-inhalt { grid-column: 1; grid-row: 3; } .vwo-tab .vwo-c-status { grid-column: 1; grid-row: 4; } /* Ordner ohne Datenstatus tragen in der Tabelle einen Gedankenstrich. Als eigene Zeile in einem Block wäre er nur Rauschen — hier entfällt er. */ .vwo-tab .vwo-c-status.vwo-ohne, .vwo-tab .vwo-c-status:empty { display: none; } .vwo-editzeile > td { padding: 0; } .vwo-editreihen { gap: 10px 16px; } .vwo-block { flex: 1 1 100%; } } @media (max-width: 560px) { .vwo-liste { padding: 12px 12px 8px; } .vwo-felder input[type=text], .vwo-felder select { width: 100%; min-width: 0; } .vwo-felder .btn.small { width: auto; } .vw-dashkopf { margin-bottom: 10px; } } /* =========================================================================== Reiter „Mitglieder": Zustand je Person und der erneute Versand --------------------------------------------------------------------------- Anlass: Der Betreiber sah in der Liste nicht, WARUM jemand nicht in den Datenraum kommt, und hatte keinen Weg, eine Einladung noch einmal zu verschicken. Beides steht jetzt in der Zeile. Die Liste führte bereits sieben Spalten. Eine achte für den Zustand hätte die Handlungen am rechten Rand aus dem sichtbaren Bereich gedrängt — schon bei 1440 px. Der Zustand steht deshalb UNTER der Adresse, und die beiden Handlungen stehen untereinander statt nebeneinander: Die Tabelle wächst dadurch in der Höhe, nicht in der Breite. Sie steckt weiterhin in .tablewrap; wird es doch eng, schiebt sich die TABELLE waagerecht und nicht die Seite — das gilt bis 390 px hinunter. =========================================================================== */ /* Adresse oben, Zustand darunter. */ .el-person { min-width: 210px; } .el-person > div + div { margin-top: 5px; } /* Die Marken brechen um, sobald die Spalte schmal wird. „nowrap" an der Zelle wäre falsch: Zwei bis drei Marken nebeneinander zögen die Spalte sonst über die halbe Tabellenbreite. */ .el-zustand { white-space: normal; line-height: 1.9; } .el-zustand .badge { margin: 0 4px 0 0; } /* Beide Handlungen untereinander, rechtsbündig. Ohne die Umstellung auf Block stünden die Formulare nebeneinander (ein
in einer Tabellenzelle folgt sonst dem Textfluss) und die Spalte wäre doppelt so breit. */ .el-aktionen { white-space: nowrap; } .el-aktionen form { display: block; margin: 0; } .el-aktionen form + form { margin-top: 5px; } .el-aktionen .btn { width: 100%; justify-content: center; } /* Symbol und Beschriftung im Knopf auf einer Grundlinie. */ .el-btn { display: inline-flex; align-items: center; gap: 6px; } .el-btn svg { flex: none; } /* Rückmeldung nach dem Absenden. Mehrere Sätze (etwa „war bereits Mitglied" und „Gruppe geändert") stehen als eigene Blöcke untereinander — in einer Zeile hintereinander liest sie niemand zu Ende. */ .el-meldung { margin: 0 0 14px; } .el-meldung span { display: block; } .el-meldung span + span { margin-top: 4px; } /* Unter 1400 px steht in der Zeile nur noch das Briefsymbol. Die Liste braucht bei voller Beschriftung rund 1170 px; auf einem Bildschirm mit 1280 px bleibt nach der Seitenleiste weniger übrig, und dann stünde ausgerechnet die neue Handlung außerhalb des sichtbaren Bereichs. Erkennbar bleibt sie über title und die Rückfrage vor dem Absenden (data-confirm). */ @media (max-width: 1400px) { .el-btn span { display: none; } .el-person { min-width: 190px; } } /* --------------------------------------------------------------------------- Benutzerverwaltung (views/admin/benutzer.ejs): Zustand und der Knopf „Erneut senden" je Person. Die Zellen führen jetzt beide mehr Inhalt als vorher — links bis zu vier Marken, rechts drei Handlungen untereinander. Ohne Mindestbreiten zerfielen sie in einbuchstabige Spalten; ohne Höchstbreite zöge die Zustandsspalte auf breiten Bildschirmen die Tabelle auseinander. Die Tabelle selbst bleibt waagerecht schiebbar (.nv-tablewrap), die Seite läuft also auch bei 390 px nicht über. --------------------------------------------------------------------------- */ .nv-users td.el-zustand { min-width: 190px; max-width: 260px; } .nv-users td.el-zustand .badge { margin: 0 4px 3px 0; } /* Drei Formulare untereinander, rechtsbündig. .el-aktionen bringt die Blockdarstellung bereits mit; hier steht nur, wie breit die Spalte werden darf, damit die Beschriftungen nicht mitten im Wort umbrechen. */ .nv-users td.nv-uactions { min-width: 150px; } /* --------------------------------------------------------------------------- Offene Einladungen in derselben Tabelle (views/admin/benutzer.ejs). Sie stehen unter den Personen und müssen auf den ersten Blick als etwas anderes zu erkennen sein — sonst liest jemand eine verschickte Einladung als bestehenden Zugang. Dafür genügen drei ruhige Mittel: eine Zwischenzeile mit Überschrift, ein leicht abgesetzter Untergrund und eine schmale Kante links. Farbe wird bewusst nicht eingesetzt: Rot heißt in dieser Anwendung „Achtung" (abweichende Regel, gesperrtes Konto), und eine offene Einladung ist kein Missstand, sondern ein Zwischenstand. --------------------------------------------------------------------------- */ .nv-users tr.nv-uinv-kopf td { padding-top: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .nv-users tr.nv-uinv-kopf b { font-size: 14px; color: var(--navy); margin-right: 8px; } .nv-users tr.nv-uinv-kopf .small { margin-top: 4px; max-width: 780px; } .nv-users tr.nv-uinv > td { background: var(--paper, #fafafa); } .nv-users tr.nv-uinv > td:first-child { box-shadow: inset 3px 0 0 var(--line); } /* Der Knopf zum Zurücknehmen steht unter den Angaben des Datenraums, nicht daneben: Neben den Marken bliebe er in einer schmalen Spalte ohne Platz und risse die Zeile auseinander. */ .nv-uinv-revoke { display: block; margin: 6px 0 0; } /* --------------------------------------------------------------------------- „Vorhandene Person aufnehmen" — das Häkchen für die Benachrichtigung. Es steht zwischen Gruppenauswahl und Knopf und braucht dort etwas Luft; ohne den Abstand klebt es an der Auswahlliste darüber. --------------------------------------------------------------------------- */ .mz-melden { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--navy); cursor: pointer; } .mz-melden input { margin: 0; } /* --------------------------------------------------------------------------- Personenauswahl beim Aufnehmen bestehender Personen (views/admin/room.ejs) Die Liste borgt sich Aufbau und Klassen der Analyse-Werkzeuge (anx-/an-), damit Auswahllisten in der ganzen Anwendung gleich aussehen. Zwei Regeln müssen hier trotzdem abweichen: 1. Eine ausgewählte Zeile ist dort ROT hinterlegt — in den Analyse-Werkzeugen heißt Rot „vom Werkzeug vorgeschlagen". Hier bedeutet die Markierung etwas anderes, nämlich „diese Person geht mit", und Rot liest sich dabei wie eine Warnung. Deshalb der ruhige Ton des Hauses. 2. Die erste Spalte trägt nur ein Kästchen und braucht keine Breite für eine Überschrift, die dann abgeschnitten dasteht. --------------------------------------------------------------------------- */ .mz-liste .anx-pos.an-gewaehlt, .mz-liste tr.an-gewaehlt { background: #E4EAF2; } .mz-liste tr.an-gewaehlt td { border-color: #C3D3E7; } .mz-liste .anx-spaltenkopf .anx-c-pick, .mz-liste .anx-tab .anx-c-pick { width: 34px; min-width: 34px; text-align: center; } .mz-liste .anx-spaltenkopf .anx-c-pick { font-size: 0; } /* Kästchenspalte braucht keine Beschriftung */ /* Die Rollenauswahl je Zeile bleibt schmal — sie steht vierzehnmal untereinander. */ .mz-liste .mz-rolle { max-width: 230px; margin: 0; } /* Kopfzeile der Auswahl: dieselbe Anordnung wie in den Werkzeugen, aber ohne den dortigen Abstand nach oben — hier steht sie unmittelbar unter der Beschriftung des Feldes. */ .mz-kopf { margin-top: 6px; } /* --------------------------------------------------------------------------- Mitnahme je Person (views/admin/room.ejs, Reiter „Teilnehmer") Zwei Rechte nebeneinander, und die Spaltenköpfe erklären sie. Die Erklärung steht IM Kopf und nicht als Fußnote: Wer den Haken setzt, soll im selben Blick lesen, was er damit herausgibt. --------------------------------------------------------------------------- */ .mn-alle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--soft); border-radius: var(--radius-sm); } .mn-alle-titel { font-size: 12.5px; color: var(--grey); margin-right: 4px; } .mn-alle form { margin: 0; } .mn-alle-hinweis { margin: 0 0 14px; } .mn-tabelle th { vertical-align: top; } .mn-tabelle th .mn-was { font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; max-width: 30ch; line-height: 1.45; } .mn-tabelle td { vertical-align: top; } .mn-hinweis { margin-top: 4px; max-width: 28ch; } /* Dieselbe Erläuterung steht seit Fassung 1.45.0 auch außerhalb der Mitgliedertabelle — in der Gruppenkarte. Deshalb allgemein und nicht mehr nur unter .mn-tabelle th. */ .mn-was { font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; max-width: 32ch; line-height: 1.45; } /* Der UMFANG der Ausfuhr („im Original, auch ohne die Stufe") ist kein zweites Recht neben der Ausfuhr, sondern deren Reichweite. Der eingerückte Strich sagt das, bevor irgendein Text gelesen wird: Was hier steht, hängt an dem Kästchen darüber. Bewusst in --soft und nicht in --red — Rot ist im Haus der Warnung vorbehalten, und dies ist eine Freigabe, keine. */ .mn-unter { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--soft); } /* Die Erläuterung zum Umfang steht in der Kopfzeile unter der zur Ausfuhr. Der eingerückte Strich wiederholt dort, was in den Zeilen darunter die Einrückung sagt: Das eine hängt am anderen. */ .mn-was-unter { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--soft); }