Raum-Modal: Regler gedreht statt writing-mode, eigenes Aussehen

Der senkrechte Positionsregler liess sich am Handy kaum anfassen. Gebaut
war er mit writing-mode: vertical-rl - dem neueren Weg, aber einem, bei
dem der Browser das Ziehen als Wischen liest und die Seite blaettert,
statt den Griff mitzunehmen.

Jetzt liegt ein gewoehnlicher waagerechter Regler um 90 Grad gedreht in
seinem Kasten. Er bewegt sich in seinen eigenen Koordinaten waagerecht,
wird von jedem Browser unterstuetzt, traegt dieselbe Gestaltung wie die
liegenden Regler, und touch-action: none haelt die Seite still, solange
der Finger auf ihm liegt. Die Trefferflaeche ist 1,6 rem breit statt der
sichtbaren 0,375 rem Bahn. Nachgemessen: oben angeklickt 8 %, unten 93 %.

Die Neigung steht jetzt ebenfalls senkrecht, daneben das Lamellenbild -
Regler und Bild bilden ein Paar, das Bild sagt, was der Regler bedeutet.
Beide Spalten sind mit Namen und den Worten an ihren Enden beschriftet
("oben"/"unten", "auf"/"zu"); die Zahl darunter ist das, was sich beim
Ziehen aendert.

Die Regler im Raum-Modal haben ein eigenes Aussehen bekommen: Bootstraps
weisse Bahn mit blauem Griff stach auf den dunklen Karten heraus, und in
einem Raum mit drei Jalousien waren das sechs helle Balken. Bahn und Griff
tragen jetzt dasselbe Blaugruen wie der Temperaturregler, der ungefuellte
Teil ein Grau, das in beiden Themes traegt. Die Regler in den Modals fuer
Autoladung und Heizstab bleiben unberuehrt.

Die Regel fuer die Bahn steht zweimal da, einmal fuer -webkit- und einmal
fuer -moz-: als Liste notiert wirft der Browser beim unbekannten Selektor
die ganze Regel weg, und dann bliebe die Bahn ungestaltet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-31 21:53:49 +02:00
co-authored by Claude Opus 5
parent f6e0414866
commit e7fd7715ef
3 changed files with 153 additions and 82 deletions
+7 -8
View File
@@ -282,9 +282,9 @@ function switchFloor(floor){
/**
* Anzeige, gefuellte Bahn und Lamellenbild eines Reglers nachziehen.
*
* An den Endstellungen steht ein Wort statt der Zahl: "unten" liest sich
* ohne Umweg, "100 %" muss man erst uebersetzen. Dazwischen bleibt es bei
* der Prozentzahl - fuer halb heruntergefahren gibt es kein Wort.
* Was 0 % und 100 % bedeuten, steht bei den senkrechten Reglern als Wort
* an ihren Enden ("oben"/"unten", "auf"/"zu"); die Anzeige braucht deshalb
* nur noch die Zahl, und die ist beim Ziehen das Interessante.
*/
function reglerAnzeigen(regler) {
const schieber = regler.querySelector("input[type=range]");
@@ -292,10 +292,7 @@ function switchFloor(floor){
const wert = Number(schieber.value);
if (anzeige) {
const worte = regler.dataset.worte ? JSON.parse(regler.dataset.worte) : null;
anzeige.textContent = (worte && worte[wert] !== undefined)
? worte[wert]
: wert + (schieber.dataset.einheit || "");
anzeige.textContent = wert + (schieber.dataset.einheit || "");
}
// Der gefuellte Anteil der Bahn - dieselbe Eigenschaft, aus der auch
@@ -314,7 +311,9 @@ function switchFloor(floor){
* Gezeichnet wird die Hoehe, die eine gekippte Lamelle von vorn zeigt:
* w * sin(Winkel). Bei 0 % steht sie waagerecht und man sieht nur ihre
* Kante, bei 100 % steht sie quer und deckt den Abstand zur naechsten
* vollstaendig ab - genau das, was das Licht abhaelt.
* vollstaendig ab - genau das, was das Licht abhaelt. Der Abstand von
* Mitte zu Mitte ist 10, die Lamelle 11 tief: ab etwa 65 % schliesst
* das Bild, so wie es die Jalousie auch tut.
*/
function lamellenZeichnen(block, wert, min, max) {
if (!block) return;