mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2026-09-20 14:27:42 +00:00
In the JS UI, turn each category of Activity into a collapsible section to save space #147
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user