feat: реализовать полную минимизацию секций до полоски
- Кнопка 'свернуть все' теперь минимизирует секции до минимальной высоты - Добавлено состояние 'minimized' для полного сворачивания - Секции становятся тонкими полосками с заголовками - Максимальное освобождение места для списка контейнеров - Сохранение состояния минимизации в localStorage - Улучшенная логика переключения между состояниями - Оптимизированный CSS для минималистичного отображения Автор: Сергей Антропов Сайт: https://devops.org.ru
This commit is contained in:
Сергей Антропов
parent
5a5d98784a
commit
277e88faac
@ -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 = '<i class="fas fa-compress-alt"></i>';
|
||||
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 = '<i class="fas fa-compress-alt"></i>';
|
||||
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 = '<i class="fas fa-expand-alt"></i>';
|
||||
els.minimizeAllBtn.title = 'Развернуть все секции';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user