WIP Zentrale-Kachel nach VanVans Werktisch — NOCH NICHT FERTIG
Aufbau steht (Ring links, Titel mittig, Uhr rechts), aber pruef-start-ansicht meldet 3 Befunde am MAUS-LICHT der Kacheln. Gemessen: alter Stand 0 Befunde, dieser Stand 3 — kommt also von hier. Kein JS-Fehler (pageerror/console sind still), also Zeitverhalten: Die zusaetzliche Abfrage /api/zentrale verzoegert vermutlich den Aufbau der Kacheln ueber den Zeitpunkt hinaus, an dem kopf.js lichtFolgen ruft. Ausserdem offen: 2 Schriftgroessen unter 11,5 px (pruef-css-klassen). NICHT ausliefern.
This commit is contained in:
@@ -346,11 +346,212 @@
|
||||
transparent 74%);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DREI SPALTEN: RING — TEXT — UHR (08.09.2026)
|
||||
|
||||
Uebernommen von VanVans Werktisch im Business Hub, auf Wunsch Filipes
|
||||
("das model da uebernehmen und es noch perfektionieren"). Vorher stand
|
||||
hier eine FLEX-Zeile: Bild, Text, Zahlen, Uhr -- alles nebeneinander,
|
||||
mit rund 300 px Leere in der Mitte. Das war eine Zeile mit einer
|
||||
Luecke, keine Tafel.
|
||||
|
||||
`minmax(0, 1fr)` FUER DIE MITTE, nicht `1fr`. Das ist im Vorbild
|
||||
ausdruecklich vermerkt, und der Grund ist nachlesenswert: `1fr` geht
|
||||
nie unter die Mindestbreite seines Inhalts. Eine nicht umbrechende
|
||||
Anrede und eine Zahlenreihe zwingen die Spalte damit auf 470 px -- auf
|
||||
einem 390-px-Schirm. Die ganze Seite laesst sich dann seitlich
|
||||
wegschieben. Mit `minmax(0, 1fr)` darf die Spalte schmaler werden als
|
||||
ihr Inhalt, und der Inhalt bricht um, statt hinauszuragen.
|
||||
|
||||
Ich habe den Fehler nicht selbst gemacht, sondern die Begruendung
|
||||
mituebernommen -- eine Loesung ohne ihren Grund haelt genau bis zum
|
||||
naechsten Umbau. */
|
||||
.willkommen__reihe {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 232px) minmax(0, 1fr) minmax(180px, 232px);
|
||||
gap: 26px; align-items: center;
|
||||
}
|
||||
.willkommen__text {
|
||||
min-width: 0;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 9px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- Der Ring links ------------------------------------------------
|
||||
Gleich gross wie die Uhr rechts. Im Vorbild steht dazu: "Beide Kreise
|
||||
exakt gleich gross -- sie sind ein Paar, kein Haupt- und Nebenkreis."
|
||||
Das ist der Grund, warum die Tafel ruhig wirkt: zwei gleiche Gewichte
|
||||
links und rechts, dazwischen der Text. */
|
||||
.zring {
|
||||
position: relative; aspect-ratio: 1; width: 100%; max-width: 232px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.zring__bild {
|
||||
width: 100%; height: 100%; display: block;
|
||||
/* Bei -90 Grad beginnt das erste Segment oben statt rechts -- so
|
||||
liest man einen Fortschritt, seit es Uhren gibt. */
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.zring__mitte {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 2px; pointer-events: none;
|
||||
}
|
||||
/* DAS SIEGEL IST RUND -- und das ist eine Reparatur, keine Stilfrage.
|
||||
|
||||
Erst stand hier dieselbe Maske wie in der Kopfleiste:
|
||||
-webkit-mask: url("../img/marke-husky.webp") ...
|
||||
Im Nahaufnahme-Bildschirmfoto war das Ergebnis ein KASTEN mit einem
|
||||
Husky darin, kein freigestellter Husky.
|
||||
|
||||
Nachgemessen: Die Datei hat einen Alphakanal (VP8X mit ALPH-Chunk,
|
||||
Alpha-Flag gesetzt) -- er ist nur RECHTECKIG. Das Bild ist nicht
|
||||
freigestellt. Als Maske taugt es damit nicht, egal wie richtig die
|
||||
CSS-Zeile ist.
|
||||
|
||||
BEFUND FUER SPAETER: Dasselbe gilt fuer `.kopfleiste .marke::before`
|
||||
in start.css -- dort ist es bei 22 px nur nicht aufgefallen. Wer das
|
||||
Logo einmal freistellt, repariert beide Stellen auf einmal.
|
||||
|
||||
Hier wird es deshalb als BILD gezeigt und rund beschnitten, mit
|
||||
einem feinen Ring darum. Das ist naeher am Vorbild als die Maske es
|
||||
je war: VanVans Werktisch traegt in der Mitte ein rundes Siegel, kein
|
||||
ausgeschnittenes Zeichen. */
|
||||
.zring__siegel {
|
||||
width: 44px; height: 44px; margin-bottom: 5px;
|
||||
border-radius: 50%;
|
||||
background: url("../img/marke-husky.webp") center / 128% no-repeat, #0b1420;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(180, 210, 240, .28),
|
||||
inset 0 0 12px rgba(0, 0, 0, .55);
|
||||
/* Etwas entsaettigt und abgedunkelt: Das Siegel ist der ruhige Kern
|
||||
des Rings, nicht sein hellster Punkt -- sonst zieht es den Blick von
|
||||
der Zahl darunter ab, um die es geht. */
|
||||
filter: saturate(.55) brightness(.92);
|
||||
}
|
||||
.zring__prozent {
|
||||
font-size: 1.85rem; font-weight: 700; line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #dfeaf6;
|
||||
text-shadow: 0 0 16px rgba(127, 196, 242, .3);
|
||||
}
|
||||
/* ZWEIZEILIG, UND DAS IST GEWOLLT.
|
||||
|
||||
Erst stand hier `max-width: 78%` bei .68rem. In der Nahaufnahme lief
|
||||
"DES TEAMS VERSORGT" als eine Zeile quer ueber die Segmentbahn -- der
|
||||
Ring war dahinter durchgestrichen.
|
||||
|
||||
Der innere Segmentring liegt bei Radius 106 von 150, also auf 71 % der
|
||||
Breite. Alles darunter muss schmaler bleiben als das, sonst kreuzt es
|
||||
ihn. 58 % lassen dem Text Luft und zwingen ihn in zwei Zeilen -- genau
|
||||
wie im Vorbild, wo "DEINER PRODUKTAKTEN" ebenfalls umbricht.
|
||||
|
||||
.72rem statt .68rem, weil 10,9 px unter meiner eigenen Untergrenze von
|
||||
11,5 px lagen. Die Regel gilt auch fuer Text, den man nur ueberfliegt. */
|
||||
.zring__unter {
|
||||
font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
|
||||
color: rgba(168, 192, 218, .66);
|
||||
max-width: 58%; text-align: center; line-height: 1.25;
|
||||
text-wrap: balance; /* zwei gleich lange Zeilen statt 4+1 Woertern */
|
||||
}
|
||||
|
||||
/* ---- Die Anrede in eigener Fassung -------------------------------- */
|
||||
.zgruss {
|
||||
display: inline-flex; align-items: center; gap: 11px;
|
||||
padding: 7px 15px 7px 8px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(178deg, rgba(10, 18, 30, .62), rgba(6, 12, 21, .48));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(160, 195, 230, .13),
|
||||
0 1px 10px rgba(0, 0, 0, .3);
|
||||
max-width: 100%;
|
||||
}
|
||||
.zgruss__bild {
|
||||
width: 42px; height: 42px; flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background-size: cover; background-position: center;
|
||||
background-color: rgba(120, 160, 200, .16);
|
||||
box-shadow: 0 0 0 1px rgba(180, 210, 240, .22), inset 0 0 14px rgba(0, 0, 0, .5);
|
||||
display: grid; place-items: center;
|
||||
font-weight: 700; color: #cfe2f5;
|
||||
}
|
||||
.zgruss__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
|
||||
.zgruss__datum { font-size: .78rem; color: rgba(168, 192, 218, .72); }
|
||||
.zgruss__rolle {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 11px; border-radius: 999px;
|
||||
font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
|
||||
color: #e6c88a;
|
||||
border: 1px solid rgba(227, 179, 65, .34);
|
||||
background: rgba(227, 179, 65, .09);
|
||||
}
|
||||
|
||||
/* ---- Zierzeile und Titel ------------------------------------------ */
|
||||
.zmarke {
|
||||
display: inline-flex; align-items: center; gap: 11px;
|
||||
font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
|
||||
color: rgba(196, 214, 234, .6);
|
||||
margin-top: 3px;
|
||||
}
|
||||
/* Die Raute ist ein ELEMENT, kein Schriftzeichen. Ein ◆ aus der
|
||||
Schriftart sitzt nie auf der Grundlinie und sieht auf jedem Geraet
|
||||
anders aus -- im Vorbild steht dieselbe Ueberlegung. */
|
||||
.zraute {
|
||||
width: 5px; height: 5px; flex: 0 0 auto;
|
||||
transform: rotate(45deg);
|
||||
background: rgba(227, 179, 65, .62);
|
||||
}
|
||||
/* ZWEI STUFEN, wie im Vorbild -- nicht eine.
|
||||
|
||||
Bei mittlerer Breite fehlt zuerst der Platz fuer DREI Spalten, aber
|
||||
noch lange nicht fuer zwei: Der Ring bleibt links neben dem Text, die
|
||||
Uhr rutscht darunter und in die Mitte. Erst wenn auch das nicht mehr
|
||||
reicht, steht alles untereinander.
|
||||
|
||||
Die Zahlen 1180 und 780 sind aus dem Vorbild uebernommen, wo sie an
|
||||
echten Geraeten entstanden sind. Sie stehen hier zusammen mit dem,
|
||||
was sie zaehlen -- wer eine vierte Spalte hinzufuegt, muss sie neu
|
||||
messen. Genau das ist im September einmal vergessen worden, und der
|
||||
Sicht-Umschalter lag danach ueber dem Chat-Knopf. */
|
||||
@media (max-width: 1180px) {
|
||||
.willkommen__reihe { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); }
|
||||
.willkommen__rechts { grid-column: 1 / -1; justify-content: center; margin-left: 0; }
|
||||
}
|
||||
@media (max-width: 780px) {
|
||||
.willkommen__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
|
||||
.zring { max-width: 190px; }
|
||||
.zgruss { flex-wrap: wrap; justify-content: center; }
|
||||
.zgruss__text { text-align: center; align-items: center; }
|
||||
}
|
||||
|
||||
/* Der Satz unter dem Titel bekommt Fliesstextgroesse und darf umbrechen.
|
||||
|
||||
Im Vorbild stehen dort drei Zeilen ("Ich habe deine 253 Produkte
|
||||
durchgesehen und 1561 von 1720 Angaben schon eingetragen ..."), und
|
||||
genau die machen aus einer Anzeigetafel eine Ansprache. Bei mir ist
|
||||
der Satz kuerzer -- er kommt aus derselben Zaehlung wie die Hinweise
|
||||
darunter und wird nicht zweimal gerechnet -- aber er soll denselben
|
||||
Raum bekommen statt als Kleingedrucktes am Titel zu kleben.
|
||||
|
||||
`text-wrap: balance` verteilt die Zeilen gleichmaessig, statt die
|
||||
letzte mit einem einzelnen Wort enden zu lassen. */
|
||||
.willkommen__reihe .unterzeile {
|
||||
font-size: 1rem; line-height: 1.55;
|
||||
max-width: 46ch; margin: 2px auto 0;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.ztitel {
|
||||
margin: 0;
|
||||
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
|
||||
font-weight: 700; line-height: 1.06; letter-spacing: -.01em;
|
||||
color: #dce9f6;
|
||||
/* Ein Verlauf statt einer Volltonfarbe: Der Titel bekommt oben Licht
|
||||
und unten Schatten, wie ein gefraester Schriftzug auf Metall. */
|
||||
background: linear-gradient(178deg, #eef5fc 8%, #b9cee2 58%, #7f95ad 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.willkommen__text { min-width: 0; flex: 1 1 260px; }
|
||||
|
||||
/* Rechts: Glocke neben der Uhr, beide rechtsbündig. `margin-left: auto`
|
||||
statt `justify-content: space-between` am Elternteil -- so bleibt die
|
||||
|
||||
Reference in New Issue
Block a user