Collapse table of contents when device is too small

Kale-Ko · Jul 18, 2024 · a745ed2 · a745ed2
1 parent b5ee7af
commit a745ed2
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -46,12 +46,16 @@
             <select id="settings-language" title="Language"></select>
 
             <button type="button" id="settings-theme" title="Theme">
-                <img class="lightmode hidden" src="/assets/lightmode/glyph.webp" width="24" height="24" alt="Lightmode">
-                <img class="darkmode" src="/assets/darkmode/glyph.webp" width="24" height="24" alt="Darkmode">
+                <img class="lightmode hidden" src="/assets/lightmode/glyph.webp" width="24" height="24" alt="Toggle Lightmode">
+                <img class="darkmode" src="/assets/darkmode/glyph.webp" width="24" height="24" alt="Toggle Darkmode">
             </button>
         </div>
     </nav>
 
+    <div id="table-of-contents-dropdown">
+        <img class="lightmode hidden" src="/assets/lightmode/menu.webp" width="32" height="32" alt="Open Table of Contents">
+        <img class="darkmode" src="/assets/darkmode/menu.webp" width="32" height="32" alt="Open Table of Contents">
+    </div>
     <nav id="table-of-contents-parent">
         <div id="table-of-contents"></div>
     </nav>

diff --git a/scripts/main.js b/scripts/main.js
@@ -369,6 +369,22 @@ async function fetchJsonCached(url, options) {
         });
         console.groupEnd();
     }
+    async function loadDeviceSupport() {
+        console.group("Loading device support...");
+        let body = document.querySelector("body");
+        let tableOfContentsDropdown = body.querySelector("#table-of-contents-dropdown");
+        let tableOfContentsActive = false;
+        tableOfContentsDropdown.addEventListener("click", () => {
+            tableOfContentsActive = !tableOfContentsActive;
+            if (tableOfContentsActive) {
+                body.classList.add("table-of-contents-active");
+            }
+            else {
+                body.classList.remove("table-of-contents-active");
+            }
+        });
+        console.groupEnd();
+    }
     async function runBackgroundCache() {
         console.group("Starting background caching...");
         for (let file of versionInfo.files) {
@@ -411,6 +427,7 @@ async function fetchJsonCached(url, options) {
         }
     });
     await loadSettings();
+    await loadDeviceSupport();
     await loadPage();
     runBackgroundCache();
 })();
diff --git a/scripts/main.ts b/scripts/main.ts
@@ -485,6 +485,27 @@ interface VersionInfo {
         console.groupEnd();
     }
 
+    async function loadDeviceSupport(): Promise<void> {
+        console.group("Loading device support...");
+
+        let body: HTMLBodyElement = document.querySelector("body") as HTMLBodyElement;
+
+        let tableOfContentsDropdown = body.querySelector("#table-of-contents-dropdown")!!;
+
+        let tableOfContentsActive = false;
+        tableOfContentsDropdown.addEventListener("click", (): void => {
+            tableOfContentsActive = !tableOfContentsActive;
+
+            if (tableOfContentsActive) {
+                body.classList.add("table-of-contents-active");
+            } else {
+                body.classList.remove("table-of-contents-active");
+            }
+        });
+
+        console.groupEnd();
+    }
+
     async function runBackgroundCache(): Promise<void> {
         console.group("Starting background caching...");
 
@@ -537,6 +558,7 @@ interface VersionInfo {
     });
 
     await loadSettings();
+    await loadDeviceSupport();
     await loadPage();
     runBackgroundCache();
 })();
diff --git a/styles/main.css b/styles/main.css
@@ -66,9 +66,8 @@ body {
     border-radius: 22px;
 
     width: calc(58vw - 4px);
-    /* 64% total */
 
-    margin: 3vh 1vw 3vh 1vw;
+    margin: 3vh 2vw 3vh 2vw;
     padding: 2vh 2vw 2vh 2vw;
 
     float: left;
@@ -81,10 +80,9 @@ body {
     border-radius: 22px;
 
     width: calc(16vw - 4px);
-    /* 20% total */
     height: calc(80vh - 4px);
 
-    margin: 3vh 1vw 3vh 2vw;
+    margin: 3vh 0vw 3vh 2vw;
     padding: 1vh 0vw 1vh 1vw;
 
     float: left;
@@ -142,9 +140,8 @@ body {
     border-radius: 22px;
 
     width: calc(12vw - 4px);
-    /* 16% total */
 
-    margin: 3vh 2vw 3vh 1vw;
+    margin: 3vh 2vw 3vh 0vw;
     padding: 1vh 1vw 1vh 0vw;
 
     float: right;
@@ -158,6 +155,46 @@ body {
     padding: 0%;
 }
 
+/*
+    Dropdowns
+*/
+
+#sidebar-dropdown,
+#table-of-contents-dropdown {
+    display: none;
+}
+
+@media only screen and (max-width: 1280px) {
+    #main {
+        width: calc(73vw - 4px);
+    }
+
+    #table-of-contents-parent {
+        display: none;
+
+        width: calc(16vw - 4px);
+
+        margin: 3vh 2vw 3vh 0vw;
+        padding: 1vh 1vw 1vh 0vw;
+    }
+
+    #table-of-contents-dropdown {
+        display: inline;
+
+        position: absolute;
+        top: calc(3vh + 12px);
+        right: calc(2vw + 12px);
+    }
+
+    body.table-of-contents-active #sidebar-parent {
+        display: none;
+    }
+
+    body.table-of-contents-active #table-of-contents-parent {
+        display: inline;
+    }
+}
+
 /*
     Text
 */