Raum-Modal: Gruppen als Tabs, Jalousien senkrecht bedienen
Die Gruppenueberschriften sind Tabs geworden, Beschattung zuerst - das ist es, was man in einem Raum am haeufigsten anfasst. Vorher scrollte man an drei Rollladen vorbei, um zum Licht zu kommen. Bei nur einer Gruppe bleibt die Leiste weg; auf schmalen Schirmen scrollt sie seitwaerts, statt die Namen umzubrechen. Bei den Jalousien stehen Auf, Stop und Zu jetzt untereinander - so zeigen die Knoepfe in die Richtung, in die sie fahren. Die Hoehe daneben ist ein senkrechter Regler mit "oben" und "unten" an den Enden: der Griff steht dort, wo der Rollladen steht, und niemand muss "100 %" uebersetzen. Die Neigung hat ein Bild dazubekommen. "30 %" oder "70 %" sagt nicht, ob man noch hinaussieht; vier Streifen sagen es. Gezeichnet wird die Hoehe, die eine gekippte Lamelle von vorn zeigt (w * sin(Winkel)) - bei "auf" sieht man nur ihre Kante und viel Luft dazwischen, bei "zu" deckt sie den Abstand zur naechsten vollstaendig ab. Genau das, was das Licht abhaelt. Die Regler faerben ihre Bahn jetzt mit, wie es der Temperaturregler seit jeher tut - dieselbe Eigenschaft --background-size, nur beim senkrechten von oben nach unten. css/solar.css hatte gemischte Zeilenenden und ist dabei durchgehend auf LF gebracht worden; das erklaert den grossen Diff bei kleiner Aenderung. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+185
-100
@@ -1,15 +1,15 @@
|
||||
.winddir {
|
||||
position:absolute;
|
||||
left:60%;
|
||||
width:25%;
|
||||
height:40%;
|
||||
padding: 0;
|
||||
background-image: url('../assets/img/arrow.svg');
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.winddir {
|
||||
position:absolute;
|
||||
left:60%;
|
||||
width:25%;
|
||||
height:40%;
|
||||
padding: 0;
|
||||
background-image: url('../assets/img/arrow.svg');
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
/* Schieberegler in den Modals (Autoladung, Heizstab, Thermostat).
|
||||
Der gefuellte Anteil kommt aus --background-size, gesetzt von
|
||||
@@ -111,91 +111,176 @@ input[type='range']::-webkit-slider-runnable-track {
|
||||
.input-group.raum-cmd > .form-select {
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Raum-Modal: Bedienelemente
|
||||
Erzeugt von restricted/roomControls.php, verdrahtet in js/solar/homeMQTT.js.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* Ueberschrift einer Geraetegruppe (Beschattung, Licht, ...). Klein und
|
||||
ruhig - sie ordnet, sie soll nicht mit den Geraeten um Aufmerksamkeit
|
||||
ringen. */
|
||||
.raum-gruppe {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0.75rem 0 0.35rem;
|
||||
}
|
||||
.raum-gruppe:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Waehrend ein Kommando unterwegs ist. Ein "Zu" an einer Jalousie dauert
|
||||
ueber eine Minute; ohne sichtbare Sperre tippt man in der Zeit nach. */
|
||||
.raum-geraet.raum-warte {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
.raum-geraet.raum-warte::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: raum-dreht 0.8s linear infinite;
|
||||
}
|
||||
.raum-geraet {
|
||||
position: relative;
|
||||
}
|
||||
@keyframes raum-dreht {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Schieberegler stehen dicht untereinander (Position und Neigung). Ohne den
|
||||
Abstand kleben Beschriftung und Bahn aneinander. */
|
||||
.raum-regler + .raum-regler {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.raum-regler .form-range {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Messwerte als Gitter statt als Textwurst: ein Stromzaehler hat sechzehn
|
||||
Werte, die in einer Zeile niemand findet. auto-fill statt fester Spalten,
|
||||
damit auf dem Handy zwei und auf dem Schirm vier nebeneinander passen. */
|
||||
.raum-werte {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.raum-wert {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
border-radius: 0.35rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.raum-wert-zahl {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.raum-wert-einheit {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.raum-wert-name {
|
||||
font-size: 0.68rem;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Raum-Modal: Bedienelemente
|
||||
Erzeugt von restricted/roomControls.php, verdrahtet in js/solar/homeMQTT.js.
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* Die Geraetegruppen als Tabs. Auf einem Handy passen fuenf Beschriftungen
|
||||
nicht nebeneinander - dann scrollt die Leiste seitwaerts, statt die Namen
|
||||
umzubrechen. */
|
||||
.raum-tabs {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.raum-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.raum-tabs .nav-link {
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Waehrend ein Kommando unterwegs ist. Ein "Zu" an einer Jalousie dauert
|
||||
ueber eine Minute; ohne sichtbare Sperre tippt man in der Zeit nach. */
|
||||
.raum-geraet.raum-warte {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
.raum-geraet.raum-warte::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: raum-dreht 0.8s linear infinite;
|
||||
}
|
||||
.raum-geraet {
|
||||
position: relative;
|
||||
}
|
||||
@keyframes raum-dreht {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Schieberegler stehen dicht untereinander (Position und Neigung). Ohne den
|
||||
Abstand kleben Beschriftung und Bahn aneinander. */
|
||||
.raum-regler + .raum-regler {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.raum-regler .form-range {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Messwerte als Gitter statt als Textwurst: ein Stromzaehler hat sechzehn
|
||||
Werte, die in einer Zeile niemand findet. auto-fill statt fester Spalten,
|
||||
damit auf dem Handy zwei und auf dem Schirm vier nebeneinander passen. */
|
||||
.raum-werte {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.raum-wert {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
border-radius: 0.35rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.raum-wert-zahl {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.raum-wert-einheit {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.raum-wert-name {
|
||||
font-size: 0.68rem;
|
||||
opacity: 0.6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Raum-Modal: Jalousien
|
||||
-------------------------------------------------------------------------- */
|
||||
|
||||
/* Fahrknoepfe, Hoehe und Neigung nebeneinander. Die Neigung nimmt den Rest -
|
||||
sie ist die einzige der drei Spalten, die von Breite profitiert. */
|
||||
.raum-jalousie {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.raum-jalousie .raum-neigung-block {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.raum-jalousie .dropdown {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* Auf, Stop, Zu untereinander - die Knoepfe zeigen in die Richtung, in die
|
||||
sie fahren. Schmal, weil nur Symbole darin stehen. */
|
||||
.raum-fahrt {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.raum-fahrt .btn {
|
||||
padding: 0.2rem 0.55rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Die Hoehe als senkrechter Regler: der Griff steht dort, wo der Rollladen
|
||||
steht. writing-mode ist der Weg, den Chrome und Firefox heute gehen -
|
||||
slider-vertical war nie standardisiert und ist inzwischen entfernt. */
|
||||
.raum-position {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
.raum-position input[type='range'] {
|
||||
writing-mode: vertical-rl;
|
||||
width: 1.2rem;
|
||||
height: 4.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/* Die gefuellte Bahn laeuft hier von oben nach unten mit - "voll" heisst
|
||||
heruntergefahren. */
|
||||
.raum-position input[type='range']::-webkit-slider-runnable-track {
|
||||
background: linear-gradient(to bottom, #00788F, #00788F), #D7D7D7;
|
||||
background-size: 100% var(--background-size, 0%);
|
||||
}
|
||||
|
||||
/* Die Endstellungen in Worten statt in Prozent. */
|
||||
.raum-ende {
|
||||
font-size: 0.68rem;
|
||||
opacity: 0.65;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Die Lamellen zur Neigung. Ihre Hoehe setzt lamellenZeichnen() in
|
||||
js/solar/homeMQTT.js - schmal mit Luft dazwischen heisst offen,
|
||||
aneinanderliegend heisst geschlossen. */
|
||||
.raum-lamellen {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1.8rem;
|
||||
margin: 0.1rem 0;
|
||||
/* Der Rahmen macht aus dem Streifen ein Fenster - ohne ihn liest sich das
|
||||
geschlossene Bild wie eine zweite Reglerbahn. */
|
||||
background: rgba(0, 120, 143, 0.14);
|
||||
border: 1px solid rgba(128, 128, 128, 0.35);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
.raum-lamelle {
|
||||
fill: currentColor;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user