wn/home-automation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

klappbare Räume 3

Browse Source
This commit is contained in:
Wolfgang Hottgenroth
2025-11-08 21:04:51 +01:00
parent f8144496b3
commit 54f53705c0
1 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/ui/templates/dashboard.html
View File

@@ -58,6 +58,9 @@
transition: all 0.2s; transition: all 0.2s;
white-space: nowrap; white-space: nowrap;
min-height: 44px; min-height: 44px;
display: flex;
align-items: center;
gap: 0.5rem;
} }
.collapse-all-btn:hover { .collapse-all-btn:hover {
@@ -70,6 +73,16 @@
transform: translateY(0); transform: translateY(0);
} }
.collapse-all-icon {
font-size: 1rem;
transition: transform 0.3s;
line-height: 1;
}
.collapse-all-icon.collapsed {
transform: rotate(-90deg);
}
.status { .status {
display: inline-block; display: inline-block;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
@@ -473,6 +486,7 @@
<p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p> <p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
</div> </div>
<button class="collapse-all-btn" onclick="toggleAllRooms()"> <button class="collapse-all-btn" onclick="toggleAllRooms()">
<span class="collapse-all-icon" id="collapse-all-icon">▼</span>
<span id="collapse-all-text">Alle einklappen</span> <span id="collapse-all-text">Alle einklappen</span>
</button> </button>
</header> </header>
@@ -634,6 +648,7 @@
const allContents = document.querySelectorAll('.room-content'); const allContents = document.querySelectorAll('.room-content');
const allToggles = document.querySelectorAll('.room-toggle'); const allToggles = document.querySelectorAll('.room-toggle');
const buttonText = document.getElementById('collapse-all-text'); const buttonText = document.getElementById('collapse-all-text');
const buttonIcon = document.getElementById('collapse-all-icon');
// Check if any room is expanded // Check if any room is expanded
const anyExpanded = Array.from(allContents).some(content => !content.classList.contains('collapsed')); const anyExpanded = Array.from(allContents).some(content => !content.classList.contains('collapsed'));
@@ -643,11 +658,13 @@
allContents.forEach(content => content.classList.add('collapsed')); allContents.forEach(content => content.classList.add('collapsed'));
allToggles.forEach(toggle => toggle.classList.add('collapsed')); allToggles.forEach(toggle => toggle.classList.add('collapsed'));
buttonText.textContent = 'Alle ausklappen'; buttonText.textContent = 'Alle ausklappen';
buttonIcon.classList.add('collapsed');
} else { } else {
// Expand all // Expand all
allContents.forEach(content => content.classList.remove('collapsed')); allContents.forEach(content => content.classList.remove('collapsed'));
allToggles.forEach(toggle => toggle.classList.remove('collapsed')); allToggles.forEach(toggle => toggle.classList.remove('collapsed'));
buttonText.textContent = 'Alle einklappen'; buttonText.textContent = 'Alle einklappen';
buttonIcon.classList.remove('collapsed');
} }
} }