/* Die interne Anwendung auf schmalen Fenstern und am Finger. =========================================================================== WARUM EINE EIGENE DATEI. Sie besteht ausschliesslich aus Medienabfragen und aendert am Desktop nichts. Haengt man die -Zeile in index.html aus, ist der alte Zustand exakt zurueck -- das ist der Pruefstein fuer jede Regel hier drin und der Grund, warum sie nicht in app.css steht. Die spaete Stelle im Kopf ist Absicht: app.css ist 2800 Zeilen lang, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Dieselbe Ueberlegung steht in termin.css:1365-1369, wo die schmalen Fassungen aus genau diesem Grund ans Ende der Datei gewandert sind. DREI ABFRAGEN, und jede beantwortet eine andere Frage: max-width: 900px Der Rahmen. Unterhalb passt ohnehin keine der breiten Ansichten mehr (.kundentabelle braucht 960px, .kalender-raster 900px) -- die zweispaltige Huelle schuetzt dort nichts mehr, sie nimmt nur Platz weg. Der Wert steht schon in app.css und termin.css; es kommt keine neue Zahl ins Haus. Jedes Desktop-Browserfenster liegt darueber. pointer: coarse Finger statt Maus. BEWUSST NICHT an einer Breite festgemacht: der iOS-Zoom beim Hineintippen schlaegt auch im Querformat zu, und dort meldet ein iPhone 844-932px. Genau daran scheitert die Regel auf den oeffentlichen Seiten heute (termin.css:966-975 haengt an 600px). Ein Desktop mit Maus bleibt unberuehrt, gleich wie schmal das Fenster ist. max-width: 600px Das Telefon. Hier wird aus der Kundentabelle eine Kartenliste. Derselbe Wert wie in termin.css -- die beiden Stylesheets sollen dieselbe Sprache sprechen. Die drei Aufgaben, fuer die das Telefon gedacht ist: die eigenen Termine sehen, die Kundenliste durchsuchen, Termine anlegen und aendern. Alles andere ist Pflegearbeit und bleibt am Schreibtisch. */ /* Nur fuer Vorleser sichtbar. Die Regel steht bisher nur in termin.css:889; die interne Anwendung brauchte sie nie, weil jeder Knopf seine Beschriftung trug. Der Menueknopf traegt ein Zeichen, also braucht er sie. Nicht an eine Breite gebunden -- deshalb ausserhalb der Abfragen. */ .nur-fuer-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Die drei Bauteile, die es nur in der schmalen Fassung gibt -- Menueknopf, Hintergrundflaeche und "Nur meine Spalte" -- stehen in app.css auf display:none und werden hier zugeschaltet. Die Vorgabe gehoert dorthin: sonst haenge das Aussehen des Desktops daran, dass diese Datei geladen wird. */ /* =========================================================================== Der Rahmen: aus der festen Seitenleiste wird eine Schublade =========================================================================== */ @media (max-width: 900px) { /* Die 256px der Seitenleiste (app.css:143) sind auf einem 375px-Telefon zwei Drittel des Bildschirms. Der Rahmen hat deshalb nur noch EINE Spalte, und die Seitenleiste liegt daneben, ausserhalb des Bildes. */ .rahmen { grid-template-columns: 1fr; } /* Hereingeschoben wird mit transform und nicht mit "left": das laeuft auf der Grafikkarte und zwingt den Browser nicht, bei jedem Bild das ganze Layout neu zu rechnen. Die Seitenleiste behaelt ihr height:100vh aus app.css:152. */ .seitenleiste { position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 60; transform: translateX(-100%); /* visibility nimmt die zugeklappte Schublade aus der Tabulatorreihenfolge. Nur verschoben bliebe sie erreichbar: der Fokus wanderte in eine Navigation, die niemand sieht. Der Wechsel auf hidden wartet, bis die Fahrt vorbei ist (Verzoegerung), der auf visible geschieht sofort -- sonst faehrt sie unsichtbar heraus. */ visibility: hidden; transition: transform var(--duration-fast-02) var(--ease-standard-productive), visibility 0s linear var(--duration-fast-02); } body.menue-offen .seitenleiste { transform: none; visibility: visible; transition: transform var(--duration-fast-02) var(--ease-standard-productive), visibility 0s; } /* Der Hintergrund liegt ueber dem Inhalt und unter der Schublade. Er ist zugleich die groesste Flaeche zum Schliessen -- wer die Schublade loswerden will, tippt irgendwohin daneben. */ .menue-hintergrund { display: block; position: fixed; inset: 0; background: var(--surface-overlay); z-index: 55; } /* Das display darueber schlaegt die Browserregel fuer [hidden] -- ohne diese Zeile laege der Hintergrund dauerhaft ueber der Seite und nichts waere mehr anklickbar. Dieselbe Falle steht schon bei .klappmenue (app.css:334-336). */ .menue-hintergrund[hidden] { display: none; } /* Der Knopf traegt kein Knopfkleid: er sitzt neben dem Seitentitel und soll wie ein Zeichen wirken, nicht wie eine Schaltflaeche. */ .menue-knopf { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ta-navy); border-color: transparent; padding: 0 var(--spacing-03); margin-left: calc(-1 * var(--spacing-03)); font-size: var(--type-05); line-height: 1; } .menue-knopf:hover { background: var(--surface-hover); } .kopf-links { display: flex; align-items: center; gap: var(--spacing-03); min-width: 0; } /* Titel, Sprachwahl, Aufgaben und Benachrichtigungen passen nicht in eine Zeile. Ohne den Umbruch schiebt die Kopfleiste die ganze Seite auf, und vom Titel bleibt ein Buchstabe. */ .kopfleiste { flex-wrap: wrap; gap: var(--spacing-03); padding: var(--spacing-03) var(--spacing-05); } .kopf-rechts { flex-wrap: wrap; } .inhalt { padding: var(--spacing-05); } /* Das Aufgabenmenue ist mit 400px (app.css:343) breiter als das Telefon. Es haengt rechts an seinem Knopf, also reicht eine Obergrenze. */ .aufgaben-menue { width: auto; min-width: 0; max-width: calc(100vw - 2 * var(--spacing-05)); } /* --- Kalender ---------------------------------------------------------- Die 900px des Rasters (app.css:1103) sind fuer dreizehn Personenspalten gedacht. Steht dort nur die eigene Spalte ("Nur meine Spalte", views/ kalender.js), erzwaengen sie weiter eine Bildlaufleiste, obwohl eine einzige Spalte da ist. Ohne die Untergrenze greift minmax(76px, 1fr) und die Spalte fuellt den Bildschirm. */ .kalender-raster { min-width: 0; } /* Die manuelle Vergabe hat drei Spalten, die Messetage: 46 + 3 x 76 = 274px. Das passt auf ein Telefon -- es scheiterte allein an den 520px in app.css:1106. */ .kalender-raster.raster-vergabe { min-width: 0; } .kalender-tabs { flex-wrap: wrap; } /* Am rechten Ende der Reiterzeile: er waehlt keinen Tag, er nimmt Spalten weg. */ .kalender-nurmeine { display: inline-flex; margin-left: auto; } } /* Wer Bewegung abbestellt hat, bekommt die Schublade ohne Fahrt -- sie ist dann sofort da. Die Breite steht mit in der Abfrage, weil es die Schublade nur darunter gibt: eine unbedingte Regel griffe sonst auch auf dem Desktop und veraenderte dort eine Eigenschaft, die niemand gesetzt hat. Vorbild: termin.css:1419. */ @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .seitenleiste, body.menue-offen .seitenleiste { transition: none; } } /* =========================================================================== Finger statt Maus =========================================================================== */ @media (pointer: coarse) { /* Unter 16px zoomt iOS Safari beim Hineintippen die ganze Seite, und danach steht man auf einer vergroesserten Seite, die waagerecht scrollt. Das gilt fuer JEDES Feld und unabhaengig von der Fensterbreite -- deshalb haengt die Regel am Zeigegeraet. app.css:86 setzt 14px. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: var(--body-02-size); } /* Ein Tippziel ist kein Mauszeiger. 32px ist die dichte Variante des Design Systems, gewaehlt fuer Tabellenzeilen mit vielen Knoepfen (app.css:32-34) -- mit dem Finger trifft man sie nicht zuverlaessig. Der Wert steht als Token an EINER Stelle (corporate.css:225) und zieht Knoepfe (app.css:41) und Felder (app.css:86) gemeinsam mit: ein Hebel statt zwanzig Einzelregeln. */ :root { --field-height-sm: 44px; } /* Kaestchen und Radioknoepfe nimmt das Token nicht mit -- app.css:99 setzt sie ausdruecklich auf 0, sonst waere jede Ankreuz-Pille so hoch wie ein Feld. Ihre Flaeche kommt deshalb von der Zeile, in der sie stehen. */ .ankreuz { min-height: var(--field-height-lg); } .nav-eintrag { min-height: var(--field-height-lg); } /* Sichtbar erst beim Darauffahren (app.css:2175-2180) ist am Finger gar nicht sichtbar: es gibt kein Darauffahren. */ .buendel-person .loeschen-link { visibility: visible; } } /* =========================================================================== Das Telefon =========================================================================== */ @media (max-width: 600px) { /* --- Kundenliste: Karte statt Zeile ------------------------------------ Aus der Tabelle wird eine Liste von Karten. Tabelle, Koerper, Zeile und Zelle werden zu Bloecken, die Kopfzeile faellt weg -- damit verlieren table-layout, colgroup und min-width:960px (app.css:750) ihre Wirkung von selbst, denn es ist keine Tabelle mehr. Der Weg ueber display und nicht ueber eine zweite Darstellung in kunden.js ist Absicht: die Zellen enthalten LEBENDE Felder (feldAuswahl, zellenauswahl), und die arbeiten unveraendert weiter, wenn man sie nur anders stellt. Eine zweite Darstellung waere eine zweite Wahrheit. */ .kundentabelle, .kundentabelle tbody, .kundentabelle tr, .kundentabelle td { display: block; } .kundentabelle thead, .kundentabelle colgroup { display: none; } .kundentabelle { min-width: 0; table-layout: auto; } .kundentabelle tr { border: var(--border-width-sm) solid var(--border-subtle); border-left: var(--border-width-accent) solid var(--ta-navy); margin-bottom: var(--spacing-03); padding: var(--spacing-03); } .kundentabelle tr.zeile-inaktiv { border-left-color: var(--grey-30); } /* Auf der Karte steht, wonach in der Halle gesucht wird: die Firma (mit dem gefundenen Ansprechpartner darunter), der Lead, der Stand und die Phasenkette. Der Rest ist Pflegearbeit und gehoert auf die Kundenseite -- ein Tipp auf den Firmennamen fuehrt dorthin. Ohne Kopfzeile braeuchte jede weitere Zelle eine eigene Beschriftung; diese vier erklaeren sich selbst. Welche es sind, ist eine Zeile hier -- fehlt beim Gebrauch eine, kommt sie dazu. */ .kundentabelle td { display: none; } .kundentabelle td:nth-child(2), /* Firma + gefundener Ansprechpartner */ .kundentabelle td:nth-child(3), /* Lead -- bleibt aenderbar */ .kundentabelle td:nth-child(11), /* Stand */ .kundentabelle td:nth-child(12) { /* Phasenkette */ display: block; border-bottom: 0; padding: var(--spacing-01) 0; } /* Die Leerzeile der gefilterten Liste ist eine einzelne Zelle ueber alle Spalten und muss bleiben, sonst steht die Liste stumm da. */ .kundentabelle td.leere-tabelle { display: block; } .kundentabelle td:nth-child(2) a { font-weight: var(--weight-semibold); } .kundentabelle select { max-width: 100%; } /* Die Suche ist auf dem Telefon der einzige Filter -- die Spaltenfilter sitzen in den Kopfzellen und sind mit der Kopfzeile weg. Dann soll sie wenigstens die ganze Breite haben (app.css:835 gibt ihr 280px). */ .suchfeld { width: 100%; } .suchfeld input { width: 100%; } /* Das Saeulendiagramm ueber der Tabelle ist eine Uebersicht fuer den Schreibtisch; seine Automatik misst ohnehin nur die Hoehe (kunden.js:398-412). Auf dem Telefon naehme es den halben Bildschirm. */ .saeulen-karte { display: none; } /* --- Einladungstabelle auf der Kundenseite: dieselbe Kartenform --------- Acht Spalten (app.css:2108-2155) in 343px sind acht Buchstaben je Spalte. */ .einladung-tabelle, .einladung-tabelle tbody, .einladung-tabelle tr, .einladung-tabelle td { display: block; } .einladung-tabelle thead, .einladung-tabelle colgroup { display: none; } .einladung-tabelle { table-layout: auto; } .einladung-tabelle tr { border: var(--border-width-sm) solid var(--border-subtle); margin-bottom: var(--spacing-03); padding: var(--spacing-03); } .einladung-tabelle td { border-bottom: 0; padding: var(--spacing-01) 0; } /* --- Private Blocker: bewusst nicht auf dem Telefon --------------------- Diese Ansicht wird durch Ziehen bedient (kalender.js:1045-1070). Ein Zieh-Gestus kaempft auf einem Touchgeraet mit dem Scrollen der Seite; zu loesen waere das nur mit touch-action:none auf dem ganzen Raster, und dann scrollt die Seite ueber dem Kalender gar nicht mehr. Sperrzeiten gehoeren zu keiner der drei Aufgaben, die in der Halle anfallen -- sie pflegt man am Schreibtisch. Eine Auslassung mit Ansage, keine vergessene Ecke. */ .kalender-tabs button[data-modus="sperre"] { display: none; } /* --- Anmeldung --------------------------------------------------------- 360px fest (app.css:130) auf einem 375px-Telefon heisst: die Karte beruehrt beide Raender. */ .anmeldung { padding: var(--spacing-05); } .anmeldung-karte { width: 100%; max-width: 360px; padding: var(--spacing-05); } /* --- Fenster ----------------------------------------------------------- Zwei Felder nebeneinander (app.css:982) sind auf dem Telefon zwei halbe Felder. Der Fuss bricht mit, sonst steht ein Knopf halb ausserhalb. */ .dialog .zeile { flex-wrap: wrap; } .dialog-fuss { flex-wrap: wrap; } .dialog { padding: var(--spacing-05); } /* --- Folgeprojekte ----------------------------------------------------- Die Tabelle wird zur Kartenliste -- reines CSS, kein zweites Markup ("eine zweite Darstellung waere eine zweite Wahrheit", siehe .kundentabelle oben). Ausgewaehlt wird ueber data-spalte und NICHT ueber nth-child: beim Umsortieren der Spalten bliebe eine Positionsliste sonst still falsch zurueck. */ .fp-tabelle, .fp-tabelle tbody, .fp-tabelle tr, .fp-tabelle td { display: block; } .fp-tabelle thead, .fp-tabelle colgroup { display: none; } .fp-tabelle { min-width: 0; table-layout: auto; } .fp-tabelle tr { border: var(--border-width-sm) solid var(--border-subtle); border-left: var(--border-width-accent) solid var(--ta-navy); margin-bottom: var(--spacing-03); padding: var(--spacing-03); } .fp-tabelle tbody tr.gewaehlt > td:first-child { box-shadow: none; } .fp-tabelle td { display: none; border-bottom: 0; padding: var(--spacing-01) 0; white-space: normal; } /* Fuenf Angaben je Karte -- mehr liest auf 375px niemand. Der Stand bleibt aenderbar: er ist das, was unterwegs am haeufigsten umgestellt wird. "Zuletzt" ist dabei, obwohl es nichts zu bedienen gibt: es ist die Angabe, wegen der jemand die Liste zwischen zwei Terminen aufmacht. */ .fp-tabelle td[data-spalte="kunde"], .fp-tabelle td[data-spalte="projekt"], .fp-tabelle td[data-spalte="titel"], .fp-tabelle td[data-spalte="stand"], .fp-tabelle td[data-spalte="erledigt"], .fp-tabelle td[data-spalte="aufgaben"], .fp-tabelle td[data-spalte="faellig"], .fp-tabelle td[data-spalte="ruhe"], .fp-tabelle td.leere-tabelle { display: block; } .fp-zelle-zahl { text-align: left; } /* Kopfleiste: Umschalter und Suche je ueber die ganze Breite. */ .fp-modus { width: 100%; } .fp-modus button { flex: 1 1 50%; justify-content: center; } .fp-kopfleiste .suchfeld { flex: 1 1 100%; } .fp-kopfleiste .fp-neu { width: 100%; justify-content: center; } .fp-bilanz { margin-left: 0; } /* Die einzeilige Aufgabe bricht auf dem Telefon um: Haken und Titel oben, Wer und Bis-wann darunter. Fuenf Spalten auf 375px waeren je 75px, und das Datumsfeld allein ist breiter. Hier liegt das Feld NICHT unsichtbar ueber dem Text, sondern steht offen da: die Einblendung haengt an :hover, und einen Mauszeiger gibt es hier nicht. (:focus-within allein hiesse: antippen, nichts sieht anders aus, nochmal antippen.) */ .fp-aufgabe { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "haken titel entfernen" "haken wer frist"; row-gap: var(--spacing-01); } .fp-aufgabe > .ankreuz, .fp-aufgabe > .fp-aufgabe-plus { grid-area: haken; align-self: start; } .fp-aufgabe > .fp-aufgabenfeld { grid-area: titel; } .fp-aufgabe > .fp-wer { grid-area: wer; } .fp-aufgabe > .fp-frist { grid-area: frist; justify-self: end; } .fp-aufgabe > .loeschen-link, .fp-aufgabe > span:last-child { grid-area: entfernen; } .fp-frist { width: 150px; height: 44px; } .fp-frist-text { display: none; } .fp-fristfeld { opacity: 1; } /* 44px Trefferflaeche wie bei jedem anderen Knopf im Haus. */ .fp-wer, .fp-kreis { width: 36px; height: 36px; } /* Auf 375px darf die Tafel zum Markieren die Breite nehmen, die da ist. */ .erwaehnung-tafel { max-width: calc(100vw - 32px); } /* --- Raster, die auf feste Spurbreiten gebaut sind ---------------------- */ .ankreuz-raster { grid-template-columns: minmax(0, 1fr); } /* 250px Text + 126px Zahl sind 376px, bevor der Balken einen Pixel bekommt. Geaendert werden die VARIABLEN und nicht grid-template-columns: die Heute-Linie rechnet ihre Lage aus denselben drei Werten (views/dashboard.js:67, calc() ueber --zp-text/--zp-luecke/--zp-zahl), und app.css:1824-1826 sagt ausdruecklich, dass die Breiten genau deshalb an EINER Stelle stehen. Eine eigene Spaltenvorlage hier haette die Linie neben den Balken gesetzt. */ .zeitplan { --zp-text: 108px; --zp-zahl: 56px; --zp-luecke: 8px; } /* Vier Spuren bleiben vier Spuren -- nur die feste erste wird schmal. Mit drei Spuren waere jede Zelle eine Spalte nach links gerutscht. */ .auslast-zeile { grid-template-columns: minmax(0, 88px) minmax(0, 1fr) 36px 40px; } .kachelzeile { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } /* Die schwebende Meldung hing mit festen 320px am rechten Rand. Auf dem Telefon nimmt sie die Breite, die da ist. */ .hinweisbox-schwebend { left: var(--spacing-04); right: var(--spacing-04); max-width: none; } }