Vollbildanzeige fuer den Raspberry Pi (800 x 480)
index.php?action=anzeige: Uebersicht, Anlage und Speicher ohne Kopf und
Seitenleiste, schmale Leiste links, immer quer. Nach zwei Minuten ohne
Beruehrung zurueck zur Uebersicht, MQTT verbindet still neu (Punkt in der
Leiste), alle sechs Stunden neu laden. Standard "ruhig" fuer den Pi 3B+
(nur Fluesse, grobe Stufen, kein Mauszeiger); &animation=1 und &maus=1.
Dafuer:
- Seitentabelle kennt "eigen" (Vorlage ist eine ganze Seite)
- Energiefluss: Optionen hochkantUnter und klickFilter; Anlage: hochkantUnter
- Bewaesserungszustand aus solarMQTT.js nach bewaesserungAnzeige.js, von
Solar-Seite und Anzeige gemeinsam genutzt
- Speicher: "voll/leer" mit Tag ("morgen 21:52", "in 3 Tagen")
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3868,6 +3868,73 @@ svg.anl-plan.anl-hoch { max-height: none; }
|
||||
.spk .spk-verlauf.neu .spk-linie { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Vollbildanzeige (restricted/anzeige.php, js/solar/anzeige.js), z.B. am
|
||||
Raspberry Pi mit 800 x 480: schmale Leiste links, Ansicht auf voller Höhe.
|
||||
========================================================================== */
|
||||
body.anzeige {
|
||||
margin: 0; height: 100vh; overflow: hidden;
|
||||
display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
|
||||
background: var(--ton-grund, #191d20); color: var(--ton-schrift, #e8ede9);
|
||||
font-family: "Poppins", system-ui, sans-serif; font-size: 14px;
|
||||
-webkit-tap-highlight-color: transparent; user-select: none;
|
||||
}
|
||||
body.anzeige-ohne-maus,
|
||||
body.anzeige-ohne-maus * { cursor: none !important; }
|
||||
/* Die Seite lädt AdminLTE nicht - dessen Grundregeln fehlen hier. */
|
||||
body.anzeige [hidden] { display: none !important; }
|
||||
body.anzeige *, body.anzeige *::before, body.anzeige *::after { box-sizing: border-box; }
|
||||
.anzeige .anzeige-leiste {
|
||||
display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .5rem 0;
|
||||
background: var(--ton-flaeche, #23282c); border-right: 1px solid var(--ton-linie, rgba(138, 148, 158, .2));
|
||||
}
|
||||
.anzeige .anzeige-leiste button {
|
||||
all: unset; box-sizing: border-box; width: 2.6rem; height: 2.6rem; border-radius: .7rem;
|
||||
display: grid; place-items: center; font-size: 1.3rem; color: var(--ton-schrift-2, #9aa6ad);
|
||||
}
|
||||
.anzeige .anzeige-leiste button[aria-pressed="true"] { background: var(--ton-flaeche-2, #2b3237); color: #f7c000; }
|
||||
.anzeige .anzeige-fuss { margin-top: auto; display: grid; justify-items: center; gap: .3rem; }
|
||||
.anzeige .anzeige-punkt { width: .6rem; height: .6rem; border-radius: 50%; background: #e5624f; }
|
||||
.anzeige .anzeige-punkt.warn { background: #e8a33a; }
|
||||
.anzeige .anzeige-punkt.gut { background: #6cbe58; }
|
||||
.anzeige .anzeige-uhr { font-size: .72rem; font-weight: 600; color: var(--ton-schrift-2, #9aa6ad); font-variant-numeric: tabular-nums; }
|
||||
.anzeige .anzeige-inhalt { min-width: 0; height: 100vh; }
|
||||
.anzeige .anzeige-flaeche { box-sizing: border-box; height: 100vh; padding: .35rem; overflow-y: auto; scrollbar-width: none; }
|
||||
.anzeige .anzeige-flaeche::-webkit-scrollbar { display: none; }
|
||||
.anzeige .anzeige-flaeche[hidden] { display: none; }
|
||||
.anzeige #anzeige-fluss { overflow: hidden; padding: .2rem; }
|
||||
.anzeige #anzeige-fluss svg.enf { width: 100%; height: 100%; max-height: none; }
|
||||
/* Anlage und Speicher: die Umbrüche der Solar-Seite richten sich nach der
|
||||
Fensterbreite und würden am 800er-Display zu früh greifen. */
|
||||
.anzeige .anl svg.anl-plan { max-height: calc(100vh - 7.5rem); }
|
||||
.anzeige .spk .spk-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
|
||||
.anzeige .spk .spk-kachel { padding: .4rem .55rem .45rem; }
|
||||
.anzeige .spk .spk-kachel b { font-size: 1.05rem; }
|
||||
.anzeige .spk .spk-kachel small,
|
||||
.anzeige .spk .spk-kachel-titel { font-size: .66rem; }
|
||||
.anzeige .spk .spk-mitte,
|
||||
.anzeige .spk .spk-diagramme { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .5rem; }
|
||||
.anzeige .spk .spk-fach { padding: .6rem .7rem; gap: .5rem; }
|
||||
.anzeige .spk .spk-modul { grid-template-columns: 1.7rem minmax(0, 1fr) 5.4rem; gap: .4rem; padding: .3rem .45rem; }
|
||||
.anzeige .spk .spk-zellen { height: 1.4rem; }
|
||||
.anzeige .spk .spk-werte b { font-size: .68rem; }
|
||||
.anzeige .spk .spk-werte small { font-size: .62rem; }
|
||||
.anzeige .spk .spk-gross b { font-size: 1.4rem; }
|
||||
|
||||
/* Ruhig (Vorgabe am Pi): alles Zierwerk aus, nur die Flüsse laufen - in
|
||||
groben Stufen, damit ein Raspberry Pi 3 nicht dauernd neu zeichnet. */
|
||||
.anzeige-ruhig *,
|
||||
.anzeige-ruhig *::after { animation: none !important; }
|
||||
.anzeige-ruhig .enf .enf-bett,
|
||||
.anzeige-ruhig .spk .spk-verlauf.neu .spk-linie { stroke-dashoffset: 0; }
|
||||
.anzeige-ruhig .enf .enf-strom-hof { display: none; }
|
||||
.anzeige-ruhig .enf .enf-strom { animation: enf-fliessen var(--dauer, 1.5s) steps(8) infinite !important; }
|
||||
.anzeige-ruhig .enf .enf-rueck .enf-strom { animation-direction: reverse !important; }
|
||||
.anzeige-ruhig .enf .enf-still .enf-strom,
|
||||
.anzeige-ruhig .enf.enf-pause .enf-strom { animation: none !important; }
|
||||
.anzeige-ruhig .enf .enf-strahlen,
|
||||
.anzeige-ruhig .enf .enf-koerper { transition: none; }
|
||||
|
||||
/* --- Karte: Umschalter Übersicht / Anlage -------------------------------- */
|
||||
.enf-umschalter { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ton-radius-klein, .5rem); background: var(--ton-grund, #191d20); }
|
||||
.enf-umschalter .btn.btn-sm { border: 0; color: var(--ton-schrift-2, #9aa6ad); font-weight: 600; padding: .2rem .8rem; }
|
||||
|
||||
Reference in New Issue
Block a user