responsive filetree

2024-11-27 19:56:37 +01:00 · 2024-11-27 19:56:37 +01:00 · b35514c23b
commit b35514c23b
parent 4b025475db
3 changed files with 68 additions and 6 deletions
--- 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;
+  }
+}
--- 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;
+    }
+  });
 });
--- a/templates/cours.html
+++ b/templates/cours.html
@ -11,6 +11,7 @@
  <body>
    <header>{{>navbar.html}}</header>

+    <button type="button">Ouvrir le menu</button>
    <aside>
      <span data-json="{{filetree}} "></span>
    </aside>