From b35514c23ba7b835dd52a46e57998782eb096ce9 Mon Sep 17 00:00:00 2001 From: Mylloon Date: Wed, 27 Nov 2024 19:56:37 +0100 Subject: [PATCH] responsive filetree --- static/css/cours.css | 48 ++++++++++++++++++++++++++++++++++++++------ static/js/cours.js | 25 +++++++++++++++++++++++ templates/cours.html | 1 + 3 files changed, 68 insertions(+), 6 deletions(-) diff --git a/static/css/cours.css b/static/css/cours.css index 0952432..1391639 100644 --- a/static/css/cours.css +++ b/static/css/cours.css @@ -2,6 +2,7 @@ :root { --max-width: 900px; + --sidebar-width: 20%; } main { @@ -12,8 +13,8 @@ main { aside { float: left; margin-left: 20px; - position: sticky; - top: 0; + position: absolute; + width: var(--sidebar-width); } aside ul { @@ -50,12 +51,47 @@ aside li.directory { cursor: pointer; } -@media print { - aside { - display: none; - } +main { + margin-left: var(--sidebar-width); } main img { 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; + } +} diff --git a/static/js/cours.js b/static/js/cours.js index 82cff88..da7cec2 100644 --- a/static/js/cours.js +++ b/static/js/cours.js @@ -112,4 +112,29 @@ window.addEventListener("load", () => { 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; + } + }); }); diff --git a/templates/cours.html b/templates/cours.html index 1aadc39..47b5400 100644 --- a/templates/cours.html +++ b/templates/cours.html @@ -11,6 +11,7 @@
{{>navbar.html}}
+