Etagenschalter neu gestalten, Aussengelaende ruecken lassen

Das Rendering des Grundstuecks fuellt seinen Rahmen aus, die drei
Geschossbilder haben dagegen breiten schwarzen Rand - deshalb lagen die
Etagenschalter nur beim Aussengelaende auf dem Bild. Der Rand gehoert ins
Bild und nicht in home.php: dort einzurechnen haette auch OG, EG und UG
verschoben, und deren Kacheln sind auf die heutige Lage eingemessen. AG.png
bekommt links 114 durchsichtige Punkte, die sieben Kacheln sind mit
derselben Abbildung umgerechnet.

Die Schalter selbst waren ein duenner Ring in einem Amber (#aa7713), das in
css/solar.css nirgends vorkommt - und alle vier sahen immer gleich aus, die
aktive Etage war an ihnen nicht zu erkennen. Jetzt tragen sie dieselbe
Scheibe wie die Kacheln im Grundriss, die aktive bekommt die Akzentfarbe der
Schieberegler (#00788F), und switchFloor() zieht den Zustand mit. Dort
classList und nicht die Helfer addClass/removeClass weiter oben: deren
"el.className +=" wirkt auf SVG-Elementen nicht, className ist dort
schreibgeschuetzt.

Ausserdem sind sie kleiner. Mit halber Groesse beherrschten sie die linke
Seite, und das Bild musste umso weiter einruecken, um sie freizuhalten - bei
0,38 statt 0,50 bleibt mehr Plan uebrig. Die Groesse steht als eine Zahl in
home.php, Abstand und Bildrand folgen daraus.

Die Beschriftung sitzt jetzt ueber text-anchor und dominant-baseline im
Kreismittelpunkt. Vorher stand je Etage ein von Hand gesuchter Versatz im
Markup (62, 63, 64), und jede neue Etage haette einen neuen gebraucht.

Weggefallen: die Definition #floorBtn, die nur einmal benutzt wurde, und die
Animationen showOG/showEG/showUG, die ein bereits sichtbares Element von 0
auf 1 blendeten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 23:54:29 +02:00
co-authored by Claude Opus 5
parent 0196a52454
commit 3073c5afdb
5 changed files with 77 additions and 27 deletions
+34
View File
@@ -967,3 +967,37 @@ input[type='range']::-webkit-slider-runnable-track {
die Zustandszeile darunter soll trotzdem lesbar bleiben. */
.log-liste .log-wahl.active .text-secondary,
.log-liste .log-wahl.active .text-warning { color: rgba(255, 255, 255, .75) !important; }
/* Etagenschalter im Grundriss der Home-Ansicht.
Vorher waren sie ein duenner Ring in einem Amber (#aa7713), das sonst
nirgends im Dashboard vorkommt - und alle vier sahen immer gleich aus,
die aktive Etage war an ihnen nicht zu erkennen. Jetzt tragen sie
dieselbe Scheibe wie die Kacheln im Grundriss, und die aktive Etage
bekommt die Akzentfarbe der Schieberegler. */
.floorBtn { cursor: pointer; }
.floorBtn circle {
fill: #0006;
stroke: #9aa0a6;
stroke-width: 4;
opacity: .55;
transition: stroke .25s ease, opacity .25s ease;
}
.floorBtn text {
font: 600 34px Poppins, system-ui, sans-serif;
fill: #9aa0a6;
opacity: .8;
transition: fill .25s ease, opacity .25s ease;
/* Der Kreis faengt den Klick, nicht die Beschriftung - sonst wandert der
Textcursor ueber die Schrift, sobald man sie streift. */
user-select: none;
pointer-events: none;
}
.floorBtn:hover circle { opacity: .8; }
.floorBtn:hover text { opacity: 1; }
.floorBtn.active circle { stroke: #00788F; opacity: 1; }
.floorBtn.active text { fill: #e8ede9; opacity: 1; }