chandlerswift/maps.chandlerswift.com
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Make categories collapsible

Browse source
This commit is contained in:
Chandler Swift 2023-07-25 20:35:57 -05:00
parent 7957523c3c
commit 77ff710b0d
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
2 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
main.js
View file

@ -26,8 +26,10 @@ const map = new Map({
for (let category of layerCategories) { for (let category of layerCategories) {
const catDiv = document.createElement("div"); const catDiv = document.createElement("div");
catDiv.innerHTML = ` catDiv.innerHTML = `
<h3>${category.name}</h3> <details open>
<summary>${category.name}</summary>
<ul></ul> <ul></ul>
</details>
`; `;
for (let layer of category.layers) { for (let layer of category.layers) {
const li = document.createElement("li"); const li = document.createElement("li");

12
style.css
View file

@ -16,7 +16,6 @@
aside { aside {
width: min(max(200px, 20%), 400px); width: min(max(200px, 20%), 400px);
margin-left: max(min(-200px, -20%), -400px); margin-left: max(min(-200px, -20%), -400px);
padding: 0 1em;
transition: 0.25s; transition: 0.25s;
} }
@ -41,6 +40,17 @@ aside .close {
display: none; display: none;
} }
aside details {
margin-bottom: 2em;
cursor: pointer;
}
aside summary {
font-size: 1.3em;
margin: .5em 0;
font-weight: bold;
}
@media (max-width: 400px) { @media (max-width: 400px) {
.nav-open #map { .nav-open #map {
left: 100%; left: 100%;