Страница 2 из 2
Re: Сворачивание панели фильтров
Добавлено: 20 янв 2025, 19:49
nruslan2
я к тому что js скрипты можно сразу в системе прописывать,а не скрипты делать!
Но у скриптов есть один плюс - возможность отключать и не думать где js был прописан)
Re: Сворачивание панели фильтров
Добавлено: 10 июл 2025, 20:51
pantale0n
Добрый день!
На сущностях работает отлично, а в канбан отчете начинает работать только после shift+f5, можете пояснить что нужно изменить , чтобы в отчете канбан также срабатывало сворачивание?
Parazit00 писал(а): 20 янв 2025, 18:24
Я думаю, что этот вариант тоже может быть полезен, если кто-то не хочет вносить изменения в скрипт.
CSS
Код: Выделить всё
/* Стили для скрытия/отображения фильтров */
ul[class*="list-inline filters-panels"] {
transition: max-height 0.3s ease, padding 0.3s ease;
overflow: hidden;
max-height: 500px; /* Установить максимальную высоту для видимых фильтров */
}
ul[class*="list-inline filters-panels"].collapsed {
max-height: 0;
padding: 0;
margin: 0;
}
/* Стили кнопки "Панель фильтров" */
#toggle-all-filters {
background-color: #337ab7;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
border-radius: 20px; /* Увеличено значение для более закругленных углов */
transition: background-color 0.3s ease;
margin-bottom: 10px;
}
JS
Код: Выделить всё
<script>
document.addEventListener("DOMContentLoaded", function () {
const filterGroups = document.querySelectorAll('ul[class*="list-inline filters-panels"]');
if (filterGroups.length > 0) {
const filtersContainer = filterGroups[0].parentNode;
// Создаем кнопку
const button = document.createElement("button");
button.id = "toggle-all-filters";
button.textContent = "Панель фильтров";
// Вставляем кнопку перед первым фильтром
filtersContainer.insertBefore(button, filterGroups[0]);
// Проверка состояния сворачивания из localStorage
const collapsedState = localStorage.getItem('filtersCollapsed');
if (collapsedState === 'true') {
filterGroups.forEach(group => group.classList.add("collapsed"));
} else {
filterGroups.forEach(group => group.classList.remove("collapsed"));
}
// Обработчик для кнопки
button.addEventListener("click", function () {
const isCollapsed = [...filterGroups].every(group => group.classList.contains("collapsed"));
filterGroups.forEach(group => {
group.classList.toggle("collapsed", !isCollapsed);
});
// Сохраняем текущее состояние в localStorage
localStorage.setItem('filtersCollapsed', !isCollapsed);
});
}
});
</script>