klappbare Räume 4

apps/ui/templates/dashboard.html

@@ -47,20 +47,18 @@
         }
         
         .collapse-all-btn {
-            padding: 0.75rem 1.5rem;
+            padding: 0.75rem;
             background: #667eea;
             color: white;
             border: none;
             border-radius: 8px;
-            font-size: 0.875rem;
-            font-weight: 600;
             cursor: pointer;
             transition: all 0.2s;
-            white-space: nowrap;
             min-height: 44px;
+            min-width: 44px;
             display: flex;
             align-items: center;
-            gap: 0.5rem;
+            justify-content: center;
         }
         
         .collapse-all-btn:hover {
@@ -74,7 +72,7 @@
         }
         
         .collapse-all-icon {
-            font-size: 1rem;
+            font-size: 1.25rem;
             transition: transform 0.3s;
             line-height: 1;
         }
@@ -485,9 +483,8 @@
                 <h1>🏠 Home Automation</h1>
                 <p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
             </div>
-            <button class="collapse-all-btn" onclick="toggleAllRooms()">
+            <button class="collapse-all-btn" onclick="toggleAllRooms()" title="Alle Räume ein-/ausklappen">
                 <span class="collapse-all-icon" id="collapse-all-icon">▼</span>
-                <span id="collapse-all-text">Alle einklappen</span>
             </button>
         </header>
         
@@ -647,7 +644,6 @@
         function toggleAllRooms() {
             const allContents = document.querySelectorAll('.room-content');
             const allToggles = document.querySelectorAll('.room-toggle');
-            const buttonText = document.getElementById('collapse-all-text');
             const buttonIcon = document.getElementById('collapse-all-icon');
             
             // Check if any room is expanded
@@ -657,13 +653,11 @@
                 // Collapse all
                 allContents.forEach(content => content.classList.add('collapsed'));
                 allToggles.forEach(toggle => toggle.classList.add('collapsed'));
-                buttonText.textContent = 'Alle ausklappen';
                 buttonIcon.classList.add('collapsed');
             } else {
                 // Expand all
                 allContents.forEach(content => content.classList.remove('collapsed'));
                 allToggles.forEach(toggle => toggle.classList.remove('collapsed'));
-                buttonText.textContent = 'Alle einklappen';
                 buttonIcon.classList.remove('collapsed');
             }
         }