diff --git a/templates/index.html b/templates/index.html index 8a5cd5a..429857c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -174,6 +174,26 @@ a{color:var(--link)} opacity: 0; } +/* Полностью свернутое состояние - только заголовки */ +.control-group.minimized { + margin-bottom: 4px; +} + +.control-group.minimized .control-header { + padding: 8px 12px; + font-size: 10px; +} + +.control-group.minimized .control-header label { + font-size: 10px; + text-transform: none; + letter-spacing: 0; +} + +.control-group.minimized .control-content { + display: none; +} + .control-group label { display: block; font-size: 11px; @@ -1382,11 +1402,21 @@ document.addEventListener('DOMContentLoaded', () => { if (e.target.closest('.collapse-btn')) return; // Не сворачиваем при клике на кнопку const group = header.closest('.control-group'); - group.classList.toggle('collapsed'); - // Сохраняем состояние в localStorage - const section = group.dataset.section; - localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + // Если секция минимизирована, сначала разворачиваем + if (group.classList.contains('minimized')) { + group.classList.remove('minimized'); + group.classList.add('collapsed'); + const section = group.dataset.section; + localStorage.setItem(`lb_minimized_${section}`, 'false'); + localStorage.setItem(`lb_collapsed_${section}`, 'true'); + } else { + // Обычное сворачивание/разворачивание + group.classList.toggle('collapsed'); + const section = group.dataset.section; + localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + localStorage.setItem(`lb_minimized_${section}`, 'false'); + } }); }); @@ -1395,49 +1425,69 @@ document.addEventListener('DOMContentLoaded', () => { btn.addEventListener('click', (e) => { e.stopPropagation(); const group = btn.closest('.control-group'); - group.classList.toggle('collapsed'); - // Сохраняем состояние в localStorage - const section = group.dataset.section; - localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + // Если секция минимизирована, сначала разворачиваем + if (group.classList.contains('minimized')) { + group.classList.remove('minimized'); + group.classList.add('collapsed'); + const section = group.dataset.section; + localStorage.setItem(`lb_minimized_${section}`, 'false'); + localStorage.setItem(`lb_collapsed_${section}`, 'true'); + } else { + // Обычное сворачивание/разворачивание + group.classList.toggle('collapsed'); + const section = group.dataset.section; + localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + localStorage.setItem(`lb_minimized_${section}`, 'false'); + } }); }); // Восстанавливаем состояние секций из localStorage или сворачиваем по умолчанию document.querySelectorAll('.control-group.collapsible').forEach(group => { const section = group.dataset.section; - const savedState = localStorage.getItem(`lb_collapsed_${section}`); + const savedCollapsed = localStorage.getItem(`lb_collapsed_${section}`); + const savedMinimized = localStorage.getItem(`lb_minimized_${section}`); // Если состояние не сохранено, сворачиваем по умолчанию - if (savedState === null) { + if (savedCollapsed === null && savedMinimized === null) { group.classList.add('collapsed'); localStorage.setItem(`lb_collapsed_${section}`, 'true'); - } else if (savedState === 'true') { + localStorage.setItem(`lb_minimized_${section}`, 'false'); + } else if (savedMinimized === 'true') { + group.classList.add('minimized'); + group.classList.remove('collapsed'); + } else if (savedCollapsed === 'true') { group.classList.add('collapsed'); + group.classList.remove('minimized'); } }); // Обработчик для кнопки минимизации всех секций if (els.minimizeAllBtn) { els.minimizeAllBtn.addEventListener('click', () => { - const allCollapsed = document.querySelectorAll('.control-group.collapsible').length === - document.querySelectorAll('.control-group.collapsible.collapsed').length; + const allMinimized = document.querySelectorAll('.control-group.collapsible').length === + document.querySelectorAll('.control-group.collapsible.minimized').length; - // Если все секции свернуты, разворачиваем их - if (allCollapsed) { + // Если все секции минимизированы, разворачиваем их + if (allMinimized) { document.querySelectorAll('.control-group.collapsible').forEach(group => { + group.classList.remove('minimized'); + group.classList.add('collapsed'); // Возвращаем к обычному свернутому состоянию + const section = group.dataset.section; + localStorage.setItem(`lb_collapsed_${section}`, 'true'); + localStorage.setItem(`lb_minimized_${section}`, 'false'); + }); + els.minimizeAllBtn.innerHTML = ''; + els.minimizeAllBtn.title = 'Минимизировать все секции'; + } else { + // Иначе минимизируем все секции до полоски + document.querySelectorAll('.control-group.collapsible').forEach(group => { + group.classList.add('minimized'); group.classList.remove('collapsed'); const section = group.dataset.section; localStorage.setItem(`lb_collapsed_${section}`, 'false'); - }); - els.minimizeAllBtn.innerHTML = ''; - els.minimizeAllBtn.title = 'Свернуть все секции'; - } else { - // Иначе сворачиваем все секции - document.querySelectorAll('.control-group.collapsible').forEach(group => { - group.classList.add('collapsed'); - const section = group.dataset.section; - localStorage.setItem(`lb_collapsed_${section}`, 'true'); + localStorage.setItem(`lb_minimized_${section}`, 'true'); }); els.minimizeAllBtn.innerHTML = ''; els.minimizeAllBtn.title = 'Развернуть все секции';