Raum-Modal: Heizung in einen eigenen Reiter, Spalten buendig

Die Heizung stand ueber den Tabs und war in jedem Raum sichtbar, auch wenn
man wegen der Rollladen gekommen war. Sie ist jetzt eine Gruppe wie die
anderen - nur baut sie sich nicht aus einer Geraeteliste, sondern ist ein
Regler fuer den Raum. zeichneGruppen() nimmt dafuer fertige Inhalte
entgegen. Bei einem Raum mit nur einem Thermostat bleibt die Leiste weg,
dort sieht es aus wie vorher.

Aus den Pillen sind Reiter geworden - sie sehen jetzt aus wie das, was sie
sind, und nicht wie eine Knopfreihe.

Position und Neigung standen um 0,35 rem versetzt: die Regel fuer
gestapelte Regler (Helligkeit ueber Farbe) griff auch auf die zweite
Spalte, die aber danebensteht. Sie gilt jetzt nur noch fuer Regler, die
keine Spalte sind - nachgemessen stehen beide Bahnen auf 181/104.

Das Fensterbild ist von "so breit wie moeglich" auf 5 rem zurueckgenommen;
der uebrige Platz verteilt sich auf die Zwischenraeume, statt das Bild
breitzuziehen. Zwischen ihm und den Bedienelementen liegt jetzt Luft.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

ajax/room.php

@@ -108,32 +108,35 @@ foreach ($katalog as $d) {
     $gruppen[$form][] = $d;
 }
 
-echo "<div class='p-1' id='roomView' data-room='" . htmlspecialchars($schluessel, ENT_QUOTES) . "'>";
+// Die Heizung ist eine Gruppe wie die anderen, nur baut sie sich nicht aus
-
+// einer Geraeteliste: ein Regler fuer den Raum statt einer Karte je Geraet.
+$fertig = [];
 if ($hatThermostat) {
-    echo "<div class='card mb-2'><div class='card-body py-2'>";
+    $karte = "<div class='card mb-2'><div class='card-body py-2'>"
-    echo "<div class='d-flex justify-content-between align-items-baseline'>";
+           . "<div class='d-flex justify-content-between align-items-baseline'>"
-    echo "<label class='form-label mb-0 small' for='modal-slider'>Solltemperatur</label>";
+           . "<label class='form-label mb-0 small' for='modal-slider'>Solltemperatur</label>"
-    echo "<span id='modal-slider-label' class='fw-semibold text-nowrap ms-2' style='color:#297195'>–</span>";
+           . "<span id='modal-slider-label' class='fw-semibold text-nowrap ms-2' style='color:#297195'>–</span>"
-    echo "</div>";
+           . "</div>"
-    echo "<input type='range' id='modal-slider' class='form-range range-color-track' min='10' max='30'>";
+           . "<input type='range' id='modal-slider' class='form-range range-color-track' min='10' max='30'>"
-    // Der Ist-Zustand kommt live ueber MQTT, nicht aus der Datenbank - der
+           // Der Ist-Zustand kommt live ueber MQTT, nicht aus der Datenbank -
-    // Browser hoert ohnehin schon auf Raumtemp/#, und ein Wert von vorhin
+           // der Browser hoert ohnehin schon auf Raumtemp/#, und ein Wert von
-    // waere neben dem Regler nur irrefuehrend.
+           // vorhin waere neben dem Regler nur irrefuehrend.
-    echo "<div class='d-flex flex-wrap gap-3 small text-body-secondary'>";
+           . "<div class='d-flex flex-wrap gap-3 small text-body-secondary'>"
-    echo "<span><i class='bi bi-thermometer-half me-1'></i><span data-mqtt='Temp[degC]'>–</span> °C</span>";
+           . "<span><i class='bi bi-thermometer-half me-1'></i><span data-mqtt='Temp[degC]'>–</span> °C</span>"
-    echo "<span><i class='bi bi-droplet me-1'></i><span data-mqtt='rHum[%]'>–</span> %rF</span>";
+           . "<span><i class='bi bi-droplet me-1'></i><span data-mqtt='rHum[%]'>–</span> %rF</span>"
-    echo "<span data-mqtt-heizung class='d-none'><i class='bi bi-fire text-danger me-1'></i>heizt</span>";
+           . "<span data-mqtt-heizung class='d-none'><i class='bi bi-fire text-danger me-1'></i>heizt</span>"
-    echo "</div>";
+           . "</div></div></div>";
-    echo "</div></div>";
+    $fertig["heizung"] = $karte;
 }
 
-if (!$gruppen && !$hatThermostat) {
+echo "<div class='p-1' id='roomView' data-room='" . htmlspecialchars($schluessel, ENT_QUOTES) . "'>";
+
+if (!$gruppen && !$fertig) {
     echo "<p class='text-body-secondary mb-0'>Diesem Raum ist noch nichts zugeordnet. "
        . "Das geht über das Haus-Symbol in der Karte „Automatismen“.</p>";
 }
 
-echo zeichneGruppen($gruppen);
+echo zeichneGruppen($gruppen, $fertig);
 
 echo "<div id='roomFeedback' class='small mt-2'></div>";
 echo "</div>";

css/solar.css

@@ -118,21 +118,24 @@ input[type='range']::-webkit-slider-runnable-track {
    Erzeugt von restricted/roomControls.php, verdrahtet in js/solar/homeMQTT.js.
    -------------------------------------------------------------------------- */
 
-/* Die Geraetegruppen als Tabs. Auf einem Handy passen fuenf Beschriftungen
+/* Die Geraetegruppen als Reiter. Auf einem Handy passen fuenf
-   nicht nebeneinander - dann scrollt die Leiste seitwaerts, statt die Namen
+   Beschriftungen nicht nebeneinander - dann scrollt die Leiste seitwaerts,
-   umzubrechen. */
+   statt die Namen umzubrechen. Die durchgehende Linie unter den Reitern
+   darf dabei nicht mitscrollen, sie gehoert an den unteren Rand. */
 .raum-tabs {
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
+  flex-wrap: nowrap;
 }
 .raum-tabs::-webkit-scrollbar {
   display: none;
 }
 .raum-tabs .nav-link {
-  padding: 0.25rem 0.6rem;
+  padding: 0.3rem 0.7rem;
   font-size: 0.8rem;
   white-space: nowrap;
+  border-bottom-color: transparent;
 }
 
 /* Waehrend ein Kommando unterwegs ist. Ein "Zu" an einer Jalousie dauert
@@ -225,8 +228,10 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 
 /* Schieberegler stehen dicht untereinander (Helligkeit, Farbe). Ohne den
-   Abstand kleben Beschriftung und Bahn aneinander. */
+   Abstand kleben Beschriftung und Bahn aneinander.
-.raum-regler + .raum-regler {
+   Die senkrechten Spalten stehen dagegen nebeneinander - dort wuerde der
+   Abstand die zweite Spalte um genau diese 0,35 rem tiefer setzen. */
+.raum-regler + .raum-regler:not(.raum-spalte) {
   margin-top: 0.35rem;
 }
 
@@ -275,12 +280,16 @@ input[type='range']::-webkit-slider-runnable-track {
 .raum-jalousie {
   display: flex;
   align-items: stretch;
-  gap: 0.6rem;
+  justify-content: space-between;
+  gap: 0.4rem;
 }
-/* Das Fensterbild nimmt den Platz zwischen Knoepfen und Reglern. */
+/* Das Fensterbild steht zwischen Knoepfen und Reglern - schmal, mit Luft
+   zu beiden Seiten. Der uebrige Platz verteilt sich auf die Zwischenraeume
+   (space-between an .raum-jalousie), statt das Bild breitzuziehen. */
 .raum-jalousie .raum-lamellen {
-  flex: 1 1 auto;
+  flex: 0 1 5rem;
-  min-width: 2.5rem;
+  min-width: 2.2rem;
+  margin: 0 0.4rem;
 }
 .raum-jalousie .dropdown {
   align-self: flex-start;

restricted/roomControls.php

@@ -147,6 +147,7 @@ function raumGruppenTitel()
 {
     return [
         "beschattung" => ["Beschattung", "bi-blinds"],
+        "heizung"     => ["Heizung", "bi-thermometer-half"],
         "licht"       => ["Licht", "bi-lightbulb"],
         "schalter"    => ["Schalten", "bi-toggle-on"],
         "sonstiges"   => ["Geräte", "bi-sliders"],
@@ -160,12 +161,16 @@ function raumGruppenTitel()
  * Vorher standen sie untereinander, und man scrollte an drei Rollladen
  * vorbei, um zum Licht zu kommen. Bei nur einer Gruppe bleibt die Leiste
  * weg - ein einzelner Tab beschriftet nur sich selbst.
+ *
+ * $fertig sind Gruppen, deren Inhalt der Aufrufer schon gebaut hat und die
+ * nicht aus einer Geraeteliste entstehen - die Heizung ist so eine: ein
+ * Regler fuer den Raum, nicht eine Karte je Geraet.
  */
-function zeichneGruppen($gruppen)
+function zeichneGruppen($gruppen, $fertig = [])
 {
     $vorhanden = [];
     foreach (raumGruppenTitel() as $form => $titel) {
-        if (!empty($gruppen[$form])) {
+        if (!empty($gruppen[$form]) || isset($fertig[$form])) {
             $vorhanden[$form] = $titel;
         }
     }
@@ -175,7 +180,7 @@ function zeichneGruppen($gruppen)
 
     $html = "";
     if (count($vorhanden) > 1) {
-        $html .= "<ul class='nav nav-pills flex-nowrap gap-1 mb-2 raum-tabs' role='tablist'>";
+        $html .= "<ul class='nav nav-tabs flex-nowrap mb-2 raum-tabs' role='tablist'>";
         $erster = true;
         foreach ($vorhanden as $form => $titel) {
             $html .= "<li class='nav-item' role='presentation'>"
@@ -194,8 +199,12 @@ function zeichneGruppen($gruppen)
     foreach ($vorhanden as $form => $titel) {
         $html .= "<div class='tab-pane fade" . ($erster ? " show active" : "") . "'"
                . " id='raumtab-" . $form . "' role='tabpanel'>";
-        foreach ($gruppen[$form] as $d) {
+        if (isset($fertig[$form])) {
-            $html .= zeichneGeraet($d, $form);
+            $html .= $fertig[$form];
+        } else {
+            foreach ($gruppen[$form] as $d) {
+                $html .= zeichneGeraet($d, $form);
+            }
         }
         $html .= "</div>";
         $erster = false;