/* * VL-Tool - AUFTRAGSSCANANSICHT (V2.9.723) * ========================================= * * Die Spielart "Auftragsscanansicht H": die Maske links, der eingescannte * Auftrag rechts daneben. Vorbereitung fuer den Knopf "Auftrag scannen". * * DIESE DATEI IST AM 30.07. AUFGERAEUMT WORDEN. * * Sie war ueber die Fassungen 2.9.702 bis 2.9.722 gewachsen - Schicht auf * Schicht, jede eine Antwort auf eine Messung, am Ende 1.330 Zeilen. Darin * standen ZWEI Dinge: der Aufbau der Seite (links Maske, rechts Dokument) * und eine eigene Feldanordnung innerhalb der Maske. * * Christian am 30.07.: "Bitte die Raster und die Anordnungen von Klar F aufs * neue Auftragsformular uebertragen." * * Damit ist die eigene Feldanordnung ersatzlos gestrichen. Sie kommt jetzt * aus order-form-elegant.css - derselben Datei, die auch die Spielarten A * bis G bedient. Diese Datei hier enthaelt nur noch: * * 1. den Aufbau der Seite (Kopfzeile, Schrittleiste, zwei Spalten) * 2. den Dokumentbereich * 3. die Business-Optik nach Christians Farbvorgabe * * MERKSATZ: Zwei Anordnungen fuer dieselbe Maske sind eine zu viel. Bei der * naechsten Feldaenderung haette man beide nachziehen muessen - und genau da * laufen zwei Fassungen auseinander. * * FARBEN: nach Christians Vorgabe vom 30.07. ("reduzierte Business-Optik"). * Das Gruen kommt hier NICHT aus der Markeneinstellung, sondern steht fest * bei #16A34A / #166534 - siehe vlt_brand_inline_css_order_form_scan() in * cockpit.php. Bewusste Ausnahme, gilt nur fuer diese Spielart. * * Nur wirksam bei body.vlt-form-scan. */ body.vlt-form-scan { --vlt-scan-grund: #f5f7f9; /* Hintergrund hinter den Karten */ --vlt-scan-rand: #e7ecef; /* Kartenrahmen */ --vlt-scan-feldrand: #dce3e8; /* Feldrahmen */ --vlt-scan-knopfrand: #d7dee5; /* Rahmen der Sekundaerknoepfe */ --vlt-scan-linie: #eef2f5; /* Trennlinien */ --vlt-scan-text: #1f2937; /* Ueberschriften */ --vlt-scan-fliess: #374151; /* normaler Text */ --vlt-scan-leise: #6b7280; /* Sekundaertext */ --vlt-scan-karte: 16px; } /* ======================================================================== * 1. KOPFZEILE * ===================================================================== */ /* * V2.9.724 - DIE SEITE WIRD BREITER, ABER NUR HIER. * * GEMESSEN nach dem Umstellen auf die Anordnung von "Klar F": Die * Maskenspalte war 640 px breit, die Anordnung braucht 649 - 34 Elemente * liefen ueber den Rand. Der Grund ist kein Fehler in der Anordnung: sie ist * fuer die volle Seite gerechnet, und der Themenrahmen gibt nur 1.140 px * her. Daneben soll aber noch ein Auftrag liegen. * * Christian hatte das vorhergesehen: "Sollte der Platz nicht ausreichen, * koennen wir immer noch die ganze Bildschirmbreite verwenden, weil das Tool * ist ja im Moment eingeschraenkt auf eine bestimmte Breite." * * Also tritt NUR diese Spielart aus dem Rahmen heraus - bis 1.600 px, immer * mittig, nie breiter als das Fenster. Ohne `transform`, weil das * klebende Elemente (Kopfzeile, Schrittleiste, Dokument) zu ihrem * Bezugspunkt machen wuerde. * * MERKSATZ: Eine Anordnung, die fuer die volle Seite gerechnet ist, braucht * die volle Seite. Entweder man gibt sie ihr - oder man rechnet neu. */ /* * V2.9.734: Die Sonderbehandlung ist weg. Seit die Breite EINMAL zentral in * vlt_tool_breite() steht und fuer alle Tool-Seiten gilt, muss diese Ansicht * nicht mehr aus ihrem Rahmen heraustreten - der Rahmen ist jetzt selbst so * breit. Damit verschwinden auch die beiden Rechnungen mit `50%` und `50vw`, * die vorher noetig waren. * * MERKSATZ: Die beste Sonderregel ist die, die man wieder loeschen kann, * weil die allgemeine Regel inzwischen stimmt. */ body.vlt-form-scan .vlt-scan-huelle { background: var(--vlt-scan-grund); border-radius: 20px; padding: 4px 24px 28px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); } body.vlt-form-scan .vlt-scan-kopf { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 0 22px; margin: 0; background: var(--vlt-scan-grund); border: 0; box-shadow: none; } body.vlt-form-scan .vlt-scan-kopf__links, body.vlt-form-scan .vlt-scan-kopf__rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } body.vlt-form-scan .vlt-scan-kopf__rechts { margin-left: auto; } body.vlt-form-scan .vlt-scan-kopf__titel { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--vlt-scan-text); } body.vlt-form-scan .vlt-scan-marke { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1.3; background: #fff; color: var(--vlt-scan-leise); border: 1px solid var(--vlt-scan-knopfrand); } body.vlt-form-scan .vlt-scan-marke[hidden] { display: none; } /* Die vorhandene Knopfreihe, verschoben nach oben rechts. */ body.vlt-form-scan .vlt-submit-row.vlt-scan-knoepfe { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; } /* * V2.9.741 - "Abbrechen" sass zu tief. * * Christian schickte die beiden Knoepfe nebeneinander: gleich hoch, gleich * breit - aber die Schrift in "Abbrechen" klebte am unteren Rand. * * GEMESSEN: `line-height` 38 px bei Abbrechen gegen 18 px bei Absenden. Der * Knopf ist 40 px hoch und hat oben wie unten 13 px Innenabstand. Eine * Zeilenhoehe von 38 px passt da nicht mehr hinein - die Zeile wird nach * unten aus dem Knopf gedrueckt. Bei Absenden mit 18 px war zufaellig alles * in Ordnung. * * Statt die Zeilenhoehe nur zu korrigieren, wird jetzt richtig zentriert: * beide Knoepfe sind Flexkaesten, die Schrift sitzt in der Mitte - unabhaengig * davon, welche Zeilenhoehe das Theme spaeter noch vergibt. * * MERKSATZ: Eine Zeilenhoehe, die groesser ist als der Platz, verschwindet * nicht - sie schiebt die Schrift hinaus. Wer mittig will, soll mittig sagen. */ body.vlt-form-scan .vlt-scan-knoepfe .vlt-submit, body.vlt-form-scan .vlt-scan-knoepfe .vlt-cancel { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0; width: auto; min-width: 0; padding: 13px 26px; font-size: 15px; line-height: 1.2 !important; font-weight: 700; border-radius: 10px; } body.vlt-form-scan .vlt-scan-knoepfe .vlt-submit { box-shadow: 0 2px 8px rgba(22, 163, 74, .18) !important; } body.vlt-form-scan .vlt-scan-knoepfe .vlt-cancel { background: #fff !important; border: 1px solid var(--vlt-scan-knopfrand) !important; color: var(--vlt-scan-fliess) !important; font-weight: 600; box-shadow: none !important; } body.vlt-form-scan .vlt-scan-knoepfe .vlt-cancel:hover { background: #f3f4f6 !important; } /* Die Fehlt-Anzeige aus den Orientierungshilfen sitzt in der Kopfzeile. */ body.vlt-form-scan .vlt-scan-knoepfe > a { order: 3; padding: 12px 18px; background: #fff; border: 1px solid var(--vlt-scan-knopfrand); border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; } /* ======================================================================== * 2. RASTER DER SEITE: Schrittleiste | Maske | Dokument * * Die Maskenspalte bekommt eine MINDESTBREITE. Die Anordnung aus "Klar F" * ist fuer die volle Seite gerechnet; bekommt sie weniger, laufen ihre * Feldreihen ueber den Rand. 640 px ist der gemessene Bedarf. * ===================================================================== */ body.vlt-form-scan .vlt-scan-raster { display: grid; grid-template-columns: 126px minmax(680px, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } body.vlt-form-scan .vlt-scan-spalte--maske { min-width: 0; } /* ======================================================================== * 3. SCHRITTLEISTE * ===================================================================== */ body.vlt-form-scan .vlt-scan-leiste { position: sticky; top: 96px; display: flex; flex-direction: column; padding: 6px 0 0; background: transparent; border: 0; } body.vlt-form-scan .vlt-scan-schritt { position: relative; display: block; padding: 0 6px 44px 0; text-decoration: none; color: var(--vlt-scan-leise); font-size: 14px; line-height: 1.35; } body.vlt-form-scan .vlt-scan-schritt:last-child { padding-bottom: 6px; } body.vlt-form-scan .vlt-scan-schritt:hover { background: transparent; } body.vlt-form-scan .vlt-scan-schritt:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px; width: 2px; background: var(--vlt-scan-linie); } body.vlt-form-scan .vlt-scan-schritt__nr { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 0 10px; border-radius: 50%; font-size: 15px; font-weight: 700; } body.vlt-form-scan .vlt-scan-schritt__text { display: block; font-weight: 500; } /* Die Ziffer vor der Abschnittsueberschrift. */ body.vlt-form-scan .vlt-scan-nr { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; margin-right: 12px; border-radius: 50%; font-size: 13.5px; font-weight: 700; } /* ======================================================================== * 4. DIE KARTEN * * Nur Flaeche, Rahmen, Radius, Schatten und Abstand. KEINE Feldanordnung - * die kommt aus order-form-elegant.css. * ===================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-form-section, body.vlt-form-scan .vlt-scan-doku { background: #fff !important; border: 1px solid var(--vlt-scan-rand) !important; border-radius: var(--vlt-scan-karte) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, .04) !important; } body.vlt-form-scan #vlt-order-form .vlt-form-section { padding: 26px 28px 28px !important; margin: 0 0 24px !important; } body.vlt-form-scan #vlt-order-form .vlt-form-section__title { display: flex; align-items: center; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Die Ziffer im Kreis ersetzt die Farbkante der Grundvariante. */ body.vlt-form-scan #vlt-order-form .vlt-form-section__title::before { display: none !important; } /* ======================================================================== * 5. SCHRIFT UND FELDER - nur Farbe, Rahmen, Radius. KEINE Breiten. * ===================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-field label, body.vlt-form-scan #vlt-order-form .vlt-aroundhome legend { color: var(--vlt-scan-fliess) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } body.vlt-form-scan #vlt-order-form .vlt-advisor-hint, body.vlt-form-scan .vlt-scan-schritt, body.vlt-form-scan .vlt-scan-platzhalter__klein, body.vlt-form-scan .vlt-scan-doku__blaettern { color: var(--vlt-scan-leise) !important; } body.vlt-form-scan #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-field select, body.vlt-form-scan #vlt-order-form .vlt-field textarea, body.vlt-form-scan #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-required select, body.vlt-form-scan #vlt-order-form .vlt-required textarea { background: #fff !important; border: 1px solid var(--vlt-scan-feldrand) !important; border-radius: 10px !important; color: var(--vlt-scan-fliess) !important; box-shadow: none !important; transition: border-color .12s ease, box-shadow .12s ease; } body.vlt-form-scan #vlt-order-form .vlt-field input:hover:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-field select:hover, body.vlt-form-scan #vlt-order-form .vlt-field textarea:hover { border-color: #cbd5e1 !important; } body.vlt-form-scan #vlt-order-form .vlt-field input::placeholder, body.vlt-form-scan #vlt-order-form .vlt-field textarea::placeholder { color: #9ca3af !important; } /* Auswahlgruppen und Kaestchen - Form, nicht Anordnung. V2.9.753: Segment-Schalter - Pille in einer Rinne statt zwei Kaesten. */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle { border: 1px solid var(--vlt-scan-knopfrand) !important; border-radius: 999px !important; overflow: hidden; background: #eef2f6 !important; box-shadow: none !important; padding: 3px !important; height: 34px !important; width: auto !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle label { background: transparent !important; color: var(--vlt-scan-leise) !important; font-weight: 600 !important; font-size: 13.5px !important; border: 0 !important; border-radius: 999px !important; padding: 0 16px !important; min-width: 62px; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-zeile { display: flex; align-items: center; gap: 10px; min-height: 34px; } body.vlt-form-scan #vlt-order-form .vlt-arho-hinweis { color: var(--vlt-scan-leise) !important; font-size: 12.5px !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle .vlt-checkmark { display: none !important; } body.vlt-form-scan #vlt-order-form .vlt-count-box { background: #fff !important; border: 1px solid var(--vlt-scan-knopfrand) !important; border-radius: 10px !important; font-weight: 700 !important; } body.vlt-form-scan #vlt-order-form .vlt-count-more { background: #fff !important; border: 1px solid var(--vlt-scan-knopfrand) !important; border-radius: 10px !important; color: var(--vlt-scan-leise) !important; font-weight: 600 !important; } body.vlt-form-scan #vlt-order-form .vlt-contract-row { border-radius: 12px !important; box-shadow: none !important; } /* ======================================================================== * 6. DOKUMENTBEREICH * ===================================================================== */ body.vlt-form-scan .vlt-scan-doku { position: sticky; top: 96px; display: flex; flex-direction: column; min-height: 620px; max-height: calc(100vh - 116px); overflow: hidden; } body.vlt-form-scan .vlt-scan-doku__kopf { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border: 0; } body.vlt-form-scan .vlt-scan-doku__titel { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 600; color: var(--vlt-scan-text); } body.vlt-form-scan .vlt-scan-doku__zustand { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } body.vlt-form-scan .vlt-scan-doku__blaettern { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; font-size: 14px; font-weight: 600; } body.vlt-form-scan .vlt-scan-doku__buehne { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin: 0 20px; padding: 24px; overflow: auto; background: #fff; border: 1px solid var(--vlt-scan-linie); border-radius: 12px; } body.vlt-form-scan .vlt-scan-doku__werkzeug { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px 16px; background: transparent; border: 0; } body.vlt-form-scan .vlt-scan-werkzeug { padding: 9px 12px; background: #fff; border: 1px solid var(--vlt-scan-knopfrand); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--vlt-scan-leise); white-space: nowrap; cursor: not-allowed; opacity: .55; } body.vlt-form-scan .vlt-scan-werkzeug--zoom { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: default; } body.vlt-form-scan .vlt-scan-platzhalter { max-width: 340px; text-align: center; } body.vlt-form-scan .vlt-scan-platzhalter__blatt { position: relative; width: 124px; height: 168px; margin: 0 auto 18px; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: 5px; box-shadow: 0 3px 14px rgba(15, 23, 42, .08); } body.vlt-form-scan .vlt-scan-platzhalter__blatt::before { content: ""; position: absolute; left: 15px; right: 15px; top: 28px; height: 92px; background: repeating-linear-gradient( to bottom, var(--vlt-scan-rand) 0 1px, transparent 1px 13px); } body.vlt-form-scan .vlt-scan-platzhalter__text { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--vlt-scan-text); } body.vlt-form-scan .vlt-scan-platzhalter__klein { margin: 0; font-size: 13.5px; line-height: 1.55; } /* ======================================================================== * 7. UMSCHALTER - am Schreibtisch unsichtbar * ===================================================================== */ body.vlt-form-scan .vlt-scan-umschalter { display: none; } /* ======================================================================== * 8. SCHMALE FENSTER * ===================================================================== */ @media (max-width: 1400px) { body.vlt-form-scan .vlt-scan-raster { grid-template-columns: minmax(620px, 1.4fr) minmax(300px, 1fr); } body.vlt-form-scan .vlt-scan-leiste { display: none; } } @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-raster { grid-template-columns: minmax(0, 1fr); } body.vlt-form-scan .vlt-scan-umschalter { position: sticky; top: 78px; z-index: 29; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: 11px; } body.vlt-form-scan .vlt-scan-umschalter__knopf { padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--vlt-scan-leise); font-size: 14.5px; font-weight: 600; cursor: pointer; } /* Umgeschaltet wird durch Ein- und Ausblenden, nicht durch Neuaufbau - sonst verliert ein halb ausgefuelltes Feld beim Wechsel den Inhalt. V2.9.753: Das Ein- und Ausblenden passiert jetzt eine Ebene hoeher, an den Spalten selbst (siehe Block "AM HANDY IST DAS RASTER KEIN RASTER MEHR" am Dateiende). Hier steht nur noch, was der Auftragsbereich am Handy sonst noch anders macht. Die alten Regeln, die den Auftrag selbst versteckt haben, sind raus - sie waren staerker als die neuen und haetten ihn dauerhaft unsichtbar gehalten. */ body.vlt-form-scan .vlt-scan-raster .vlt-scan-doku { position: static; max-height: none; min-height: 0; } body.vlt-form-scan .vlt-scan-huelle { padding: 4px 12px 18px; border-radius: 14px; } body.vlt-form-scan .vlt-scan-kopf { padding: 14px 0 16px; } body.vlt-form-scan .vlt-scan-kopf__rechts { width: 100%; margin-left: 0; } body.vlt-form-scan .vlt-submit-row.vlt-scan-knoepfe { width: 100%; } body.vlt-form-scan .vlt-scan-knoepfe .vlt-submit { flex: 1 1 auto; } } /* ======================================================================== * 9. WAS OBEN FEST STEHT - SPRUNGZIELE, ZAEHLER, ZWEITE KNOPFREIHE * * Die Werte `--vlt-scan-oben` und `--vlt-scan-sprung` werden in * order-form-scan.js GEMESSEN und gesetzt - die Cockpit-Leiste aendert ihre * Hoehe mit der Fensterbreite, und die WordPress-Leiste fehlt * Vertriebspartnern ganz. * ===================================================================== */ body.vlt-form-scan .vlt-scan-kopf { top: var(--vlt-scan-oben, 0px); } body.vlt-form-scan .vlt-scan-leiste, body.vlt-form-scan .vlt-scan-doku { top: calc(var(--vlt-scan-sprung, 96px) + 4px); } /* Der Sprung zu einem Abschnitt haelt unter den festen Balken an. */ body.vlt-form-scan #vlt-order-form .vlt-form-section { scroll-margin-top: var(--vlt-scan-sprung, 200px); } /* Der Zaehler steht jetzt unter den Sprungzielen. */ body.vlt-form-scan .vlt-scan-zaehler { margin: 18px 0 0; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--vlt-scan-leise); box-shadow: 0 2px 10px rgba(15, 23, 42, .04); } body.vlt-form-scan .vlt-scan-zaehler a { color: var(--vlt-scan-fliess); } /* Die zweite Knopfreihe unter der Maske. */ body.vlt-form-scan .vlt-scan-knoepfe--unten { flex-direction: row-reverse; justify-content: flex-start; margin: 4px 0 0 !important; padding: 0 !important; } /* ======================================================================== * 10. FILIGRANE GRUENE KONTUR UM DIE EINGABEFELDER * * Christian am 30.07.: "Bitte auch kleine filigrane gruene Rahmen um die * Eingabefelder zum besseren Sichten der Eingabefelder. Ausgenommen * Kommentarfeld." * * Der Ton ist die Markenfarbe der Ansicht (#16A34A) auf gut ein Drittel * heruntergenommen. Damit bleibt die Vorgabe "Gruen nur als Akzent" * gewahrt: man sieht die Felder auf einen Blick, ohne dass die Seite gruen * wird. * * Das Kommentarfeld bleibt grau - es ist freiwillig, und ein gruener Rahmen * wuerde es wie eine Pflichtangabe aussehen lassen. * * MERKSATZ: Eine Kontur, die alles gleich betont, betont nichts. * ===================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-field select, body.vlt-form-scan #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-required select { border-color: rgba(22, 163, 74, .38) !important; } body.vlt-form-scan #vlt-order-form .vlt-field input:hover:not([type="radio"]):not([type="checkbox"]), body.vlt-form-scan #vlt-order-form .vlt-field select:hover { border-color: rgba(22, 163, 74, .62) !important; } /* Kommentar bleibt grau. */ body.vlt-form-scan #vlt-order-form .vlt-field textarea, body.vlt-form-scan #vlt-order-form .vlt-required textarea { border-color: var(--vlt-scan-feldrand) !important; } /* V2.9.728: GEMESSEN - der Zaehler stand OBERHALB der Sprungziele, obwohl er als letztes Kind eingehaengt wird. Er bringt aus den Orientierungshilfen ein `order: -1` mit; dort sollte er vor dem Absenden-Knopf stehen. In der Schrittleiste zieht ihn dasselbe -1 nach ganz oben. MERKSATZ: Ein Element, das man umzieht, nimmt seine alten Anweisungen mit. */ body.vlt-form-scan .vlt-scan-leiste .vlt-scan-zaehler { order: 99 !important; } /* ======================================================================== * V2.9.729 - DAS DURCHSCROLLEN NEBEN DER COCKPIT-LEISTE * * Christian: "Wie kriegen wir das hin, dass es nicht mehr hinten * durchscrollt?" * * GEMESSEN am 30.07.: * * Fenster 1.645 px breit * Cockpit-Leiste fest, von x = 252 bis x = 1.392 (1.140 breit) * Auftragsscanansicht von x = 28 bis x = 1.617 (1.589 breit) * * Damit ist die Ursache benannt: Die Leiste deckt nur den Themenrahmen ab. * Seit 2.9.724 ist DIESE Ansicht breiter als der Rahmen - links 224 px und * rechts 225 px stehen frei. Genau dort laufen Schrittleiste und * Dokumentbereich beim Scrollen oben vorbei. Nicht "hinter" der Leiste, * sondern NEBEN ihr. * * Der Balken selbst wird nicht angefasst: er gehoert allen Seiten, und eine * Aenderung dort traefe auch Cockpit, Bestenliste und alles andere. * Stattdessen bekommt nur diese Ansicht ein festes weisses Band ueber die * volle Fensterbreite, das unter der Leiste liegt (z-index 899 gegen 900) * und genau so hoch ist wie der gemessene Balkenstapel. * * MERKSATZ: Wenn Inhalt "hinten durchscrollt", ist selten der Inhalt schuld * - meist deckt das, was oben klebt, nicht die ganze Breite ab. * ===================================================================== */ body.vlt-form-scan::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--vlt-scan-oben, 190px); background: #fff; z-index: 899; /* direkt unter der Cockpit-Leiste (900) */ pointer-events: none; /* darf nichts abfangen, was darunter liegt */ } /* Eine feine Kante unten, damit das Band nicht ins Nichts ausläuft. */ body.vlt-form-scan::after { content: ""; position: fixed; top: var(--vlt-scan-oben, 190px); left: 0; right: 0; height: 1px; background: var(--vlt-scan-rand); z-index: 899; pointer-events: none; } /* V2.9.730: GEMESSEN - die Verbreiterung aus 2.9.724 hat nie gewirkt. `width: min(1600px, ...)` stand da, die berechnete Breite blieb aber 1.140 px: das Theme setzt `max-width: 100%`, und eine Breite kann eine Hoechstbreite nicht ueberholen. Folge: das Raster brauchte 1.226 px und lief rechts aus der Huelle heraus - der Dokumentbereich wurde beschnitten. MERKSATZ: `width` gewinnt nie gegen `max-width`. Wer verbreitert, muss die Hoechstbreite mit aufheben. */ body.vlt-form-scan .vlt-scan-huelle { max-width: none !important; box-sizing: border-box; } /* ======================================================================== * V2.9.731 - DREI DINGE, DIE ZUSAMMENGEHOEREN * ===================================================================== */ /* * 1. DAS E-MAIL-FELD LIEF UEBER DIE KOPFZEILE * * Christian: "Das E-Mail-Feld, das wandert noch drueber ueber den * Bildschirm." * * GEMESSEN: `.vlt-email-field` traegt `position:relative` und * `z-index:100` - vermutlich wegen seiner Vorschlagsliste. Unsere Kopfzeile * lag auf 30. Beim Scrollen schob sich das Feld deshalb VOR die Kopfzeile * statt darunter zu verschwinden. * * Die Kopfzeile geht auf 500: ueber das Feld (100), aber unter die * Cockpit-Leiste (900) und unter das weisse Band (899). * * MERKSATZ: Was oben kleben soll, muss hoeher liegen als alles, was * darunter durchlaeuft - und niedriger als alles, unter dem es selbst * durchlaufen soll. */ body.vlt-form-scan .vlt-scan-kopf { z-index: 500; } body.vlt-form-scan .vlt-scan-leiste, body.vlt-form-scan .vlt-scan-doku { z-index: 200; } /* * 2. DIE COCKPIT-LEISTE BEKOMMT DIESELBE BREITE * * Christian: "Der Bildschirm ist natuerlich extrem breit geworden und die * Cockpit-Buttonleiste dagegen schmal. Entweder machen wir jetzt die * Cockpitleiste etwas breiter, wie sie jetzt ist, und passen die Breite des * Bildschirms genau unter die Cockpitleiste an." * * Sie wird NUR auf dieser Seite verbreitert - `body.vlt-form-scan` steht * nur hier. Cockpit, Bestenliste und alle anderen Seiten behalten ihre * 1.140 px. * * MERKSATZ: Eine Aenderung an etwas Gemeinsamem gehoert an die Stelle * gebunden, an der sie gebraucht wird - sonst aendert man ueberall mit. */ /* * V2.9.732 - GEMESSEN UND KORRIGIERT: Der erste Versuch hat die Leiste nach * links aus dem Bild geschoben (von x = -318 bis 822). * * Grund: Sie wird gar nicht ueber `left` positioniert, sondern ueber * `left:0; right:0; margin-left:auto; max-width:1140px` - also durch * automatische Raender mittig gehalten (Regel `body.vlt-tool-fullwidth * .vlt-order-sticky`). Mein `left:50%` plus Verschiebung kam ZUSAETZLICH zu * diesem Rand und hat sie doppelt nach links gezogen. * * Richtig ist deshalb: die Zentrierung in Ruhe lassen und nur die * Hoechstbreite anheben - dieselbe Formel wie bei der Ansicht selbst. * * MERKSATZ: Bevor man etwas verschiebt, muss man wissen, wie es * ueberhaupt an seinen Platz kommt. */ /* * Die Sonderregel fuer die Cockpit-Leiste ist mit 2.9.734 entfallen: sie * bekommt ihre Breite jetzt aus derselben Quelle wie alle anderen Seiten. */ /* * 3. DIE HAELFTEN * * Christian: "... und teilen den Bildschirm genau in der Mitte: rechts der * Auftrag, links die Eingabemaske. Der Platz ist ja dafuer gegeben, weil die * Eingabemaske eh schmal gebaut ist." * * Beide Spalten `1fr` - gleich breit, unabhaengig vom Fenster. Die * Mindestbreite der Maske (680 px, der gemessene Bedarf der Anordnung aus * "Klar F") bleibt als Untergrenze stehen: sie greift erst, wenn das Fenster * zu schmal wird, und schuetzt davor, dass die Felder wieder ueberlaufen. */ /* * V2.9.735 - HIER STAND DER FEHLER, DER DIE HANDY-ANSICHT ZERSTOERT HAT. * * Christian am 30.07., mit einem Bildschirmfoto vom iPhone: "Leider wurde * auch die Smartphone-Ansicht zerstoert." * * An dieser Stelle stand seit 2.9.731 noch einmal * `grid-template-columns: 126px minmax(680px,1fr) minmax(0,1fr)` - also die * Halbierung fuer den Schreibtisch. Angehaengt ans Dateiende, und damit NACH * den @media-Bloecken. * * Folge: Auf dem Handy hat der Medienblock zwar "eine Spalte" gesagt, diese * Zeile danach aber wieder "drei Spalten, die mittlere mindestens 680 px". * Die spaetere Regel gewinnt - auf einem 390 px breiten Bildschirm wurde die * Maske dadurch auf ein Drittel gequetscht, und die Beschriftungen brachen * mitten im Wort um. * * Die Regel steht jetzt dort, wo sie hingehoert: im Grundraster in * Abschnitt 2, VOR den Medienblöcken. * * MERKSATZ: Was man ans Dateiende haengt, steht nach den @media-Bloecken - * und hebelt sie damit auf jedem Bildschirm aus, fuer den sie gedacht waren. * Eine Datei, die nur waechst, verliert irgendwann ihre Ordnung. */ /* ======================================================================== * V2.9.736/737 - PLZ UND HAUSNUMMER: DER PLATZ FUER DIE ZIFFERN * * Christian am 30.07., mit zwei Nahaufnahmen: "Postleitzahl und Hausnummer - * nicht mehr sichtbar, was ich reinschreibe." * * GEMESSEN und nachgerechnet: * * Feldbreite 99 px * Innenabstand links 12 px * Innenabstand rechts 40 px (Platz fuer das Loeschkreuz) * ------------------------------ * fuer Ziffern bleiben 47 px * * Und in diese 47 px legt Safari beim Ausfuellen noch sein eigenes * Personen-Symbol mit Aufklapppfeil. Danach ist fuer die Eingabe nichts mehr * uebrig - man tippt ins Feld und sieht es nicht. * * ERSTER VERSUCH (2.9.736) war falsch angesetzt: Ich habe die Breiten ueber * eigene Regeln zu ueberschreiben versucht. Die Regeln der Grundvariante * tragen aber `:has(...)` und wiegen dadurch schwerer - gemessen blieb das * Feld bei 99 px. * * RICHTIG ist, an der Quelle anzusetzen: Die Breite kommt aus * `--vlt-kurz: calc(5ch + var(--vlt-feldrand))`. `--vlt-feldrand` ist die * Reserve fuer alles, was NEBEN den Zeichen im Feld steht - dort mit 55 px * angesetzt, gemessen an Innenabstand und Loeschkreuz. Was damals noch nicht * mitgezaehlt wurde, ist das Symbol, das der Browser selbst hineinlegt. * * Also wird hier nur diese eine Zahl erhoeht. Alle abgeleiteten Breiten - * PLZ, Datum, Ort, Spaltenbreite - wachsen automatisch mit und bleiben * untereinander stimmig. * * MERKSATZ: Eine Zahl, aus der andere abgeleitet werden, korrigiert man an * der Quelle - nicht an jeder Ableitung einzeln. * * MERKSATZ: "So breit wie der Inhalt" muss alles mitzaehlen, was im Feld * steht - auch das, was der Browser selbst hineinlegt. * ===================================================================== */ /* * ZWEITER VERSUCH (2.9.737) war zu grob: `--vlt-feldrand` von 55 auf 100 * anzuheben hat ALLE abgeleiteten Breiten mitgezogen - auch Ort und Strasse. * Gemessen liefen danach vier von fuenf Feldreihen ueber die 717 px der * Karte hinaus. Die Quelle war richtig gefunden, die Wirkung zu breit. * * MERKSATZ: An der Quelle zu drehen ist richtig - aber nur, wenn wirklich * alles, was daran haengt, mehr Platz braucht. Hier brauchten es zwei. * * Also jetzt gezielt: nur PLZ und Hausnummer. Damit die Regel gegen die der * Grundvariante ankommt, traegt der Waehler eine Klasse mehr als ihrer - * seiner heisst `body.vlt-form-elegant ...`, meiner * `body.vlt-form-elegant.vlt-form-scan ...`. */ /* * DRITTER UND LETZTER ANLAUF (2.9.739). * * Versuch 2 (feldrand 55 -> 100) war zu breit: er zog Ort und Strasse mit, * vier Feldreihen liefen ueber die Karte. * Versuch 3 (PLZ fest auf 150 px) war zu eng gedacht: PLZ und Ort teilen * sich EINE Spalte fester Breite - was die PLZ dazubekommt, verliert der * Ort. Gemessen schrumpfte er von 196 auf 145 px, und "Limburg an der Lahn" * passte nicht mehr. * * MERKSATZ: Wo zwei Felder sich eine Spalte teilen, ist jede Verbreiterung * des einen eine Verschmaelerung des anderen. Breiter wird es nur, wenn die * Spalte selbst waechst. * * Richtig ist deshalb: nur `--vlt-kurz` anheben. Daraus leiten sich die PLZ, * die Hausnummer UND die Gesamtbreite der Spalte ab - der Ort behaelt seine * 16 Zeichen, die Spalte waechst um den Unterschied. * * vorher --vlt-kurz: calc(5ch + 55px) = 99 px, davon 47 px fuer Text * jetzt --vlt-kurz: calc(5ch + 95px) = 139 px, davon 87 px fuer Text * * 87 px reichen fuer fuenf Ziffern auch dann noch, wenn Safari sein * Personen-Symbol daneben legt. */ /* * VIERTER ANLAUF - UND DIESMAL OHNE AN BREITEN ZU DREHEN (2.9.740). * * Die drei Versuche davor haben alle dasselbe versucht: dem Feld mehr Platz * geben. Und alle drei sind am selben Punkt gescheitert - der Platz ist * begrenzt, und was die PLZ dazubekommt, fehlt dem Ort oder laeuft aus der * Karte. * * Versuch 1: eigene Breitenregeln -> verloren gegen `:has()` * Versuch 2: --vlt-feldrand 55 -> 100 -> vier Feldreihen liefen ueber * Versuch 3: PLZ fest auf 150 px -> Ort schrumpfte auf 145 * Versuch 4: --vlt-kurz +40 px -> vier Feldreihen liefen wieder ueber * * Die eigentliche Frage war die ganze Zeit eine andere: WOFUER geht der Platz * drauf? Von 99 px sind 40 px rechter Innenabstand - reserviert fuer das * Loeschkreuz. Bei einem Feld mit fuenf Ziffern ist ein Loeschkreuz aber * ueberfluessig: fuenfmal Rueckschritt ist genauso schnell, und im * Zweifel tippt man einfach drueber. * * Also faellt das Kreuz bei PLZ und Hausnummer weg, und die 40 px werden zu * 12. Aus 47 px Schreibflaeche werden 75 - genug fuer fuenf Ziffern, auch * wenn Safari sein Personen-Symbol daneben legt. Keine Spalte aendert sich, * kein anderes Feld verliert etwas. * * MERKSATZ: Wenn der Platz nicht reicht, ist die erste Frage nicht "wie * bekomme ich mehr", sondern "was liegt da eigentlich drin, das ich nicht * brauche". */ body.vlt-form-elegant.vlt-form-scan #vlt-order-form .vlt-clear-wrap:has(#vlt-postcode) .vlt-clear-field, body.vlt-form-elegant.vlt-form-scan #vlt-order-form .vlt-clear-wrap:has(#vlt-street-number) .vlt-clear-field { display: none !important; } body.vlt-form-elegant.vlt-form-scan #vlt-order-form #vlt-postcode, body.vlt-form-elegant.vlt-form-scan #vlt-order-form #vlt-street-number { padding-right: 12px !important; max-width: none !important; width: 100% !important; } /* ======================================================================== * V2.9.735 - DIESER BLOCK BLEIBT DER LETZTE * * Ab hier stehen nur noch Regeln, die AUSDRUECKLICH die letzten sein sollen: * die Feinausrichtung und die Anpassungen fuer schmale Bildschirme. Wer * kuenftig etwas ergaenzt, das fuer ALLE Bildschirme gilt, traegt es weiter * oben ein - sonst hebelt es die Medienblöcke wieder aus. * ===================================================================== */ /* * Der Dokumentbereich sass 12 px tiefer als die Maske daneben. * Christian: "Der gescannte Auftrag sitzt tiefer, der muss ein bisschen * hoeher sitzen." * GEMESSEN: Maske bei y = 278, Dokument bei y = 290. Der Unterschied war der * Klebeabstand: `--vlt-scan-sprung` ist die Unterkante der Kopfzeile PLUS * 14 px Luft - richtig fuer einen Sprung zu einem Abschnitt, zu viel fuer * etwas, das buendig neben der Maske stehen soll. */ body.vlt-form-scan .vlt-scan-leiste, body.vlt-form-scan .vlt-scan-doku { top: calc(var(--vlt-scan-sprung, 96px) - 14px); } @media (max-width: 1400px) { body.vlt-form-scan .vlt-scan-raster { grid-template-columns: minmax(620px, 1.4fr) minmax(300px, 1fr); } body.vlt-form-scan .vlt-scan-leiste { display: none; } } @media (max-width: 980px) { /* Eine Spalte - und zwar wirklich. */ body.vlt-form-scan .vlt-scan-raster { grid-template-columns: minmax(0, 1fr) !important; } body.vlt-form-scan .vlt-scan-huelle { padding: 4px 12px 18px; border-radius: 14px; } body.vlt-form-scan .vlt-scan-kopf { padding: 12px 0 14px; } body.vlt-form-scan .vlt-scan-kopf__titel { font-size: 20px; } body.vlt-form-scan .vlt-scan-kopf__rechts { width: 100%; margin-left: 0; } /* Beide Knoepfe gleich breit - vorher streckte sich nur "Absenden". */ body.vlt-form-scan .vlt-submit-row.vlt-scan-knoepfe { width: 100%; } body.vlt-form-scan .vlt-scan-knoepfe .vlt-submit, body.vlt-form-scan .vlt-scan-knoepfe .vlt-cancel { flex: 1 1 0 !important; min-width: 0 !important; padding: 13px 12px !important; text-align: center; } body.vlt-form-scan #vlt-order-form .vlt-form-section { padding: 18px 16px 20px !important; margin: 0 0 16px !important; } body.vlt-form-scan .vlt-scan-raster .vlt-scan-doku { position: static; max-height: none; min-height: 420px; top: auto; } } /* ======================================================================== * V2.9.742 - DREI SACHEN AUS CHRISTIANS RUNDE UM 19:27 * ===================================================================== */ /* * 1. DIE VERBINDUNGSLINIE LIEF DURCH DIE SCHRIFT * * Christian: "Hier links bei den Jumper-Buttons, da ist zum Beispiel so ein * durchgezogener Strich durch 'Kunde' zum Beispiel. Klar, der verbindet die * Buttons, soll eine optische Verbindung sein. Die koennten wir ja vielleicht * einfach hinter dem Text laufen lassen, dann waer's ja nicht so schlimm." * * Genau das passiert jetzt. Die Linie laeuft senkrecht bei x = 17 px - das * ist die Mitte der 36 px grossen Ziffernkreise. Die Beschriftung steht * darunter und beginnt bei x = 0, also mitten auf der Linie. * * Die Beschriftung bekommt deshalb den Grund der Seite als eigene Flaeche und * liegt eine Ebene darueber. Die Linie verschwindet hinter ihr und taucht * darunter wieder auf - die Verbindung bleibt sichtbar, die Schrift bleibt * lesbar. * * MERKSATZ: Zwei Dinge am selben Platz muss man nicht auseinanderruecken - * es reicht zu sagen, welches von beiden vorne liegt. */ body.vlt-form-scan .vlt-scan-schritt__text { position: relative; z-index: 1; display: inline-block; padding: 2px 8px 2px 0; background: var(--vlt-scan-grund); } body.vlt-form-scan .vlt-scan-schritt:not(:last-child)::before { z-index: 0; } body.vlt-form-scan .vlt-scan-schritt__nr { position: relative; z-index: 1; } @media (max-width: 1400px) { /* * 2. DER ZAEHLER GEHT AM HANDY NICHT VERLOREN * * Die Schrittleiste wird ab hier ausgeblendet - der Zaehler sitzt aber * seit 2.9.727 in ihr. Er wuerde also mit verschwinden. Deshalb bleibt * die Leiste stehen, aber nur mit dem Zaehler darin. * * MERKSATZ: Wer einen Kasten ausblendet, blendet alles darin mit aus - * auch das, was man spaeter hineingelegt hat. */ body.vlt-form-scan .vlt-scan-leiste { display: block !important; position: static; padding: 0; margin: 0 0 14px; } body.vlt-form-scan .vlt-scan-leiste .vlt-scan-schritt { display: none !important; } body.vlt-form-scan .vlt-scan-zaehler { margin: 0 !important; } } @media (max-width: 980px) { /* * 3. AM HANDY OBEN KEINE KNOEPFE, DAFUER DER UMSCHALTER * * Christian: "Bei der Smartphone-Ansicht ist mir aufgefallen, dass * Abbrechen und Absenden oberhalb schweben. Unterhalb sind die Knoepfe ja * noch mal, da brauchen die oben nicht zu stehen. Stattdessen wuerde ich * da die zwei Buttons 'Vertrag' und 'Eingabemaske' festsetzen, weil die * hier mitwandern. Die gehen weg, und wenn ich den Vertrag vergleichen * will, hab ich keine Chance." * * Das ist der wichtigere von beiden: Beim Abgleichen springt man staendig * zwischen Vertrag und Maske hin und her. Ein Umschalter, der beim * Scrollen verschwindet, zwingt jedes Mal zum Hochscrollen. * * Die Knoepfe oben entfallen ersatzlos - dieselben stehen unter der * Maske. Dadurch wird die Kopfzeile niedriger, und der Umschalter rueckt * automatisch weiter nach oben: seine Klebehoehe wird aus der GEMESSENEN * Kopfzeilenhoehe berechnet. * * MERKSATZ: Platz am Handy verteilt man nach dem, was oft gebraucht wird - * nicht nach dem, was am Schreibtisch oben stand. */ body.vlt-form-scan .vlt-scan-kopf .vlt-scan-knoepfe { display: none !important; } body.vlt-form-scan .vlt-scan-umschalter { position: sticky; top: calc(var(--vlt-scan-sprung, 96px) - 14px); z-index: 450; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: 11px; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); } } /* ======================================================================== * V2.9.743 - DAS ZUCKEN AM OBERRAND UND DIE HOEHE DES AUFTRAGS * ===================================================================== */ /* * 1. ZWEI PIXEL UEBERDECKUNG STATT EINER NAHTSTELLE * * Das weisse Band reicht jetzt zwei Pixel weiter nach unten, als die festen * Balken hoch sind. Zusammen mit dem Aufrunden in order-form-scan.js gibt es * damit keinen Spalt mehr, durch den beim Scrollen Inhalt blitzen kann. * * Die feine Kante darunter faellt weg - sie sass genau auf der Nahtstelle * und war damit selbst Teil des Flimmerns. * * MERKSATZ: Wo zwei Flaechen aneinanderstossen, ist die sauberste Loesung, * sie sich ueberlappen zu lassen. Auf den Pixel genau ist nie genau genug. */ /* * V2.9.747 - GEMESSEN BEI SCROLLPOSITION 302, AUF EINEM 2x-BILDSCHIRM: * * Unterkante der festen Leiste 190,50 px * Oberkante der Kopfzeile 191,00 px * Spalt 0,50 px * * Ein halber CSS-Pixel ist auf Christians Bildschirm (devicePixelRatio 2) * genau EIN echter Bildpunkt. Genau diese eine Linie flackert. * * Das weisse Band reicht jetzt acht Pixel tiefer als die Leiste - der Spalt * liegt damit weit innerhalb einer gefuellten Flaeche und kann nicht mehr * aufblitzen, egal wie gerundet wird. */ body.vlt-form-scan::before { height: calc(var(--vlt-scan-oben, 190px) + 8px); } body.vlt-form-scan::after { display: none; } /* * 2. DER GESCANNTE AUFTRAG NUTZT DIE VOLLE HOEHE * * Christian: "Der gescannte Auftrag hat auch nicht die volle Hoehe von der * Maske links daneben - vielleicht sollte man die ganze Hoehe ausnutzen, dass * der Auftrag komplett in voller Hoehe dasteht." * * Bisher stand dort eine Mindesthoehe von 620 px und eine Hoechsthoehe vom * Bildschirm. Ein Auftragsformular ist hochkant - je mehr Hoehe, desto mehr * davon liest man ohne Zoomen. * * Jetzt fuellt der Bereich genau das, was vom Bildschirm unter den festen * Balken uebrig bleibt. Er klebt dort und bleibt beim Scrollen durch die * Maske vollstaendig sichtbar - das ist der ganze Sinn des Nebeneinanders. */ body.vlt-form-scan .vlt-scan-doku { height: calc(100vh - var(--vlt-scan-sprung, 200px) - 10px); min-height: 520px; max-height: none; } /* ======================================================================== * V2.9.744 - DIE KOPFZEILE STEHT FEST, EGAL WIE GENAU GEMESSEN WURDE * * Christian: "Immer noch ein Zucken oberhalb der Unterkante, wenn ich * scrolle. Moechte gerne, dass es feststehen bleibt, fest, ohne dass es * zuckt." * * Zwei Ursachen, zwei Antworten: * * 1. Das Nachmessen bei jedem Bildwechsel ist raus (siehe * order-form-scan.js). Es hat den Klebepunkt waehrend des Scrollens * veraendert - genau das sieht man als Springen. * * 2. Die Kopfzeile verlaesst sich nicht mehr darauf, dass die gemessene * Zahl auf den Pixel stimmt. Sie zieht ihren eigenen Hintergrund 40 px * nach OBEN mit - unter die feste Leiste, wo ihn niemand sieht. Ist die * Messung um ein, zwei Pixel daneben, faellt es trotzdem nicht auf: es * gibt schlicht keinen Spalt mehr, durch den etwas blitzen koennte. * * MERKSATZ: Eine Darstellung, die nur bei exakter Messung stimmt, ist * zerbrechlich. Besser ist eine, der ein Messfehler nichts ausmacht. * ===================================================================== */ /* * V2.9.746 - GEMESSEN BEIM SCROLLEN, nachdem Christian meldete: "Zucken ist * immer noch nicht weg." * * Beim Scrollen auf y = 1000 gemessen: die Kopfzeile klebte sauber bei 191 px, * die feste Leiste endet bei 190,5 - dort war also kein Spalt. Die Ursache * lag woanders: Ich hatte der klebenden Kopfzeile in 2.9.744 einen * `box-shadow` ueber 40 px gegeben, um den Hintergrund nach oben zu ziehen. * * Ein Schatten dieser Groesse auf einem KLEBENDEN Element muss der Browser * bei jedem Bild neu zeichnen - in Safari sichtbar als Flimmern an genau der * Kante, die er eigentlich verdecken sollte. * * Dasselbe Ergebnis erreicht ein einfaches gefuelltes Rechteck oberhalb der * Kopfzeile. Es wird einmal gezeichnet und mitbewegt, nicht bei jedem Bild * neu berechnet. * * MERKSATZ: Ein Schatten ist teurer als eine Flaeche. Auf etwas, das beim * Scrollen mitwandert, kostet dieser Unterschied sichtbare Ruhe. */ body.vlt-form-scan .vlt-scan-kopf { top: var(--vlt-scan-oben, 191px); box-shadow: none; /* * Eigene Zeichenebene fuer die klebende Kopfzeile. Ohne sie berechnet * Safari ihre Lage bei jedem Bild neu und zeichnet sie um einen * Bildpunkt versetzt - das ist das Zittern, das man beim Scrollen sieht. * Mit eigener Ebene wird sie nur noch verschoben, nicht neu gezeichnet. * * MERKSATZ: Was beim Scrollen stehen bleiben soll, sollte der Browser * verschieben duerfen statt es neu zu malen. */ transform: translateZ(0); } body.vlt-form-scan .vlt-scan-kopf::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: var(--vlt-scan-grund); pointer-events: none; } /* * Auch die klebenden Spalten bekommen keine Nahtstelle mehr: Schrittleiste * und Dokument stehen weit unter der Leiste, aber ihr oberer Rand soll beim * Scrollen nicht flimmern. */ body.vlt-form-scan .vlt-scan-leiste, body.vlt-form-scan .vlt-scan-doku { backface-visibility: hidden; } /* * V2.9.744 - Die Spalte fuer den Auftrag streckt sich ueber die ganze * Zeilenhoehe; der Auftrag klebt darin. * * Die Schrittleiste behaelt ihr `start` - sie steht oben und soll dort * bleiben; sie hat keinen Weg zu gehen. */ body.vlt-form-scan .vlt-scan-raster { align-items: stretch; } body.vlt-form-scan .vlt-scan-leiste { align-self: start; } body.vlt-form-scan .vlt-scan-spalte--doku { min-width: 0; display: block; } /* ======================================================================== * V2.9.746 - DER AUFTRAG STEHT JETZT WIRKLICH FEST * * Christian: "Der Auftrag rechts bleibt auch nicht stehen, wenn ich ganz nach * unten scrolle, bis hinter das Kommentarfeld - dann wandert der ein Stueck * mit hoch." * * GEMESSEN bei y = 1000: Der Bereich sollte bei 273 px kleben, sass aber bei * 267 - sechs Pixel zu hoch. Seine Spalte endet dort, wo das Formular endet; * ab da schiebt die Unterkante ihn nach oben. Am Ende des Formulars wird aus * den sechs Pixeln ein sichtbares Stueck. * * Das ist keine Einstellungssache, sondern die Natur von "klebend": Ein * klebendes Element endet mit seinem Kasten. Wer will, dass etwas IMMER * steht, muss es aus dem Fluss nehmen. * * Der Bereich ist deshalb ab hier FEST positioniert. Seine linke Kante und * seine Breite kommen aus der Spalte, in der er stuende - gemessen beim Laden * und wenn sich die Groesse aendert, NICHT beim Scrollen (siehe den Merksatz * in order-form-scan.js). * * MERKSATZ: "Klebend" heisst "klebt, solange sein Kasten reicht". Wer kein * Ende will, braucht "fest". * ===================================================================== */ /* * V2.9.747 - ZURUECK AUF KLEBEND. * * Christian, nachdem der Bereich fest positioniert war: "Schau mal jetzt an, * wie der Bildschirm steht, praktisch da, wo der Auftragsscan hinkommt. Der * ist ja komplett festgewurzelt." - Fest heisst eben auch: er legt sich am * Seitenende ueber den Fussbereich. * * Damit sind beide Enden benannt: * klebend = bleibt im Inhalt, wandert die letzten Pixel mit hoch * fest = steht immer, ueberlagert dafuer den Fuss * * Beides ist erklaerbar, keines ist beides. Bis Christian entschieden hat, * steht die schonendere Variante: klebend. Sie ueberdeckt nichts. * * MERKSATZ: Wenn zwei Verhalten sich ausschliessen, ist die Wahl keine * technische Frage mehr - dann muss der entscheiden, der damit arbeitet. */ @media (min-width: 981px) { body.vlt-form-scan .vlt-scan-doku { position: sticky; top: var(--vlt-scan-sprung, 200px); left: auto; width: auto; margin: 0; } } /* ======================================================================== * V2.9.748 - NUR DIE MASKE SCROLLT * * Christians Entscheidung, nachdem beide Enden auf dem Tisch lagen: * "Nur die Maske scrollt." * * Damit loesen sich drei Probleme auf einmal auf, und zwar nicht durch einen * weiteren Kunstgriff, sondern weil es sie nicht mehr gibt: * * - Der gescannte Auftrag kann nicht mehr wandern. Er scrollt nicht, weil * um ihn herum nichts mehr scrollt. * - Er kann den Fussbereich nicht ueberdecken, weil er im Fluss bleibt. * - Das Zucken unter der Cockpit-Leiste kann nicht mehr auftreten. Es * entstand daraus, dass eine klebende Kopfzeile bei jedem Bild neu an * ihren Platz gerechnet wurde. Jetzt bewegt sich dort gar nichts mehr. * * MERKSATZ: Manche Fehler behebt man nicht, indem man sie repariert, sondern * indem man die Lage beseitigt, in der sie entstehen konnten. * * Das ist der Aufbau, den Vergleichsprogramme seit jeher haben: zwei feste * Haelften, in denen jeweils der Inhalt laeuft - nicht die Seite. * * Gilt NUR am Schreibtisch (ab 981 px). Am Handy bleibt es beim Scrollen der * ganzen Seite; dort steht ohnehin immer nur eine Haelfte auf einmal. * ===================================================================== */ @media (min-width: 981px) { /* Die beiden Haelften bekommen die Hoehe, die der Bildschirm hergibt. */ body.vlt-form-scan .vlt-scan-raster { /* * V2.9.753: `--vlt-scan-rasterhoehe` wird in order-form-scan.js in * einem Zug ausgerechnet - aus dem, was ueber dem Raster steht, und * dem, was darunter steht. Der frueher fortgeschriebene Abzug ist * entfallen, siehe Kommentar dort. */ height: var(--vlt-scan-rasterhoehe, 62vh); align-items: stretch; } /* Links laeuft der Inhalt - nicht die Seite. */ body.vlt-form-scan .vlt-scan-spalte--maske { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; /* Platz fuer die Bildlaufleiste */ scrollbar-width: thin; } body.vlt-form-scan .vlt-scan-spalte--maske::-webkit-scrollbar { width: 10px; } body.vlt-form-scan .vlt-scan-spalte--maske::-webkit-scrollbar-thumb { background: #d7dee5; border-radius: 999px; border: 3px solid var(--vlt-scan-grund); } /* Rechts steht der Auftrag - im Fluss, ueber die volle Hoehe. */ body.vlt-form-scan .vlt-scan-spalte--doku { height: 100%; } body.vlt-form-scan .vlt-scan-doku { position: static; height: 100%; max-height: none; min-height: 0; top: auto; left: auto; width: auto; } /* Die Schrittleiste braucht nicht mehr zu kleben. */ body.vlt-form-scan .vlt-scan-leiste { position: static; } /* * Der Sprung zu einem Abschnitt spielt sich jetzt INNERHALB der linken * Haelfte ab. Ueber ihr steht dort nichts mehr, was etwas verdecken * koennte - der grosse Abstand von vorher waere jetzt nur noch eine * Luecke. */ body.vlt-form-scan #vlt-order-form .vlt-form-section { scroll-margin-top: 12px; } /* Die Kopfzeile klebt nicht mehr - es scrollt ja nichts mehr an ihr vorbei. */ body.vlt-form-scan .vlt-scan-kopf { position: static; transform: none; } body.vlt-form-scan .vlt-scan-kopf::before { display: none; } } /* ======================================================================== * V2.9.750 - DAS HANDY BEKOMMT DASSELBE PRINZIP - UND EINE LISTE * ===================================================================== */ @media (max-width: 980px) { /* * 1. AUCH HIER SCROLLT NUR DER INHALT * * Christian: "Da gibt's uebrigens auch noch ein Zucken. Das haett ich * gerne auch noch weg." * * Dieselbe Ursache wie am Schreibtisch, dieselbe Antwort: Statt zwei * klebende Elemente bei jedem Bild neu an ihren Platz zu rechnen, scrollt * nur noch der Inhalt der sichtbaren Haelfte. Kopfzeile und Umschalter * stehen einfach da - sie muessen gar nicht mehr kleben. * * MERKSATZ: Was nicht klebt, kann auch nicht zittern. */ body.vlt-form-scan .vlt-scan-kopf { position: static; transform: none; } body.vlt-form-scan .vlt-scan-kopf::before { display: none; } body.vlt-form-scan .vlt-scan-umschalter { position: static; grid-template-columns: 1fr 1fr 1fr; /* jetzt drei Knoepfe */ box-shadow: none; } /* * V2.9.753 - AM HANDY IST DAS RASTER KEIN RASTER MEHR. * * Christian: "Egal wo ich draufklicke, ich bekomme keine Ansicht." * * Am Handy soll immer genau EINE Flaeche zu sehen sein. Solange das * Raster ein Raster blieb, standen die unsichtbaren Geschwister trotzdem * als eigene Zeilen darin - vor allem die Huelle um den Auftrag, die nie * ausgeblendet wurde, sondern nur ihr Inhalt. Eine feste Gesamthoehe * wurde dann unter mehreren Zeilen aufgeteilt, und fuer die sichtbare * blieb zu wenig uebrig. * * Jetzt ist es hier ein einfacher Block, in dem genau eine der drei * Flaechen steht. Was nicht dran ist, ist ganz weg - nicht nur leer. * * MERKSATZ: Ein leerer Platzhalter nimmt genauso viel Platz weg wie ein * voller. */ body.vlt-form-scan .vlt-scan-raster { display: block; height: var(--vlt-scan-rasterhoehe, 62vh); } body.vlt-form-scan .vlt-scan-raster > .vlt-scan-spalte, body.vlt-form-scan .vlt-scan-raster > .vlt-scan-listenblatt { display: none; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; } body.vlt-form-scan .vlt-scan-raster.zeigt-maske > .vlt-scan-spalte--maske { display: block; } body.vlt-form-scan .vlt-scan-raster.zeigt-dokument > .vlt-scan-spalte--doku { display: block; } body.vlt-form-scan .vlt-scan-doku { position: static; display: flex; height: 100%; max-height: none; min-height: 0; } body.vlt-form-scan .vlt-scan-leiste { position: static; } } /* ------------------------------------------------------------------------ * 2. DIE LISTE * * Sichtbar nur, wenn der dritte Knopf gewaehlt ist - und nur am Handy, wo * der Umschalter ueberhaupt steht. * ------------------------------------------------------------------------ */ body.vlt-form-scan .vlt-scan-listenblatt { display: none; } @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-raster.zeigt-liste .vlt-scan-spalte--maske, body.vlt-form-scan .vlt-scan-raster.zeigt-liste .vlt-scan-doku { display: none !important; } body.vlt-form-scan .vlt-scan-raster.zeigt-liste .vlt-scan-listenblatt { display: block; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: var(--vlt-scan-karte); box-shadow: 0 2px 10px rgba(15, 23, 42, .04); padding: 18px 16px 20px; } body.vlt-form-scan .vlt-scan-listenblatt__kopf { display: block; margin: 0 0 16px; font-size: 15px; color: var(--vlt-scan-text); } body.vlt-form-scan .vlt-scan-listenblatt__hinweis { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--vlt-scan-leise); } body.vlt-form-scan .vlt-scan-listenblock { margin: 0 0 18px; } body.vlt-form-scan .vlt-scan-listenblock__titel { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #166534; } body.vlt-form-scan .vlt-scan-listenzeile { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--vlt-scan-linie); font-size: 14.5px; } body.vlt-form-scan .vlt-scan-listenzeile:last-child { border-bottom: 0; } body.vlt-form-scan .vlt-scan-listenzeile__name { flex: 0 0 46%; color: var(--vlt-scan-leise); font-size: 13.5px; } body.vlt-form-scan .vlt-scan-listenzeile__wert { flex: 1 1 auto; font-weight: 600; color: var(--vlt-scan-text); word-break: break-word; } /* Was noch fehlt, faellt auf - aber ruhig. */ body.vlt-form-scan .vlt-scan-listenzeile.ist-leer .vlt-scan-listenzeile__wert { font-weight: 400; color: #b3bac4; } } /* ======================================================================== * V2.9.756 - PLATZ NACH UNTEN, SCHMALER NACH AUSSEN * ======================================================================== * * Christian am 30.07.: "Ich finde, nach unten hin wird sehr viel Platz * verschwendet ... dann bitte nach unten weiter ausbauen. Da haben wir noch * so viel Platz, weil ich werde ja immer mehr in der Sicht eingeschraenkt." * * GEMESSEN, woran es lag: Unter dem Auftragsformular stand der Fussbereich * des Themes - 232 px hoch, dazu 58 px Innenabstand der Theme-Kaesten. Diese * 290 px wurden vom Bildschirm abgezogen, BEVOR die beiden Haelften ihre * Hoehe bekamen. Sichtbar war davon nichts Nuetzliches: zweimal * "Verkaufsleitung Limburg" auf schwarzem Grund, waehrend man einen Auftrag * eintippt. * * Auf dieser einen Ansicht ist der Fuss deshalb aus. Nur hier - auf allen * anderen Seiten bleibt er, wie er ist. Die 290 px gehen an die Maske und an * den gescannten Auftrag, und weil die Hoehe gemessen und nicht gerechnet * wird, kommt der Gewinn von allein an. * * MERKSATZ: Bevor man um Platz kaempft, schaut man nach, wer ihn belegt. * ===================================================================== */ body.vlt-form-scan .site-footer, body.vlt-form-scan #footer-widgets, body.vlt-form-scan #scroll-top { display: none !important; } body.vlt-form-scan .content-area, body.vlt-form-scan #content-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; } body.vlt-form-scan .vlt-scan-huelle { padding-bottom: 8px; } /* * Und die Zeilen ruecken enger zusammen. Bei 1.360 px statt 1.600 px steht * rechts weniger Luft; nach unten war zwischen den Zeilen ebenfalls mehr * Abstand, als das Auge braucht. */ body.vlt-form-scan #vlt-order-form .vlt-order-grid { row-gap: 14px !important; } body.vlt-form-scan #vlt-order-form .vlt-field { margin-bottom: 0 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome { margin-top: 16px !important; margin-bottom: 16px !important; } /* ------------------------------------------------------------------------ * DIE GEWAEHLTE SEITE DES SCHALTERS - OHNE :has() * * GEMESSEN: Die gefuellte Pille blieb farblos, obwohl die Regel * `label:has(input:checked)` nachweislich auf das Element passte * (`element.matches(...)` war wahr) und als einzige `!important` mit der * hoechsten Gewichtung dastand. Woran es genau lag, liess sich nicht * feststellen - und eine Regel, die man nicht erklaeren kann, ist keine * Grundlage. * * Also traegt jetzt das Skript eine Klasse ein. Das ist ohnehin die * robustere Loesung: `:has()` kennt erst Safari ab 15.4, und auf einem * aelteren iPhone waere die Auswahl sonst gar nicht zu sehen gewesen. * * MERKSATZ: Wenn eine Regel greifen muesste und es nicht tut, hilft kein * staerkeres Gewicht - sondern ein anderer Weg. * ------------------------------------------------------------------------ */ #vlt-order-form .vlt-aroundhome-toggle label.is-gewaehlt { background: #ffffff !important; color: #1f2933 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .16); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle label.is-gewaehlt { background: #16a34a !important; color: #ffffff !important; box-shadow: none; } /* ======================================================================== * V2.9.756 - AM HANDY: NICHTS VERRUTSCHT, UND OBEN WIRD PLATZ GESPART * ======================================================================== * * Christian am 30.07.: * "Auf Smartphone-Ansicht laesst sich meine Eingabemaske komplett nach * rechts und links schieben. Die ist jetzt nicht mehr fest zentriert, wie * es mal die ganze Zeit war. Und der Space darunter, wo der Auftrag sich * befindet, ist unwahrscheinlich klein. Man muss alles mehr an die * Oberkante bauen, die drei Buttons muessen hoeher, naeher an 'Auftrag * erfassen' dran - da muss oben noch ein bisschen Space genutzt werden." * * 1. DAS VERSCHIEBEN * * Das ist meine Aenderung von vorhin. Solange die beiden Haelften Zellen * eines Rasters waren, hielt `minmax(0, 1fr)` sie in der Spur: breiter als * die Spalte ging nicht. Als einfache Bloecke haben sie diese Grenze nicht * mehr - ein einziges zu breites Feld schiebt dann die ganze Seite zur * Seite. Deshalb bekommen sie die Grenze hier ausdruecklich zurueck. * * MERKSATZ: Wer eine Begrenzung entfernt, muss wissen, was sie gehalten hat. * * 2. DER PLATZ OBEN * * Kopfzeile, Zaehler und Umschalter standen mit Handy-untypisch grossen * Abstaenden uebereinander. Jeder gesparte Pixel dort geht direkt an den * Auftrag darunter - die Hoehe wird gemessen, nicht gesetzt. * ===================================================================== */ @media (max-width: 980px) { body.vlt-form-scan { overflow-x: hidden; } body.vlt-form-scan .vlt-scan-raster > .vlt-scan-spalte, body.vlt-form-scan .vlt-scan-raster > .vlt-scan-listenblatt { min-width: 0; max-width: 100%; overflow-x: hidden; } body.vlt-form-scan .vlt-scan-raster > .vlt-scan-spalte > *, body.vlt-form-scan .vlt-scan-doku { max-width: 100%; } /* Oben zusammenruecken. */ body.vlt-form-scan .vlt-scan-huelle { padding: 2px 10px 8px; } body.vlt-form-scan .vlt-scan-kopf { padding: 8px 0 10px; } body.vlt-form-scan .vlt-scan-kopf__titel { margin-bottom: 2px; } body.vlt-form-scan .vlt-scan-leiste { margin: 0 0 8px !important; } body.vlt-form-scan .vlt-scan-umschalter { margin: 0 0 8px; padding: 3px; } body.vlt-form-scan .vlt-scan-umschalter__knopf { padding: 9px 8px; font-size: 14px; } } /* ======================================================================== * V2.9.757 - DER ZAEHLER AM HANDY: EINE ZEILE STATT EINES KASTENS * ======================================================================== * * Christian: "Kriegen wir das nicht ganz klein, in Minitext, direkt unter * 'Auftrag erfassen'? Dann koennen wir das ganze Feld wegnehmen." * * Der Knoten ist derselbe wie am Schreibtisch, nur ohne Kasten: kein * Hintergrund, kein Rahmen, kein Schatten, kein Aussenabstand. Er steht in * einer eigenen Zeile unter dem Titel (flex-basis 100 %), damit er die * Kopfzeile nicht breiter macht - und weil er keine eigene Hoehe ueber der * Zeilenhoehe hat, waechst nichts. * ===================================================================== */ @media (max-width: 980px) { /* Die Leiste enthielt am Handy nur noch den Zaehler - der steht jetzt oben. */ body.vlt-form-scan .vlt-scan-leiste { display: none !important; } body.vlt-form-scan .vlt-scan-kopf__links { row-gap: 2px; } body.vlt-form-scan .vlt-scan-zaehler--klein { flex: 0 0 100%; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 12px !important; line-height: 1.3 !important; color: var(--vlt-scan-leise) !important; } body.vlt-form-scan .vlt-scan-zaehler--klein .vlt-restanzeige, body.vlt-form-scan .vlt-scan-zaehler--klein button { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-size: 12px !important; line-height: 1.3 !important; color: var(--vlt-scan-leise) !important; text-align: left; } } /* ======================================================================== * V2.9.758 - ALLES NACH OBEN STAUCHEN * ======================================================================== * * Christian: "Umso mehr Platz wir nach oben gewinnen, umso besser. Gleiches * auch beim Handy - die Buttonleiste Eingabemaske, Vertrag, Liste muss * hoeher, damit der Auftrag darunter mit nach oben geht. So schmal wie * moeglich nach oben. Aber so, dass alles noch gut leserlich ist und dass * wir die Knoepfe noch gut erreichen." * * GEMESSEN, was oben die 279 px belegt hat: * * WordPress-Leiste 32 px (sieht nur der Verwalter) * Theme-Innenabstand 30 px * feste Cockpitleiste 135 px * Kopfzeile mit Knoepfen 82 px * * Angefasst wird das, wo Luft ist, nicht wo Inhalt ist: Innenabstaende und * Aussenabstaende. Schriftgroessen und Knopfhoehen bleiben, wie sie sind - * "gut leserlich und gut erreichbar" war die Bedingung. * * Die Cockpitleiste wird NUR auf dieser Ansicht gestaucht. Auf den uebrigen * Seiten steht sie wie bisher; dort kostet ihre Hoehe nichts. * * MERKSATZ: Platz holt man sich aus den Abstaenden, nicht aus der Schrift. * ===================================================================== */ /* Die feste Leiste: enger gepackt, aber nichts kleiner gemacht. V2.9.774: NUR NOCH AM SCHREIBTISCH. Am Handy hat diese Stauchung zusammen mit den spaeteren Umbauten das obere Erscheinungsbild zerlegt - dort gilt wieder das Original von vor dem 30.07. */ @media (min-width: 981px) { body.vlt-form-scan .vlt-order-sticky { padding-top: 6px !important; padding-bottom: 4px !important; } body.vlt-form-scan .vlt-order-form__topbar { margin-bottom: 4px !important; } body.vlt-form-scan .vlt-mini-nav-wrap { margin-bottom: 6px !important; } body.vlt-form-scan .vlt-order-hint { margin-top: 2px !important; margin-bottom: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } } /* Die eigene Kopfzeile: Titel und Knoepfe ruecken an die Oberkante. */ body.vlt-form-scan .vlt-scan-kopf { padding-top: 6px; padding-bottom: 10px; } body.vlt-form-scan .vlt-scan-huelle { padding-bottom: 6px; } @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-huelle { padding: 4px 10px 10px; } body.vlt-form-scan .vlt-scan-kopf { padding: 6px 0 8px; } body.vlt-form-scan .vlt-scan-umschalter { margin: 0 0 8px; } } /* ======================================================================== * V2.9.759 - DIE FEHLERMELDUNG DARF NICHT AUSSER SICHT SEIN * ======================================================================== * * GEMESSEN bei der Fehlersuche: Die Meldung "Bitte die rot umrandeten * Pflichtfelder ausfuellen" stand bei einem gescrollten Formular auf * y = -575 px - also weit oberhalb des Sichtbaren. Sie steht am Anfang des * Formulars, und das Formular scrollt in der Auftragsscanansicht in einer * eigenen Flaeche. * * Wer unten auf "Absenden" drueckt, sieht die Antwort darauf also gar nicht. * Aus "das Formular sagt mir, was fehlt" wird "es passiert nichts". * * Deshalb klebt die Meldung hier am oberen Rand der Maske. Sie ist ohnehin * nur da, wenn es etwas zu sagen gibt. * * MERKSATZ: Eine Meldung, die man nicht sieht, ist keine Meldung. * ===================================================================== */ body.vlt-form-scan #vlt-order-message:not([hidden]) { position: sticky; top: 0; z-index: 40; margin: 0 0 12px; box-shadow: 0 4px 12px rgba(15, 23, 42, .10); } /* ======================================================================== * V2.9.760 - AM HANDY SCROLLT WIEDER DIE SEITE * ======================================================================== * * Christian am 30.07.: * "Wenn ich in eine Zelle klicke, um einen Namen einzutragen, und ich bin * fertig, dann springt das Formular so was von durcheinander, dass ich * wieder suchen muss, wo die naechste Zelle ist … die Tabelle wird * unterhalb abgeschnitten, auch wenn ich fertig bin … und die drei Buttons * sind auf einmal komplett weg, sobald ich etwas eingegeben habe." * * Drei Beschwerden, eine Ursache: das Bauprinzip "feste Hoehe, innen * scrollen". Am Schreibtisch ist es richtig - Maske und Auftrag liegen * nebeneinander und sollen gleich hoch sein. Am Handy steht ohnehin nur eine * Flaeche, und dort richtet dasselbe Prinzip nur Schaden an: Jede Tastatur, * jede eingeblendete Browserleiste, jedes Drehen aendert die Rechnung. Mal * ist die Flaeche zu kurz - abgeschnitten. Mal rutscht ihr Inhalt bei der * Neuberechnung an eine andere Stelle - der Sprung. Und wenn Safari die Seite * selbst verschiebt, ist die Knopfleiste weg, ohne Weg zurueck. * * Ab hier: am Handy keine feste Hoehe, kein Scrollen im Kasten. Die Seite * scrollt wie jede andere Seite auf einem Telefon. Damit die drei Knoepfe * trotzdem immer erreichbar sind, kleben sie unter der Cockpitleiste - ohne * Schatten und ohne mitlaufende Berechnung, damit nichts zittert. * * MERKSATZ: Ein Bauprinzip, das an einer Stelle richtig ist, ist deshalb * nicht ueberall richtig. * ===================================================================== */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-raster { display: block; height: auto !important; } body.vlt-form-scan .vlt-scan-raster > .vlt-scan-spalte, body.vlt-form-scan .vlt-scan-raster > .vlt-scan-listenblatt { height: auto !important; max-height: none !important; overflow: visible !important; } body.vlt-form-scan .vlt-scan-doku { height: auto !important; max-height: none !important; min-height: 62vh; } /* Die drei Knoepfe bleiben immer erreichbar. */ body.vlt-form-scan .vlt-scan-umschalter { position: sticky; top: var(--vlt-scan-oben, 0px); z-index: 450; margin: 0 0 8px; padding: 2px; background: #fff; box-shadow: none; } body.vlt-form-scan .vlt-scan-umschalter__knopf { padding: 7px 6px; font-size: 13.5px; } /* Noch enger an die Oberkante: Titel direkt unter die gelbe Leiste, der Zaehler direkt unter den Titel. */ body.vlt-form-scan .vlt-scan-huelle { padding: 0 10px 8px; } body.vlt-form-scan .vlt-scan-kopf { padding: 2px 0 6px; } body.vlt-form-scan .vlt-scan-kopf__titel { font-size: 20px; } body.vlt-form-scan .vlt-scan-marke--entwurf { font-size: 12px; padding: 3px 10px; } } /* ======================================================================== * V2.9.761 - DER KIPPSCHALTER IN DER SCANANSICHT * ======================================================================== * Die Grundform steht in order-form.css. Hier wird nur sichergestellt, dass * die früheren Pillen-Regeln dieser Ansicht den Schalter nicht mehr * überschreiben - und dass das Grün das der Marke bleibt. * ===================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle { width: 56px !important; min-width: 56px; height: 32px !important; padding: 0 !important; border-radius: 999px !important; background: #e4e8ec !important; border: 1px solid #cbd2d9 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle.is-offen { background: #fffaf0 !important; border: 1px dashed #d99a2b !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle.is-ja { background: #009039 !important; border-color: #009039 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle label, body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle label.is-gewaehlt { background: none !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; font-size: 0 !important; } /* V2.9.763: auch hier kein „offen"-Aussehen mehr - siehe order-form.css. */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle.is-offen { background: #e4e8ec !important; border: 1px solid #cbd2d9 !important; } /* ------------------------------------------------------------------------ * V2.9.772: HIER STAND DER GRUND FUER DEN SPRUNG BEIM ANKLICKEN. * * Christian: "Sobald ich in die Zelle reinklicke, springt die ganze Tabelle * ein Stueck runter." * * In 2.9.764 hatte jedes Feld einen Rollabstand nach oben bekommen: * rund 190 px Leistenhoehe plus 56 px - damit Safari es beim Heranrollen * UNTER die damals schwebenden Leisten stellt. Seit 2.9.770 schwebt am Handy * nichts mehr - aber dieser Abstand stand noch da. Safari hat ihn brav * eingehalten: Bei jedem Antippen rollte es die Seite so, dass ueber dem * Feld ein VIERTEL BILDSCHIRM Leerraum fuer Leisten blieb, die es nicht * mehr gibt. Das war der Sprung nach unten. * * Beim grossen Aufraeumen in 2.9.770 habe ich diese Regel uebersehen, weil * sie 700 Zeilen von den anderen entfernt stand. * * Jetzt: ein kleiner Abstand, damit das Feld nicht haarscharf an der Kante * klebt - mehr nicht. * * MERKSATZ: Wer einen Umbau zurueckbaut, muss jede Stelle finden, die sich * auf den Umbau verlassen hat - auch die weit entfernten. * ------------------------------------------------------------------------ */ @media (max-width: 980px) { body.vlt-form-scan #vlt-order-form .vlt-field, body.vlt-form-scan #vlt-order-form input, body.vlt-form-scan #vlt-order-form select, body.vlt-form-scan #vlt-order-form textarea, body.vlt-form-scan #vlt-order-form fieldset { scroll-margin-top: 8px; scroll-margin-bottom: 8px; } } /* ======================================================================== * V2.9.765 - DER ZAEHLER IN DER KLEBENDEN KNOPFLEISTE * ======================================================================== * Christian: „Die Felder, die noch offen sind - das ist dann auch weg, das * kommt auch nicht mehr zurück. Man muss dann wieder ganz hochscrollen." * * Er sitzt jetzt als eigene Zeile unter den drei Knöpfen, innerhalb der * Leiste, die ohnehin immer stehen bleibt. Kosten: rund 16 px. Gewinn: die * Antwort auf „was fehlt noch?" ist immer da, wo die Frage aufkommt. * ===================================================================== */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { grid-column: 1 / -1; margin: 2px 4px 2px !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--vlt-scan-linie) !important; padding-top: 4px !important; background: none !important; font-size: 12px !important; line-height: 1.25 !important; text-align: center; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein .vlt-restanzeige { text-align: center; width: 100%; } /* Die Leiste darf dafür etwas höher sein - sie trägt jetzt zwei Zeilen. */ body.vlt-form-scan .vlt-scan-umschalter { padding: 2px 2px 0; } } /* V2.9.766: Der Zähler steht UNTER den drei Knöpfen, nicht darüber. */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-umschalter__knopf { order: 1; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { order: 2; } } /* ======================================================================== * V2.9.770 - AM HANDY SCHWEBT NICHTS MEHR. GAR NICHTS. * ======================================================================== * * Christian: „Das Scrollen hört einfach nicht auf." … „noch schlimmer jetzt" * * Ich habe an der falschen Stelle immer weiter geschraubt. Der Reihe nach: * * 2.9.764 Zielfeld unter die Leisten rechnen * 2.9.765 vorheriges Feld an den Anfang des freien Bereichs rechnen * 2.9.766 beides dreimal zeitversetzt wiederholen * 2.9.767 alles Rechnen raus, nur noch rollen wenn nötig * 2.9.768 Umschalter hört beim Tippen auf zu kleben * 2.9.769 Cockpitleiste hört beim Tippen auf zu kleben -> schlimmer * * Sechs Versuche an einer Stelle. Der Grund liegt tiefer, und er ist einfach: * * Am Handy liegen über dem Formular rund 190 px feste Leisten. Safari rollt * beim Aufklappen der Tastatur das angetippte Feld an den oberen Rand des * FENSTERS - von den Leisten weiß es nichts, und abstellen lässt sich das * nicht. Zwei Dinge wollen also gleichzeitig denselben Platz. Solange sie * beide da sind, gibt es keine Rechnung, die das auflöst; jede Korrektur * erzeugt nur die nächste Bewegung. * * Also fällt am Handy das Schweben weg - vollständig: * * - die Cockpitleiste steht im Text und rollt mit * - der Umschalter steht im Text und rollt mit * - der reservierte Platz darüber entfällt (die Leiste braucht ihn selbst) * * Damit kann nichts mehr etwas verdecken, es gibt keinen Grund mehr für eine * Zurechtrückung, und die Seite verhält sich wie jede normale Seite auf einem * Telefon: Sie bleibt da, wo man sie hingerollt hat. * * Der Preis: Menü und Umschalter sind nicht mehr dauerhaft sichtbar, man * rollt nach oben, um sie zu erreichen. Das ist der Preis dafür, dass beim * Ausfüllen nichts mehr springt und nichts mehr verdeckt wird - und Ausfüllen * ist das, wofür die Seite da ist. * * Am Schreibtisch bleibt alles, wie es ist. * * MERKSATZ: Wenn zwei Dinge denselben Platz beanspruchen, hilft keine * Rechnung - eines von beiden muss weichen. * ===================================================================== */ /* ------------------------------------------------------------------------ * V2.9.774 - RUECKBAU: DIE COCKPITLEISTE IST WIEDER FEST, WIE VOR DEM 30.07. * * Christian: "Bevor wir mit der Auftragsmaske heute angefangen haben, hat es * auf der vorherigen Designansicht funktioniert. Oben ist ein grauer Balken, * da steht nur PA drin. Die Cockpitleiste ist runtergerutscht. Das ganze * obere Outfit ist zerstoert." * * Das ist der Massstab, der den ganzen Abend gefehlt hat: Die ALTEN * Ansichten benutzen dieselbe feste Leiste, dieselben Felder, dasselbe * Telefon - und funktionierten. Also wird der obere Aufbau exakt auf diesen * Stand zurueckgesetzt: Leiste fest am oberen Rand, weisse Abdeckung * darueber, reservierter Platz am Formular (misst order-form.js wie eh und * je). Der "graue Balken mit PA" war die zerquetschte Kopfzeile der Leiste, * nachdem ich ihr erst die Abstaende (2.9.758) und dann die Verankerung * (2.9.770) genommen hatte. * * Was vom heutigen Tag am Handy BLEIBT, weil es unabhaengig davon richtig * ist: die Seite scrollt als Ganzes (kein Kasten im Kasten), der Umschalter * steht im Fluss, die Felder tragen 16 px gegen die Lupe, und kein * JavaScript rollt die Seite von sich aus. * * MERKSATZ: Wenn es einen Stand gibt, der nachweislich funktioniert hat, ist * der Weg dorthin zurueck kein Rueckschritt - sondern die Messlatte. * ------------------------------------------------------------------------ */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-umschalter { position: static !important; z-index: auto !important; box-shadow: none !important; } /* Beim Heranrollen (Sprungziele, Weiter-Taste) unter der festen Leiste anhalten - deren Unterkante wird als --vlt-scan-oben gemessen. */ html { scroll-padding-top: calc(var(--vlt-scan-oben, 100px) + 8px); } } /* ======================================================================== * V2.9.783 - DIE COCKPITLEISTE STEHT WIEDER FEST (RUECKNAHME VON 2.9.778) * ======================================================================== * * Christian: "Jetzt steht meine Cockpit-Buttonleiste nicht mehr fest, wie * auf allen anderen Tool-Seiten." * * In 2.9.778 hatte ich die feste Leiste zum Taeter erklaert und sie am * Handy mitrollen lassen. Die Analyse war unvollstaendig: Die wirklichen * Verursacher des Springens waren die aufklappende KUNDENZEILE (2.9.781) * und die beim ersten Zeichen laenger werdende ENTWURFS-MARKE (2.9.782) - * beide wuchsen mitten im Tippen um eine Zeile und schoben das Formular. * Beide sind beseitigt und im 390-px-Rahmen nachgemessen: erste Eingabe = * 0 px Verschiebung. * * Damit darf die Leiste wieder das tun, was sie auf allen anderen * Tool-Seiten tut: fest oben stehen. Hier stand ein Block, der sie auf * static gesetzt hat - er ist ersatzlos entfallen, es gelten wieder die * Grundregeln (position:fixed, weisse Abdeckung, gemessener Platz am * Formular). * * MERKSATZ: Wer den Taeter zu frueh benennt, laesst ihn laufen - und * verurteilt ein Bauteil, das nur daneben stand. * ===================================================================== */ /* ======================================================================== * V2.9.781 - DIE GRAUE LEISTE WAR DIE KUNDENZEILE * ======================================================================== * * Christian, mit rot markiertem Bild: Die graue Leiste zwischen den * Konto-Knoepfen und der Navigation - "Paulußen, Christian". * * Aufgeloest: Das ist NICHT sein Mitarbeitername, sondern die KUNDENZEILE * (order-form-extras.js, ".vlt-kundenzeile"): Sie zeigt live "Nachname, * Vorname · PLZ Ort" des Kunden, der gerade erfasst wird. Christian hatte * beim Testen sich selbst als Kunden eingetippt - deshalb stand sein Name * darin, und deshalb erschien die Leiste "nach der ersten Eingabe": Sie ist * verborgen, solange die Felder leer sind, und wird mit dem ersten * Buchstaben eingeblendet. * * Am Handy hat sie doppelt gestoert: Sie erscheint MITTEN im Tippen, macht * die Kopfzeile eine Zeile hoeher - und schiebt damit das gesamte Formular * nach unten. Ein Teil des "beim ersten Buchstaben springt es" war also * schlicht diese aufklappende Zeile. * * Am Handy ist sie deshalb aus. Am Schreibtisch bleibt sie: Dort steht sie * in der einen Kopfzeilen-Reihe zwischen Marke und Knoepfen, aendert keine * Hoehe und ist beim Abtippen eines Vertrags wirklich nuetzlich. * * MERKSATZ: Ein Element, das mitten in der Arbeit auftaucht und Platz * einnimmt, ist auf einem kleinen Bildschirm eine Stoerung - auf einem * grossen eine Hilfe. Es darf beides sein, aber nicht am selben Geraet. * ===================================================================== */ @media (max-width: 980px) { .vlt-kundenzeile { display: none !important; } } /* ======================================================================== * V2.9.785 - DIE UMSCHALTER-REIHE SITZT IN DER FESTEN COCKPITLEISTE * ======================================================================== * Christian: "Jetzt ist unser ganzer Funktionsumfang weg mit Eingabemaske, * Vertrag und Liste - da muss ich switchen können." * Der Umschalter (samt Zähler-Zeile) hängt jetzt als letztes Stück in der * festen Leiste - EIN festes Element, alles Wichtige darin. Am Schreibtisch * bleibt er unsichtbar (display:none der Grundregel). * ===================================================================== */ @media (max-width: 980px) { body.vlt-form-scan .vlt-order-sticky .vlt-scan-umschalter { margin: 6px 0 2px; padding: 2px 2px 0; box-shadow: none; } } /* ======================================================================== * V2.9.794 - STATUSZEILE IN DER MINILEISTE + KRÄFTIGE FEHLERRAHMEN * ======================================================================== * * Christian: „Die Felderbezeichnung links setzen, rechts daneben ‚Entwurf – * noch nicht abgesendet' - dann kann da auch die Speichermeldung kommen. * Und wenn die Meldung kommt, müssen die roten Felder sichtbarer werden - * die sind zu filigran." * ===================================================================== */ @media (max-width: 980px) { /* Die Zeile unter den drei Knöpfen: Zähler links, Marke rechts daneben. */ body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { grid-column: auto; flex: 1 1 auto; text-align: left; margin: 2px 4px 2px 6px !important; border-top: 0 !important; padding-top: 2px !important; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein .vlt-restanzeige { text-align: left; width: auto; } body.vlt-form-scan .vlt-scan-umschalter { display: grid; grid-template-columns: 1fr 1fr 1fr; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein, body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-marke--mini { grid-row: 2; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { grid-column: 1; white-space: nowrap; } body.vlt-form-scan .vlt-scan-marke--mini { grid-column: 2 / 4; align-self: center; justify-self: end; margin: 2px 6px 2px 0; padding: 1px 8px; font-size: 11px; line-height: 1.3; max-width: 66%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.vlt-form-scan .vlt-scan-marke--erfolg { background: #e6f4eb !important; color: #00752f !important; border-color: #9ed5b4 !important; } body.vlt-form-scan .vlt-scan-marke--fehler { background: #fdecec !important; color: #b3261e !important; border-color: #e6a5a1 !important; } } /* Die roten Pflichtfeld-Rahmen: kräftig statt filigran. Die Scanansicht überschreibt Feldrahmen mit !important - deshalb hier mit demselben Gewicht dagegen, in ALLEN Bildschirmgrößen. */ body.vlt-form-scan #vlt-order-form .vlt-field .is-error, body.vlt-form-scan #vlt-order-form .vlt-field input.is-error, body.vlt-form-scan #vlt-order-form .vlt-field select.is-error, body.vlt-form-scan #vlt-order-form .vlt-field textarea.is-error, body.vlt-form-scan #vlt-order-form .vlt-required input.is-error { border: 2px solid #d63638 !important; background: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(214, 54, 56, .28) !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome:has(input.is-error) .vlt-aroundhome-toggle { border: 2px solid #d63638 !important; background: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(214, 54, 56, .28) !important; } /* ======================================================================== * V2.9.796 - STATUSZEILE: EINE LINIE, GLEICHE HÖHE, ENGER - UND DIE * ÜBERSCHRIFT „AUFTRAG ERFASSEN" ENTFÄLLT AM HANDY * ======================================================================== * Christian: „Alles in einer Reihe, aber nicht auf selber Höhe - Höhen * abgleichen, Felder enger zusammen. Und die Überschrift ‚Auftrag erfassen' * können wir wegnehmen, die nimmt nur Platz weg." * ===================================================================== */ @media (max-width: 980px) { /* Zähler und Marke in EINEM Flex-Kasten: gleiche Mittellinie, 10 px Abstand. */ body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { grid-column: 1 / 4 !important; display: flex !important; align-items: center; gap: 10px; white-space: nowrap; margin: 3px 6px 3px 6px !important; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein .vlt-restanzeige { flex: 0 0 auto; margin: 0 !important; font-size: 12px !important; line-height: 18px !important; } body.vlt-form-scan .vlt-scan-zaehler--klein .vlt-scan-marke--mini { grid-column: auto; justify-self: auto; align-self: auto; flex: 0 1 auto; margin: 0 !important; padding: 0 8px !important; font-size: 11.5px !important; line-height: 18px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Restliste (Aufklappliste der fehlenden Felder) bleibt volle Breite. */ body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein .vlt-restliste { position: absolute; left: 8px; right: 8px; top: 100%; z-index: 500; background: #fff; border: 1px solid var(--vlt-scan-rand); border-radius: 10px; box-shadow: 0 10px 24px rgba(15,23,42,.14); } body.vlt-form-scan .vlt-scan-umschalter { position: relative; } /* Die Überschrift-Zeile entfällt am Handy komplett - Titel, Kopfzeile, alles. Die Marke sitzt in der Statuszeile, die Knöpfe sowieso. */ body.vlt-form-scan .vlt-scan-kopf { display: none !important; } } /* ======================================================================== * V2.9.803 - DIE DREI UMSCHALT-KNÖPFE IM STIL DER COCKPITLEISTE * ======================================================================== * Christian: „Die Buttons sollen genauso aussehen wie die obere * Cockpitleiste - nur in der Größe, wie sie jetzt sind. Wir halten * mittlerweile alles mit runden Kanten." * * Also: dieselbe Formensprache wie .vlt-mini-nav__item - weiße Pille, * feiner grüner Rand, runde Kanten; der aktive Knopf gefüllt im * HEIM & HAUS Grün mit weißer Schrift. Größen unverändert. * ===================================================================== */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-umschalter { background: transparent; border: 0; gap: 6px; padding: 4px 2px 0; } body.vlt-form-scan .vlt-scan-umschalter__knopf { border: 1px solid #d4e3d8; border-radius: 999px; background: #fff; color: #35543f; font-weight: 700; transition: border-color .15s ease, background .15s ease, color .15s ease; } body.vlt-form-scan .vlt-scan-umschalter__knopf.is-aktiv { border-color: #009039; background: #009039; color: #fff; } } /* V2.9.804: Christian: „Vielleicht noch ein bisschen flacher die Buttons, damit wir ein bisschen mehr Bildschirm haben." Innenhöhe 9 -> 5 px, Schrift minimal kleiner, Statuszeile enger - zusammen rund 14 px Gewinn. */ @media (max-width: 980px) { body.vlt-form-scan .vlt-scan-umschalter { padding: 3px 2px 0; } body.vlt-form-scan .vlt-scan-umschalter__knopf { padding: 5px 8px; font-size: 13px; line-height: 1.3; } body.vlt-form-scan .vlt-scan-umschalter .vlt-scan-zaehler--klein { margin: 2px 6px !important; } } /* ======================================================================== * V2.9.805 - ZWEI EINSTIEGE, ZWEI GESICHTER * ======================================================================== * Christian: „Bei ‚Auftrag erfassen' die drei Buttons rausholen - die * brauchen wir da nicht, die sollen nur bei ‚Auftrag scannen' drin sein. * Zwölf Felder / Entwurf bitte stehen lassen. Und bei ‚Auftrag scannen' die * Wochenmeldung entfernen - die ist nur für die Auftragseingabe." * * body.vlt-scan-modus wird gesetzt, wenn die Maske über den Knopf * „Auftrag scannen" (?vlt_scan=1) geöffnet wurde. * ===================================================================== */ /* Auftrag ERFASSEN (ohne Scan-Kennung): keine Umschalt-Knöpfe - die Statuszeile (Zähler + Entwurfs-Marke) bleibt stehen. */ body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-umschalter__knopf { display: none !important; } @media (max-width: 980px) { body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-umschalter { padding-top: 0; } } /* Auftrag SCANNEN: die gelbe Wochenmeldung entfällt - sie gehört zur Auftragseingabe, nicht zum Scannen. */ body.vlt-scan-modus .vlt-order-hint { display: none !important; } /* ======================================================================== * V2.9.808: Gewähltes NEIN färbt die Rinne dunkel - auch in dieser Ansicht. * Die Grundregel oben (Zeile ~1891) setzt die Rinne pauschal blassgrau mit * höherer Spezifität als order-form.css; ohne diese Zeilen bliebe ein * gewähltes Nein vom unberührten Schalter nicht zu unterscheiden. * ======================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome-toggle.is-nein { background: #5b6862 !important; border: 1px solid #4c5a53 !important; } /* ======================================================================== * V2.9.809: Der breite Zwei-Felder-Schalter (Pille) - Fassung fuer die * Scanansicht. Die Grundregeln stehen in order-form.css; hier noch einmal * mit body.vlt-form-scan davor, weil diese Datei den Schalter weiter oben * pauschal auf 56 px festnagelt und das Marken-Inline-CSS die ganze Rinne * gruen faerben wuerde (die Farbe gehoert jetzt dem Schieber allein). * ======================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle { width: 128px !important; min-width: 128px !important; height: 34px !important; border-radius: 999px !important; background: #eef1f5 !important; border: 1px solid #cbd2d9 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen, body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein, body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja { background: #eef1f5 !important; border: 1px solid #cbd2d9 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein::after { opacity: 1; background: #5b6862; transform: none; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after { opacity: 1; background: #009039; transform: translateX(calc(100% + 4px)); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label { width: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label span:last-child { display: inline !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; color: #66727b !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein label:last-child span:last-child, body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein label:has(input[value="Nein"]) span:last-child { color: #ffffff !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja label:first-child span:last-child, body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja label:has(input[value="Ja"]) span:last-child { color: #ffffff !important; } /* ======================================================================== * V2.9.810: Die fahrende Pille, breiter - Fassung fuer die Scanansicht * (schlaegt die 56px-Regel oben und haelt die Rinnenfarben durch). * ======================================================================== */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle { width: 96px !important; min-width: 96px !important; height: 34px !important; border-radius: 999px !important; background: #e4e8ec !important; border: 1px solid #cbd2d9 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen { background: #e4e8ec !important; border: 1px solid #cbd2d9 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein { background: #5b6862 !important; border: 1px solid #4c5a53 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja { background: #009039 !important; border: 1px solid #009039 !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-nein::after { background: #ffffff; opacity: 1; transform: none; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after { background: #ffffff; opacity: 1; transform: translateX(48px); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle label span:last-child { display: none !important; } /* V2.9.811: Mittelstellung der Pille im offenen Zustand - siehe order-form.css. */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after { transform: translateX(24px); } /* V2.9.812: kleinere Rinne, duenner Mittelstrich im offenen Zustand. */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle { width: 86px !important; min-width: 86px !important; height: 30px !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after { transform: translateX(42px); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after { width: 20px; height: 8px; top: 10px; background: #c3ccd3; box-shadow: none; transform: translateX(29px); } /* V2.9.813: Rinne wieder 96x34, Mitte = senkrechter Griff (12x26). */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle { width: 96px !important; min-width: 96px !important; height: 34px !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after { transform: translateX(48px); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after { width: 12px; height: 26px; top: 3px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transform: translateX(38px); } /* V2.9.814: kompaktere Rinne 84x28, Pille 34x20, Griff 10x20. */ body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle { width: 84px !important; min-width: 84px !important; height: 28px !important; } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-ja::after { transform: translateX(42px); } body.vlt-form-scan #vlt-order-form .vlt-aroundhome .vlt-aroundhome-toggle.is-offen::after { width: 10px; height: 20px; top: 3px; transform: translateX(33px); } /* VLT-ERFASSUNG-OHNE-SCAN-ANFANG * 17.08. - Christian: "Bei der Auftragserfassung gibt es nichts zum Eingeben. * Die Grafik erscheint zwar, aber rechts ist sie abgeschnitten." Gemeldet von * Dietmar Wolf, am Desktop nachgestellt und gemessen: * * .vlt-scan-spalte--maske -> Hoehe 119px, overflow-y: auto * das Formular darin -> 1880px hoch * * Das Formular sass also in einem 119 Pixel hohen Guckloch. Ursache: die * Zwei-Spalten-Buehne des Scans (feste Rasterhoehe, jede Spalte rollt fuer * sich) gilt auch dann, wenn gar nicht gescannt wird - der Schalter dafuer * ist die Body-Klasse .vlt-scan-modus, und die gibt es nur mit ?vlt_scan=1. * * Ohne Scan-Modus laeuft die Erfassung deshalb wieder in normaler Seitenlaenge: * keine feste Hoehe, kein eigenes Rollfeld, nichts abgeschnitten. */ body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-raster { height: auto !important; max-height: none !important; } body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte, body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte--maske, body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-raster > .vlt-scan-spalte { height: auto !important; max-height: none !important; overflow: visible !important; } /* VLT-ERFASSUNG-OHNE-SCAN-ENDE */ /* VLT-ERFASSUNG-OHNE-SCAN-2 * 17.08. - Zweiter Schliff nach dem Messen: ohne Scan-Modus liegt die * Eingabemaske jetzt LINKS und breit, die Vertragsflaeche rechts daneben als * schmalere Spalte - so, wie Christian es fuer den Desktop beschrieben hat * ("bei Auftrag erfassen gibt es rechts noch die Scanvorlage"). Vorher stand * die Maske rechts in einer 528px-Spalte und lief rechts aus dem Bild. */ body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-raster { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr) !important; align-items: start; gap: 20px; } body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte--maske { grid-column: 1 !important; order: 1; } body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte--doku { grid-column: 2 !important; order: 2; position: sticky; top: 96px; } body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-leiste { grid-column: 1 / -1 !important; order: 0; } @media (max-width: 1100px) { body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-raster { grid-template-columns: minmax(0, 1fr) !important; } body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte--maske, body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-spalte--doku, body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-leiste { grid-column: 1 !important; position: static; } } /* VLT-ERFASSUNG-OHNE-SCAN-2-ENDE */ /* VLT-E2-AUFTRAG */ /* Nachgemessen: die Regel body.vlt-form-scan:not(.vlt-scan-modus) .vlt-scan-raster setzt die Spalten mit !important und hat drei Klassen - sie schlug meine mit zwei. Gemessen kamen 644 | 416 | 440 heraus statt 160 | Formular | Vorschau. Deshalb traegt hier jeder Selektor zusaetzlich body.vlt-form-scan. */ /* 18.08. - Nur in Christians Testumgebung (body.vlt-e2-test, siehe VLT-E2-TESTMODUS in vl-limburg-tool.php). Ohne diese Klasse bleibt fuer die Mitarbeiter alles unveraendert. Bisher lag der Sprungnavigator als breiter Block ueber der ganzen Seite, das Formular fing erst darunter an. Christian will ihn als schmale Leiste LINKS neben dem Formular. Das Raster bekommt dafuer eine dritte Spalte. Gemessen vorher: Raster zweispaltig 815 | 525 mit 20px Abstand, die Leiste ueber beide Spalten, 1360 breit und 522 hoch. */ @media (min-width: 901px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-raster { /* 18.08. - Christian: die Karte wird halbiert. Links die Erfassung, rechts der komplette Auftrag - beide gleich breit. Die Leiste ganz links hat damit nichts zu tun, sie steht weiterhin ausserhalb der Karte. Gemessen vorher: 815 zu 525. Jetzt je (1360 - 20 Abstand) / 2 = 670. */ /* 18.08. - Christian: die Leiste schmaler und direkt an die linke Karte. Statt 140 jetzt 100 breit, und der Spaltenabstand von 20 auf 10 - damit stehen die Ziffern 1 bis 4 unmittelbar neben der Erfassungskarte. */ /* 18.08. - Die Leiste darf nach LINKS breiter werden, damit die Beschriftungen Platz haben. Die rechte Kante bleibt an der Karte. */ grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 10px !important; align-items: start !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-leiste { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; /* Die feste Kopfleiste der Seite endet bei 200 - darunter bleibt die Leiste beim Blaettern stehen. */ position: sticky !important; top: 212px !important; align-self: start !important; /* Noch dichter an die Karte: der negative Rand rechts laesst die Leiste um 6px breiter werden, ohne die Erfassung zu verschieben - die beginnt weiterhin bei 184. Uebrig bleiben 4px Luft. */ margin-right: -6px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--maske { grid-column: 2 !important; grid-row: 1 !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--doku { grid-column: 3 !important; grid-row: 1 !important; /* Auf Hoehe der ersten Karte links. Gemessen: der Tastatur-Schalter darueber ist 66 hoch und haelt 14 Abstand nach unten - die erste Karte beginnt also 80px tiefer als die Spalte. */ margin-top: 80px !important; /* Der Auftrag soll immer ganz zu sehen sein, auch waehrend links geblaettert wird. Die feste Kopfleiste der Seite endet gemessen bei 195. */ position: sticky !important; /* 18.08. - Ueber der Karte bleibt jetzt die Zeile mit Abbrechen und Absenden stehen. Gemessen: Kopfleiste endet bei 195, die Zeile ist 56 hoch - die Karte beginnt also bei 261. */ top: 261px !important; align-self: start !important; } /* Abbrechen und Absenden wandern beim Blaettern mit. Sie sitzen in der Zeile ueber der rechten Karte und bleiben unter der festen Kopfleiste stehen. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf { position: sticky !important; top: 195px !important; z-index: 40 !important; background: #ffffff !important; /* 18.08. - Die weisse Leiste steht nur noch ueber der rechten Karte. Die Karte ist (Gesamtbreite minus 10 Luecke) geteilt durch 2 breit - daher diese Rechnung. margin-left auto schiebt sie nach rechts. */ width: calc((100% - 10px) / 2) !important; margin-left: auto !important; margin-right: 0 !important; border-radius: 14px !important; } /* Die Buehne im DIN-A4-Verhaeltnis, aber in der Hoehe auf das Fenster begrenzt - sonst waere die Karte hoeher als der Schirm und nie ganz sichtbar. Gemessen: Fenster 941 hoch, Kopfleiste bis 195, Kartenkopf 63, Werkzeugleiste 73 - bleiben rund 540 fuer das Blatt. Die Breite ergibt sich aus A4. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-doku__buehne { aspect-ratio: 210 / 297 !important; /* Nachgemessen: mit 400 lief die Karte von 337 bis 1015 bei 941 Fensterhoehe - die Werkzeugleiste unten war abgeschnitten. Karte ohne Blatt misst 137, oben stehen 337 - bleiben 467 fuer das Blatt. */ /* 54px mehr Abzug, weil die Karte jetzt 54px tiefer beginnt (261 statt 207). */ height: calc(100vh - 534px) !important; min-height: 320px !important; max-height: none !important; width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Das Schliesskreuz sitzt in der HEIM & HAUS Leiste, direkt links neben dem Personenknopf - dort ist es fuer die Mitarbeiter am schnellsten zu finden. */ body.vlt-form-scan.vlt-e2-test .vlt-e2-schliessen { position: relative !important; margin-right: 10px !important; vertical-align: middle !important; width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(20, 63, 40, .18) !important; background: #ffffff !important; color: #14311f !important; cursor: pointer !important; padding: 0 !important; z-index: 70 !important; box-shadow: 0 2px 8px rgba(20, 63, 40, .14) !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-schliessen svg { width: 22px !important; height: 22px !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-schliessen:hover { background: #f4f7f5 !important; } /* Die Schritte waren auf die volle Seitenbreite gezeichnet. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-leiste .vlt-scan-schritt { width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; } /* Bei 100px Breite brauchen die Beschriftungen etwas kleinere Schrift. */ /* Christian: die Ziffer soll mittig ueber ihrer Beschriftung stehen, und der Block insgesamt direkt an der Karte. Deshalb Ziffer und Text als Spalte mittig untereinander; der Text darf nach links ueberstehen. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-leiste .vlt-scan-schritt { font-size: 12px !important; line-height: 1.25 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; gap: 4px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-leiste .vlt-restanzeige-wrap { width: auto !important; max-width: none !important; } } /* Ab 1620px Fensterbreite ist links neben der Karte genug Rand: dann rutscht die Leiste aus der Karte heraus, damit Formular und Vorschau ihre volle Breite behalten. Darunter teilt sie sich den Platz mit. */ @media (min-width: 1620px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-raster { /* Gemessen: mit 180 stand die Leiste bei x=4, also hart am Fensterrand. Mit 140 Breite und 160 Versatz steht sie bei 24 und haelt 20px Abstand nach beiden Seiten. Formular (184-999) und Vorschau (1019-1544) bleiben auf ihren bisherigen Massen. */ /* Versatz = Leistenbreite 100 + Spaltenabstand 10. So beginnt die Erfassung weiterhin genau bei 184, die Leiste steht davor. */ /* Versatz = Leistenbreite 160 + Spaltenabstand 10. Die Erfassung beginnt weiterhin genau bei 184. */ width: calc(100% + 170px) !important; margin-left: -170px !important; } } /* 18.08. - Kopfbereich wie in der Web-App: die Knopfreihe oben faellt weg, die HEIM & HAUS Zeile wird zur Bannerkarte, darunter die Ueberschrift der Seite. Gilt kuenftig fuer alle Seiten des Umbaus. */ @media (min-width: 901px) { /* Die Knopfreihe Cockpit / Auftrag erfassen / ... entfaellt. */ body.vlt-form-scan.vlt-e2-test .vlt-mini-nav-wrap { display: none !important; } /* Die Zeile mit HH-Zeichen, VL LIMBURG und Konto wird zur Bannerkarte - gleiche Machart wie die Karten im Cockpit. */ body.vlt-form-scan.vlt-e2-test .vlt-order-form__topbar { background: #ffffff !important; border-radius: 16px !important; /* 18.08. - Gleiche Innenabstaende wie der Cockpit-Kopf, damit das Logo auf allen Seiten an derselben Stelle steht: gemessen Logo 220/97. */ padding: 7px 24px 11px !important; height: 74px !important; align-items: center !important; box-sizing: border-box !important; box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, .75), 2px 2px 0 0 #f0f3f1, 4px 4px 0 0 #d4dbd5, 7px 8px 11px rgba(24, 49, 32, .17) !important; /* 18.08. - Ohne gruene Klammer: der HEIM & HAUS Banner im Cockpit hat auch keine. */ border-left: 0 !important; } /* Im Banner steht jetzt die Ueberschrift der Seite statt VL LIMBURG (gesetzt von VLT-E2-KOPFTITEL in order-form-scan.js). Sie bekommt die Groesse einer Seitenueberschrift. */ /* 18.08. - Christian: alles auf Cockpit-Mass. Dort gemessen: Schrift 16,8px, Staerke 700, Logo 42 breit. */ /* 18.08. - Alles unter dem Banner steht auf derselben Kante wie der Banner: 1336 breit, 196 bis 1532. Die Sprungleiste bleibt links ausserhalb, sie haengt am Raster mit seinem negativen Rand. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-huelle { max-width: 1336px !important; margin-left: auto !important; margin-right: auto !important; } body.vlt-form-scan.vlt-e2-test .vlt-order-form__brand { gap: 10px !important; } body.vlt-form-scan.vlt-e2-test .vlt-order-form__topbar img { width: 42px !important; height: auto !important; } body.vlt-form-scan.vlt-e2-test .vlt-order-form__brandname { font-size: 16.8px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #14311f !important; text-transform: none !important; } /* Die alte Ueberschrift im Seitenkopf entfaellt - sie stuende sonst doppelt. Der Entwurfs-Hinweis und die Knoepfe bleiben. */ body.vlt-form-scan.vlt-e2-test .vlt-e2-titel-aus { display: none !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf { padding-top: 6px !important; } } /* 18.08. - Kontobereich wie im Cockpit-Banner: ein runder Knopf mit Personenzeichen, dahinter klappt das Feld mit Mein Konto, Passwort aendern und Abmelden auf. Aufgebaut von VLT-E2-KONTO in order-form-scan.js. */ @media (min-width: 901px) { body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-alt { display: none !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto { position: relative !important; display: inline-flex !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-knopf { width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(20, 63, 40, .18) !important; background: #ffffff !important; color: #14311f !important; cursor: pointer !important; padding: 0 !important; box-shadow: 0 1px 4px rgba(20, 63, 40, .10) !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-knopf svg { width: 24px !important; height: 24px !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-feld { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; min-width: 210px !important; display: none !important; flex-direction: column !important; background: #ffffff !important; border-radius: 14px !important; padding: 6px !important; box-shadow: 0 10px 26px rgba(20, 45, 29, .18) !important; border: 1px solid rgba(20, 63, 40, .10) !important; z-index: 60 !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto.ist-offen .vlt-e2-konto-feld { display: flex !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-feld a { display: block !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; color: #14311f !important; text-decoration: none !important; white-space: nowrap !important; } body.vlt-form-scan.vlt-e2-test .vlt-e2-konto-feld a:hover { background: rgba(20, 63, 40, .06) !important; } } /* 18.08. - Christian: um Aroundhome-Auftrag und Abweichende Lieferanschrift einen filigranen blauen Rahmen. Beide sind im Quelltext dasselbe Bauteil (fieldset.vlt-aroundhome), die Lieferanschrift traegt zusaetzlich .vlt-delivery-choice - eine Regel genuegt also fuer beide. */ @media (min-width: 901px) { body.vlt-form-scan.vlt-e2-test fieldset.vlt-aroundhome { border: 1px solid rgba(37, 99, 235, .45) !important; border-radius: 12px !important; padding: 10px 12px !important; background: rgba(37, 99, 235, .03) !important; box-sizing: border-box !important; /* Gemessen: beide Kaesten waren 191 breit, aber "Abweichende Lieferanschrift" brach auf zwei Zeilen um - 96 hoch statt 79 wie Aroundhome. Die Kaesten duerfen sich jetzt nach ihrer Beschriftung richten; im Elter ist mit 609 bzw. 667 Breite reichlich Platz. */ width: fit-content !important; max-width: 100% !important; } /* Nachgesehen: die Beschriftung ist eine legend und sitzt sonst quer auf der oberen Rahmenkante - bei zwei Zeilen stand die halbe Zeile ausserhalb. Als eigene Zeile im Kasten steht sie sauber innerhalb. */ body.vlt-form-scan.vlt-e2-test fieldset.vlt-aroundhome > legend { float: left !important; width: 100% !important; margin: 0 !important; padding: 0 0 6px !important; white-space: nowrap !important; } body.vlt-form-scan.vlt-e2-test fieldset.vlt-aroundhome > legend + * { clear: both !important; } } /* 18.08. - Das Loeschkreuz an der PLZ ist im Bestand bewusst ausgeblendet (Regel body.vlt-form-elegant.vlt-form-scan ... :has(#vlt-postcode)). In der Testumgebung wird es wieder eingeschaltet - Christian raeumt darueber Ort, Strasse und Hausnummer in einem Rutsch weg. Eine Klasse mehr als die Bestandsregel, sonst gewinnt die. */ @media (min-width: 901px) { body.vlt-form-elegant.vlt-form-scan.vlt-e2-test #vlt-order-form .vlt-clear-wrap:has(#vlt-postcode) .vlt-clear-field { display: block !important; } } /* 18.08. - Am Rechner keine eigene Bildschirmtastatur, also braucht es auch den Umschalter nicht. Nur bei Mauszeiger - auf Tabletts bleibt beides. Das Zuhalten der Tastatur selbst macht VLT-E2-KEINE-TASTATUR im JavaScript. */ @media (min-width: 901px) and (pointer: fine) { body.vlt-form-scan.vlt-e2-test .vlt-tastatur-schalter { display: none !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--doku { /* Ohne den Schalter beginnt die erste Karte links weiter oben. */ margin-top: 0 !important; } } /* VLT-E2-AUFTRAG-ENDE */ /* ========================================================== VLT-E2-AUFTRAG-IPADQUER 19.08. - Christian: "Auftrag erfassen im iPad Querformat passt noch nicht." Gemessen auf dem iPad Air quer (1180 x 796): die Zeile mit "Entwurf - noch nicht abgesendet", Abbrechen und Absenden ist dort nicht 56 hoch wie auf dem Rechner, sondern 103 - sie bricht um, weil die rechte Spalte nur 446 breit ist. Die Karte "Gescannter Auftrag" haengt aber fest bei 261, gerechnet mit 56. Beim Blaettern schob sich die Zeile deshalb 37px ueber die Karte und verdeckte deren Ueberschrift. Ab 1210px Breite passt die Zeile wieder in eine Zeile (gemessen: 56). Deshalb nur unterhalb 1201px tiefer ansetzen: 195 Kopfleiste + 103 Zeile + 12 Luft = 310. ========================================================== */ @media (max-width: 1200px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--doku { top: 310px !important; } } /* ========================================================== VLT-E2-AUFTRAG-MASKE-SCHMAL 19.08. - "Die Jumperleiste in Auftrag erfassen bitte viel kleiner gestalten, so haben wir mehr Platz." Zusammen mit dem Befund, dass die Maske ueberall zu breit fuer ihre Spalte war (ungerechnet 649px). Schrittleiste 160 -> 64: Kreise 36 -> 28, Beschriftung 12 -> 9. Die Namen bleiben lesbar ("Kunde & Adresse" bricht auf zwei Zeilen um), nichts ragt aus der Leiste heraus. Das gibt beiden Spalten je 48px dazu, auf jedem Geraet. Was dann noch fehlt, holt ein Faktor. Gemessen wurde die Zahl der Teile, die rechts aus der Maskenspalte ragen: 1180 breit (iPad Air quer): Spalte 498 0.78 -> 11 Teile, 0.76 -> nichts 1210 breit (iPad Pro 11 quer): Spalte 513 0.82 -> nichts, 0.80 -> nichts 1376 breit (iPad Pro 13 quer): Spalte 586 0.92 -> nichts 1600 breit (Rechner): Spalte 626 1.00 -> 44 Teile, noetig 0.96 Ab 1451px ist das Raster bei 1336 gedeckelt, die Spalte bleibt also 626 - deshalb gilt dort ein fester Faktor, egal wie breit der Bildschirm ist. Die Staffel nimmt jeweils den Wert, der auch am unteren Rand des Bandes noch passt. ========================================================== */ body.vlt-form-scan.vlt-e2-test .vlt-scan-raster { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-schritt__nr { width: 28px !important; height: 28px !important; font-size: 12px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-schritt__text { font-size: 9px !important; line-height: 1.15 !important; } body.vlt-form-scan.vlt-e2-test .vlt-restanzeige-wrap { font-size: 9px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-field { min-width: 0 !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-street-split, body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-count-boxes, body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-count-more, body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-contract-row { flex-wrap: wrap !important; } @media (max-width: 1200px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske { zoom: .74; } /* Beide Spalten gleich breit. Ohne grid-auto-columns bekommt die zweite Spalte (sie entsteht implizit, weil einzelne Felder ueber "1 / -1" oder "1 / span 2" zwei Spalten verlangen) die Breite "auto" und richtet sich nach dem Inhalt - dann war Kundenname breiter als Kundenvorname, je nach Geraet bis zu 84 Pixel. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske .vlt-order-grid { grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: minmax(0, 1fr) !important; } /* Breite Bausteine an die schmale Maskenspalte binden. In order-form-elegant.css bekommen diese Elemente width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important - also die volle Breite von zwei Desktop-Spalten. In der geteilten Ansicht ist die Maskenspalte aber schmaler, deshalb ragten "+ Mehr Auftraege", die Auftragszeile und das Bemerkungsfeld nach rechts unter die zweite Bildschirmhaelfte. Der Selektor braucht #vlt-order-form, sonst verliert er trotz !important gegen die Regel aus order-form-elegant.css. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form .vlt-order-count-boxes-wrap, body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form .vlt-contract-row:not([hidden]), body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form textarea, body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form .vlt-field:has(> textarea), body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form .vlt-field:has(> .vlt-clear-wrap > textarea) { width: 100% !important; max-width: 100% !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske #vlt-order-form .vlt-contract-row:not([hidden]) { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) minmax(0, 1fr) !important; } } @media (min-width: 1201px) and (max-width: 1300px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske { zoom: .76; } } @media (min-width: 1301px) and (max-width: 1450px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske { zoom: .83; } } @media (min-width: 1451px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-spalte--maske { zoom: .94; } } /* ============================================================ VLT-AUFTRAG-QUER-KOPF (19.08.) Telefone im Querformat bekommen auf "Auftrag erfassen" denselben Kopf wie hochkant: HEIM & HAUS Banner mit Titel, grossem X und einem Abmeldeknopf. Der alte Streifen mit "Mein Konto" und "Abmelden" faellt weg; an seine Stelle setzt das Banner-Skript den Banner (vl-limburg-tool.php, Funktion vlt_e2_banner_ausgeben). Nur breit UND sehr flach - iPad quer und Rechner bleiben, wie sie sind, hochkant ebenso. ============================================================ */ @media (min-width: 761px) and (max-width: 1000px) and (max-height: 560px) { html body .vlt-order-form__topbar { display: none !important; } /* Der Banner steht fest bei 76 und ist 74 hoch - alles darunter rueckt um 80 Pixel nach unten, damit nichts uebereinander liegt. Die kurzen Selektoren verlieren gegen den Bestand, darum body-Klasse. */ html body .vlt-e2-banner { z-index: 950 !important; } /* 19.08. - Oberkante plus Bannerhoehe 30 plus 6 Abstand. --vlt-oben misst das Werkzeug selbst, damit es auch ohne Testband stimmt. */ html body.vlt-form-scan .vlt-order-sticky { top: calc(var(--vlt-oben, 67px) + 36px) !important; } html body.vlt-form-scan .vlt-e2-bannerplatz { padding-top: 115px !important; } /* 19.08. - die feste Kopfzeile war 107 hoch, davon rund 32 nur Luft um den Hinweis und die Zeile "12 Felder fehlen". Jetzt 75. */ html body.vlt-form-scan .vlt-order-sticky { padding-top: 4px !important; padding-bottom: 2px !important; } html body.vlt-form-scan .vlt-order-sticky .vlt-order-hint { margin-top: 2px !important; margin-bottom: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; } html body.vlt-form-scan .vlt-order-sticky .vlt-scan-umschalter { margin-top: 2px !important; margin-bottom: 0 !important; } /* 19.08. - ab 901 Pixel Breite blendet der Bestand die hohe Schrittleiste ein (vier Stufen a 100 Pixel, klebend). Auf einem Telefon im Querformat liegt sie ueber den Feldern. Unter 901 ist sie aus - hier genauso. */ html body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-leiste, html body.vlt-form-scan .vlt-scan-huelle .vlt-scan-raster > .vlt-scan-leiste { display: none !important; } /* 19.08. - Christian: "Bei Auftrag Erfassen soll im Querformat immer der geteilte Bildschirm stehen - links das Formular, rechts Blatt 2 mit dem gescannten Auftrag." Hochkant bleibt es beim Formular allein. Zwei Spalten statt drei: die Schrittleiste ist hier aus, ihre 64er Spalte faellt damit weg. */ html body.vlt-form-scan.vlt-e2-test .vlt-scan-huelle .vlt-scan-raster, html body.vlt-form-scan .vlt-scan-huelle .vlt-order-shell .vlt-scan-raster { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: start !important; } html body.vlt-form-scan.vlt-e2-test .vlt-scan-huelle .vlt-scan-raster > .vlt-scan-spalte--maske { grid-column: 1 !important; min-width: 0 !important; } html body.vlt-form-scan.vlt-e2-test .vlt-scan-huelle .vlt-scan-raster > .vlt-scan-spalte--doku { display: block !important; grid-column: 2 !important; position: sticky !important; top: 185px !important; min-width: 0 !important; } } /* ============================================================ VLT-AUFTRAG-HOCH-KOPFZEILE (19.08.) Dieselbe Straffung wie im Querformat, jetzt auch hochkant: der Streifen mit dem Hinweis und "12 Felder fehlen" war 154 hoch, davon rund 24 nur Luft. Jetzt 130. Der Kopf mit Logo und Titel bleibt unveraendert, nur die Abstaende gehen raus. .vlt-scan-huelle haelt den Inhalt frei - dort dieselben 24 weniger. ============================================================ */ @media (max-width: 760px) { html body.vlt-form-scan .vlt-order-sticky { padding-bottom: 2px !important; } html body.vlt-form-scan .vlt-order-sticky .vlt-order-hint { margin-top: 2px !important; margin-bottom: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; } html body.vlt-form-scan .vlt-order-sticky .vlt-scan-umschalter { margin-top: 2px !important; margin-bottom: 0 !important; } /* 19.08. zweiter Durchgang - Christian zeigte die Zeile "12 Felder fehlen" im Hochformat: darum herum stand immer noch Luft. Jetzt eng. */ html body.vlt-form-scan .vlt-order-sticky { padding-top: 2px !important; } /* 20.08. - Der Kopf bleibt wie ueberall sonst hochkant: keine eigenen Polster mehr, damit die weisse Karte ueberall gleich hoch ist. */ html body.vlt-form-scan .vlt-order-sticky .vlt-scan-umschalter { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.1 !important; } html body.vlt-form-scan .vlt-order-sticky .vlt-restanzeige-wrap { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 20.08. - Auf der Auftragsseite fehlten dem Kopf die 6 Pixel Polster, die er auf allen anderen Seiten hat - dadurch war die weisse Karte 56 statt 68 hoch. Hier wieder gesetzt. */ html body.vlt-form-scan #vlt-auftrag-kopf { padding-top: 6px !important; padding-bottom: 6px !important; } html body.vlt-form-scan .vlt-order-shell.vlt-scan-huelle { padding-top: 91px !important; } } /* ================ VLT-DESKTOP-BLATTBREITE (20.08.) Christian: "Auf der linken Seite ist rechts hinter den Eingabezellen noch sehr viel weisser Space. Bitte so kuerzen, dass der Abstand genauso ist wie links von der Karte zur ersten Zelle. Die zweite Seite entsprechend schmaler. Und den HEIM & HAUS Banner genau auf die Breite der beiden Karten ziehen - die Jumperleiste ist unabhaengig." Gemessen im echten Desktop-Fenster (1920 breit): linke Karte 196 bis 907, also 711 breit erste Zelle beginnt bei 222,9 -> Abstand links 26,9 letzte Zelle endet bei 805,9 -> Abstand rechts 101,1 Die Zellen sind fest so breit, die Spalte war einfach zu breit. Mit 637 Pixel je Spalte: Abstand links 26,9 und rechts 27,1. Die beiden Karten stehen dann von 196 bis 1480, zusammen 1284 breit. Genau diese 1284 bekommt der Banner, verschoben um -96 gegenueber seinem Kasten. Die Jumperleiste bleibt die erste Spalte mit 64 Pixel und wird nicht angefasst. Erst ab 1440 Pixel Fensterbreite, weil erst dann die Huelle ihre volle Breite von 1336 erreicht und die Zahlen stimmen. Telefone und Tablets bleiben unveraendert. ================ */ @media (min-width: 1440px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-raster { grid-template-columns: 64px 637px 637px !important; } /* Die beiden Karten mittig im Fenster. Die Huelle ist bereits mittig und 1336 breit; die Karten sind zusammen 1284 breit, also 26 Pixel Rand links. Das Raster steht 74 Pixel weiter links (Jumperleiste 64 plus 10 Abstand), daher -48 statt -170. Die Jumperleiste haengt dadurch links an den Karten. */ body.vlt-form-scan.vlt-e2-test .vlt-order-shell .vlt-scan-raster { margin-left: -48px !important; } /* Der weisse Streifen ganz oben (er traegt Banner und Hinweis) war 1360 breit und stand links und rechts ueber die Karten hinaus. Jetzt genau so breit wie die beiden Karten: 1284, ohne seitliches Polster. Der Banner sitzt dann ohne Versatz darin, der gelbe Hinweis darunter ebenfalls. */ body.vlt-form-scan.vlt-e2-test .vlt-order-sticky { width: 1284px !important; max-width: 1284px !important; padding-left: 0 !important; padding-right: 0 !important; } body.vlt-form-scan.vlt-e2-test .vlt-order-sticky .vlt-order-form__topbar { width: 1284px !important; max-width: 1284px !important; margin-left: 0 !important; } /* Die Leiste mit "Entwurf - noch nicht abgesendet", Abbrechen und Absenden genau ueber die rechte Karte: 26 + 637 + 10 = 673. */ body.vlt-form-scan.vlt-e2-test .vlt-order-shell > .vlt-scan-kopf { width: 637px !important; max-width: 637px !important; margin-left: 673px !important; } } /* ================================================ VLT-DESKTOP-ZWEITE-KARTE (20.08.) Christian: "Die gescannte Auftragskarte, die zweite Karte rechts, soll genau parallel mit der Karte Kunde & Adresse auf eine Hoehe kommen und unten genauso den Abschluss haben. Entwurf/Abbrechen/Absenden ein bisschen hoeher, oben aufs graue Feld, genau zwischen Heim-und-Haus- Banner und der zweiten Karte." Gemessen vorher, Fenster 1920 breit: Karte Kunde & Adresse Oberkante 256, Unterkante 886 (630 hoch) Gescannter Auftrag Oberkante 261, Unterkante 847 (586 hoch) Zeile Entwurf/Absenden Kasten 200-256, Knoepfe 206-246 Die rechte Karte sass also 5 Pixel tiefer und endete 39 Pixel zu frueh. 1. Der Klebepunkt der rechten Spalte stand fest auf 261 und zog die Karte schon am Seitenanfang nach unten. 251 ist die Unterkante der Entwurfszeile im geklebten Zustand - damit steht die Karte am Anfang frei auf 256 (also gleichauf mit links) und rutscht beim Blaettern trotzdem sauber unter die Zeile. 2. Die Kartenhoehe kommt aus --vlt-scan-karte1. Die setzt order-form-scan.js aus der wirklichen Hoehe der ersten Karte links, damit es auch stimmt, wenn dort Felder auf- oder zuklappen. 3. Die Knopfzeile sitzt 6 Pixel hoeher im selben Kasten (Innenabstand oben 0 statt 6, unten 16 statt 10). Der Kasten bleibt 56 hoch, es verschiebt sich also nichts darunter. ================================================ */ @media (min-width: 1440px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--doku { top: calc(var(--vlt-scan-oben, 194px) + 11px + var(--vlt-scan-kopf-h, 40px) + 11px) !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-doku { height: var(--vlt-scan-karte1, auto) !important; } /* 20.08. Nachtrag - Christian: "genau in die Mitte zwischen Heim-und- Haus-Banner und der zweiten Karte." Gemessen: der weisse Block oben endet bei 194, Karte 2 beginnt bei 256 - Luecke 62. Die Knopfzeile ist 40 hoch, es bleiben 22, also 11 oben und 11 unten. Ueber dem Kasten stehen schon 6 Pixel Abstand, deshalb 5 Innenabstand oben und 11 unten. Der Kasten bleibt 56 hoch, darunter verschiebt sich nichts. Faellt der gelbe Hinweis weg, wandert der Kasten mit - die 11 Pixel bleiben oben und unten gleich. */ /* 20.08. Nachtrag 2 - Christian schickt ein Bild: die weisse Leiste klebt an Karte 2, an einer Stelle liegt sie sogar darueber. Ursache: die Leiste hatte einen weissen Kasten mit Innenabstand - der reichte bis genau an die Kartenkante (200 bis 256, Karte ab 256). Und ihr Klebepunkt stand fest auf 195, waehrend der Klebepunkt der Karte mitrechnete - laufen die beiden auseinander, schiebt sich die Leiste ueber die Karte. Jetzt: der weisse Kasten umschliesst nur noch die Knoepfe (40 hoch), der Abstand steht als Aussenabstand davor und dahinter - 11 oben, 11 unten. Beide Klebepunkte rechnen aus derselben Zahl, sie koennen also nicht mehr auseinanderlaufen. Gemessen: weisser Block endet 194, Karte 2 beginnt 256, Luecke 62, Knoepfe 40 - bleiben 11 und 11. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf { top: calc(var(--vlt-scan-oben, 194px) + 11px) !important; padding: 0 !important; /* 5 statt 11: ueber dem Kasten stehen schon 6 Pixel aus dem Fluss. */ margin-top: 5px !important; margin-bottom: 11px !important; } /* 20.08. - Christian: "den grauen Hintergrund hinter den Karten auf die Breite des HEIM & HAUS Banners anpassen." Gemessen: grauer Kasten 292 bis 1628 (1336 breit), Banner 318 bis 1602 (1284 breit) - der Kasten stand also links und rechts 26 Pixel ueber. Wird der Kasten schmaler, wandert das Raster darin mit. Damit die Karten trotzdem genau auf 318 und 965 stehen bleiben, geht der Aussenabstand des Rasters von -48 auf -74. Die Jumperleiste steht dann ganz links neben dem grauen Feld - sie war ohnehin unabhaengig davon. */ body.vlt-form-scan.vlt-e2-test .vlt-order-shell { width: 1284px !important; max-width: 1284px !important; margin-left: auto !important; margin-right: auto !important; } body.vlt-form-scan.vlt-e2-test .vlt-order-shell .vlt-scan-raster { margin-left: -74px !important; } /* Die Knopfleiste haengt am linken Rand des grauen Kastens (673). Der ist um 26 nach rechts gewandert, also 647 statt 673 - damit steht sie wieder genau ueber Karte 2 (965 bis 1602). */ body.vlt-form-scan.vlt-e2-test .vlt-order-shell > .vlt-scan-kopf { margin-left: 647px !important; } } /* ================================================ VLT-QUER-ZWEITE-KARTE (20.08.) Christian: die Aenderungen aus der Desktopansicht - ausser der Groesse des Banners - auch in allen Querformaten von iPhone, Galaxy und iPad. Gemessen am 20.08.: iPhone 15 Pro quer (852 breit): Banner 12 bis 840 (828), grauer Kasten 8 bis 844 (836) Karte 1 244 bis 781, Karte 2 185 bis 674 iPad quer (1180 breit): Banner 12 bis 1168 (1156), grauer Kasten 30 bis 1150 (1120) Karte 1 303 bis 856, Karte 2 310 bis 765 Der graue Kasten war also mal schmaler, mal breiter als der Banner, und Karte 2 begann und endete jedes Mal woanders als Karte 1. Der Banner ist im Querformat immer 100vw minus 24 (12 Pixel Rand links und rechts) - genau darauf kommt der graue Kasten. Karte 2 bekommt Anfang und Hoehe von Karte 1. Beides misst order-form-scan.js, weil ueber Karte 1 je nach Geraet noch die Tastaturzeile steht - im iPhone-Querformat sind das 59 Pixel. ================================================ */ @media (orientation: landscape) and (min-width: 761px) and (max-width: 1439px) { body.vlt-form-scan.vlt-e2-test .vlt-order-shell { /* 20.08. Nachtrag - der Banner rechnet nicht ueberall gleich: iPad Pro 13 quer (1376 breit) hat ihn mit 1296 statt der erwarteten 1352. Deshalb kommt die Breite jetzt gemessen aus order-form-scan.js. */ width: var(--vlt-scan-banner-breite, calc(100vw - 24px)) !important; max-width: var(--vlt-scan-banner-breite, calc(100vw - 24px)) !important; /* Der Kasten sitzt in einem Rahmen des Themes, der je nach Geraet unterschiedlich weit eingerueckt ist (iPad 30, iPhone 8). Diese Rechnung setzt die linke Kante immer auf 12 - also genau dorthin, wo auch der Banner anfaengt. */ margin-left: calc(50% - 50vw + var(--vlt-scan-banner-links, 12px)) !important; margin-right: 0 !important; } /* Knopfzeile genau in die Mitte zwischen Kopfleiste und Karte 2 - derselbe Aufbau wie in der Desktopansicht: der weisse Kasten umschliesst nur die Knoepfe, der Abstand steht als Aussenabstand. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf { top: calc(var(--vlt-scan-oben, 194px) + 11px) !important; padding: 0 !important; margin-top: 5px !important; margin-bottom: 11px !important; /* 20.08. Nachtrag - Christian: "Die Leiste soll doch rechts ueber der rechten Karte stehen, genau wie im Desktop." Vorher lief sie ueber die ganze Breite (Fold: 36 bis 1056). Die Breite kommt jetzt aus --vlt-scan-doku-breite - die misst order-form-scan.js aus der rechten Spalte. Damit die Zeile in dieser Breite nicht wieder auf zwei Zeilen umbricht (Fold: 468 Pixel fuer rund 536 Pixel Inhalt), darf die Marke "Entwurf - noch nicht abgesendet" schrumpfen und notfalls mit Auslassungspunkten enden. Die Knoepfe bleiben immer vollstaendig. */ width: var(--vlt-scan-doku-breite, 100%) !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important; flex-wrap: nowrap !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf .vlt-scan-kopf__links { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf .vlt-scan-marke { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kopf .vlt-scan-kopf__rechts { flex: 0 0 auto !important; margin-left: auto !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-raster > .vlt-scan-spalte--doku { margin-top: var(--vlt-scan-karte1-oben, 0px) !important; /* 20.08. Nachtrag - Christian: "Die rechte Karte soll nicht mit- scrollen, sie scrollt sonst oben hinter die Leiste." Der Klebepunkt stand auf var + 10, die Knopfleiste klebt aber bei var + 11 und ist 40 hoch - ihre Unterkante liegt also bei var + 51. Die Karte konnte deshalb 41 Pixel hinter die Leiste rutschen. Jetzt dieselbe Rechnung wie in der Desktopansicht: Oberkante der Karte = Unterkante der Leiste plus 11. Damit kann sie gar nicht mehr dahinter verschwinden. */ top: calc(var(--vlt-scan-oben, 0px) + 11px + var(--vlt-scan-kopf-h, 0px) + 11px) !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-doku { height: var(--vlt-scan-karte1, auto) !important; } } /* ================================================ VLT-SCANKARTE-ORDNUNG (20.08.) Christian: "Bei Auftrag scannen ist auf der rechten Karte alles durcheinander. Kann man das vernuenftig anordnen? Nur Desktop." Gemessen bei 1728 Fensterbreite: Karte 637 breit Buehne 309 x 438 - durch aspect-ratio 210/297 auf A4 festgenagelt, obwohl noch gar kein Blatt da ist Platzhalter 124 breit - daher der Umbruch nach jedem Wort Pruefleiste 127 breit - die drei Knoepfe brachen um Der gruene Knopf "Jetzt scannen" ragte oben aus der Buehne heraus (Inhalt 573 hoch in einem 438 hohen Kasten, overflow:auto). Solange nichts gescannt ist, ist die Buehne keine Blattvorschau, sondern die Bedienflaeche - sie darf die ganze Kartenbreite nutzen. Sobald ein Blatt da ist, greift :has() nicht mehr und alles bleibt wie vorher (A4-Verhaeltnis). ================================================ */ @media (min-width: 1440px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-doku__buehne:has(.vlt-scan-platzhalter:not([style*="display: none"])) { aspect-ratio: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-items: stretch !important; justify-content: flex-start !important; gap: 18px !important; padding: 18px !important; overflow: visible !important; } /* Linke Spalte: Knopf, Hinweis, Blattvorschau - untereinander, mittig. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-platzhalter:not([style*="display: none"]) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kamera-start { width: auto !important; min-width: 200px !important; height: auto !important; white-space: nowrap !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kamera-start span { white-space: nowrap !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-kamera-start-hinweis, body.vlt-form-scan.vlt-e2-test .vlt-scan-platzhalter__text, body.vlt-form-scan.vlt-e2-test .vlt-scan-platzhalter__klein { width: auto !important; max-width: 300px !important; text-align: center !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-platzhalter__blatt { width: 150px !important; } /* Rechte Spalte: die drei Knoepfe untereinander, feste Breite. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-pruefleiste { flex: 0 0 210px !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; padding: 0 !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-pruefknopf { width: 100% !important; white-space: nowrap !important; } /* Werkzeugleiste: die Beschriftung gehoert ueber den Wert, nicht daneben - sonst liest es sich als "AnpassenBreite", "Drehen0Grad", "HerunterladenJPG". Der Zoomknopf macht es schon richtig. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-doku__werkzeug .vlt-scan-werkzeug { /* Nachgesehen: diese Knoepfe sind display:block, deshalb liefen die beiden Beschriftungen als Fliesstext nebeneinander. Erst als Spalte steht der Wert unter dem Wort - so wie beim Zoomknopf, der schon flex ist. */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; } } /* ================================================================== VLT-DESKTOP-ABLAGE (ab 2.10.980) Am Rechner wird abgelegt, nicht gescannt. Der Kameraknopf und die Pruefleiste bekommen vom Skript nur "hidden" - die Autorenregeln weiter oben sagen aber display:flex und schlagen das UA-hidden. Deshalb steht es hier ausdruecklich. ================================================================== */ @media (min-width: 1440px) and (pointer: fine) { /* Am Rechner gibt es keine Kamera-Bedienung - nachgemessen: das Skript setzt hidden, aber zeigen() nimmt es sofort wieder zurueck. Deshalb hier hart und unabhaengig vom hidden-Merkmal. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-kamera-start, body.vlt-form-scan.vlt-e2-test .vlt-scan-kamera-start-hinweis, body.vlt-form-scan.vlt-e2-test .vlt-scan-prueftitel, body.vlt-form-scan.vlt-e2-test .vlt-scan-pruefleiste { display: none !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 22px 16px; margin: 0 0 14px; border: 2px dashed #c3cec6; border-radius: 14px; background: #f6f9f7; transition: border-color .15s ease, background-color .15s ease; } body.vlt-form-scan.vlt-e2-test .vlt-scan-ablage__feld { display: none !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-ablage__plus { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: #ffffff; color: #2e7d52; box-shadow: 0 1px 4px rgba(36, 48, 41, .18); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } body.vlt-form-scan.vlt-e2-test .vlt-scan-ablage__plus:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(36, 48, 41, .24); } /* Solange ein Blatt ueber der Karte schwebt */ body.vlt-form-scan.vlt-e2-test .vlt-scan-doku__buehne.ist-bereit .vlt-scan-ablage { border-color: #2e7d52; background: #eaf5ee; } } /* Nachgemessen 20.08.: zeigen() setzt am Platzhalter style="display: none", sobald ein Blatt da ist. Die Ordnungsregeln oben stehen aber auf !important und haben ihn trotzdem weiter angezeigt - das Blatt schrumpfte dadurch auf 25 x 25. Deshalb greifen sie jetzt nur noch, solange der Platzhalter wirklich sichtbar ist. */ @media (min-width: 1440px) { body.vlt-form-scan.vlt-e2-test .vlt-scan-platzhalter[style*="display: none"] { display: none !important; } } /* ================================================================== VLT-DESKTOP-ABGELEGTES-BLATT (ab 2.10.984) Nachgemessen: sobald ein Blatt liegt, blieb die Buehne auf A4 festgenagelt (261 x 369) - die Seitenkarte mit 210er Vorschau und die Knoepfe passten da nicht mehr hinein. Am Rechner darf die Buehne dann die ganze Kartenbreite nehmen: Vorschau links, Angaben rechts. ================================================================== */ @media (min-width: 1440px) and (pointer: fine) { body.vlt-form-scan.vlt-e2-test .vlt-scan-doku__buehne:has(.vlt-scan-seitenkarte) { aspect-ratio: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-items: stretch !important; justify-content: flex-start !important; padding: 16px !important; overflow: visible !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenleiste { width: 100% !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; margin-bottom: 12px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte__bild { flex: 0 0 auto !important; border-radius: 6px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte__infos { flex: 1 1 auto !important; min-width: 0 !important; } /* "Seite 1" und der Haken klebten aneinander. */ body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte__infos strong { display: block !important; margin-bottom: 4px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte__chip { display: inline-block !important; margin-bottom: 10px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-seitenkarte__aktionen { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } body.vlt-form-scan.vlt-e2-test .vlt-scan-plusgross { width: 100% !important; white-space: nowrap !important; } }