Anri/mylloon.fr
1
0
Fork 0
Code Issues 14 Pull requests 2 Releases Packages 1 Activity Actions

responsive filetree

Browse source
This commit is contained in:
Mylloon 2024-11-27 19:56:37 +01:00
parent 4b025475db
commit b35514c23b
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
3 changed files with 68 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
static/css/cours.css
View file

@ -2,6 +2,7 @@
:root { :root {
--max-width: 900px; --max-width: 900px;
--sidebar-width: 20%;
} }
main { main {
@ -12,8 +13,8 @@ main {
aside { aside {
float: left; float: left;
margin-left: 20px; margin-left: 20px;
position: sticky; position: absolute;
top: 0; width: var(--sidebar-width);
} }
aside ul { aside ul {
@ -50,12 +51,47 @@ aside li.directory {
cursor: pointer; cursor: pointer;
} }
@media print { main {
aside { margin-left: var(--sidebar-width);
display: none;
}
} }
main img { main img {
max-width: 100%; max-width: 100%;
} }
button {
display: none;
}
@media only screen and (max-width: 640px) {
aside {
display: none;
}
main {
margin-left: unset;
}
button {
width: 100%;
display: block;
position: sticky;
top: 10px;
z-index: 1;
}
input {
width: 80vw;
}
}
@media print {
aside {
display: none;
}
main {
margin-left: unset;
}
}

25
static/js/cours.js
View file

@ -112,4 +112,29 @@ window.addEventListener("load", () => {
uncollapse(last_openeded); uncollapse(last_openeded);
} }
// Responsive menu
const button = document.getElementsByTagName("button")[0];
const content = document.getElementsByTagName("main")[0];
let menuOpen = false;
const initialButtonTextContent = button.textContent;
button.addEventListener("click", () => {
menuOpen = !menuOpen;
if (menuOpen) {
fileTreeElement.style.display = "block";
content.style.display = "none";
button.textContent = "Fermer le menu";
} else {
fileTreeElement.style.display = "";
content.style.display = "";
button.textContent = initialButtonTextContent;
}
});
window.addEventListener("resize", () => {
if (menuOpen && window.innerWidth > 640) {
menuOpen = !menuOpen;
fileTreeElement.style.display = "";
content.style.display = "";
button.textContent = initialButtonTextContent;
}
});
}); });

1
templates/cours.html
View file

@ -11,6 +11,7 @@
<body> <body>
<header>{{>navbar.html}}</header> <header>{{>navbar.html}}</header>
<button type="button">Ouvrir le menu</button>
<aside> <aside>
<span data-json="{{filetree}} "></span> <span data-json="{{filetree}} "></span>
</aside> </aside>