From 277e88faac7ad4f7ac37205d38e4a4c2439095ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9=20=D0=90=D0=BD=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=BF=D0=BE=D0=B2?= Date: Sat, 16 Aug 2025 12:58:34 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D1=80=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D1=82=D1=8C=20=D0=BF=D0=BE=D0=BB=D0=BD=D1=83?= =?UTF-8?q?=D1=8E=20=D0=BC=D0=B8=D0=BD=D0=B8=D0=BC=D0=B8=D0=B7=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D1=8E=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8=D0=B9=20=D0=B4?= =?UTF-8?q?=D0=BE=20=D0=BF=D0=BE=D0=BB=D0=BE=D1=81=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Кнопка 'свернуть все' теперь минимизирует секции до минимальной высоты - Добавлено состояние 'minimized' для полного сворачивания - Секции становятся тонкими полосками с заголовками - Максимальное освобождение места для списка контейнеров - Сохранение состояния минимизации в localStorage - Улучшенная логика переключения между состояниями - Оптимизированный CSS для минималистичного отображения Автор: Сергей Антропов Сайт: https://devops.org.ru --- templates/index.html | 98 +++++++++++++++++++++++++++++++++----------- 1 file changed, 74 insertions(+), 24 deletions(-) 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 = 'Развернуть все секции';