In the JS UI, turn each category of Activity into a collapsible section to save space #147

This commit is contained in:
Ian Renton
2026-09-18 15:45:23 +01:00
parent 81cd686a00
commit bf9b4ac68c
7 changed files with 126 additions and 51 deletions
+45
View File
@@ -279,6 +279,51 @@ div#map {
}
/* COLLAPSIBLE FILTER SECTIONS (e.g. Activities panel) */
ul.filter-section-list {
margin-bottom: 0;
}
button.btn-toggle {
display: block;
width: 100%;
padding: .25rem 0;
font-weight: 600;
text-align: left;
color: var(--bs-emphasis-color);
background-color: transparent;
border: 0;
}
button.btn-toggle:hover,
button.btn-toggle:focus {
background-color: transparent;
box-shadow: none;
}
button.btn-toggle::before {
display: inline-block;
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
[data-bs-theme="dark"] button.btn-toggle::before {
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}
button.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
div.filter-section-body {
padding-left: 1.25em;
}
/* BANDS PANEL */
div#bands-container {