miki

commit 11dbb6d694f722698655443187bb622133909563
parent 48c426693e94096a827371155befde2b5fcc4727
Author: weetat <wtenison@protonmail.com>
Date:   Thu, 13 Feb 2025 18:50:46 +0000

Added collapsible buttons to header layout.

Diffstat:
M
web/index.html
 | 
17
+++++++++++++++--
A
web/script.js
 | 
33
+++++++++++++++++++++++++++++++++
M
web/styles.css
 | 
11
++---------

3 files changed, 50 insertions(+), 11 deletions(-)
diff --git a/web/index.html b/web/index.html
@@ -5,6 +5,7 @@
     <title>Miki</title>
     <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="/web/styles.css" />
+    <script src="/web/script.js" defer></script>
 </head>
 
 <body>
@@ -12,9 +13,21 @@
     <header>
         <section class="_content">
 
-            <div id="left">MENU</div>
+            <div id="left" class="collapsible_">
+                <div class="_button">MENU</div>
+                <div class="_content">
+                    <p>TEST MENU</p> 
+                </div>
+            </div>
+
             <div id="title">TEST</div>
-            <div id="right">SEARCH</div>
+
+            <div id="right" class="collapsible_">
+                <div class="_button">SEARCH</div>
+                <div class="_content">
+                    <p>TEST SEARCH</p>
+                </div>
+            </div>
 
         </section>
     </header>
diff --git a/web/script.js b/web/script.js
@@ -0,0 +1,32 @@
+let collapsables = document.getElementsByClassName("collapsible_");
+for (var i = 0; i < collapsables.length; i++) {
+
+    let children = collapsables[i].children;
+    let header = children[0];
+    let content = children[1];
+
+    // Runtime event
+    header.addEventListener("click", function () {
+        let _node = this.closest(".collapsible_");
+        let _header = _node.children[0];
+        let _content = _node.children[1];
+
+        let _heightMod = _content.scrollHeight;
+        if (_header.classList.toggle("active")) {
+            _content.style.height = _content.scrollHeight + "px";
+        } else {
+            _content.style.height = "0px";
+            _heightMod = -(_heightMod);
+        }
+
+        let _parentCollapsible = _node.parentElement.closest(".collapsible_");
+        while (_parentCollapsible) {
+            let _parentContent = _parentCollapsible.children[1];
+            let _contentHeight = parseFloat(_parentContent.style.height);
+
+           _parentContent.style.height = _contentHeight + _heightMod + "px";
+
+            _parentCollapsible = _parentCollapsible.parentElement.closest(".collapsible_");
+        }
+    });
+}
+\ No newline at end of file
diff --git a/web/styles.css b/web/styles.css
@@ -104,11 +104,11 @@
 
         >._content {
             width: min(100vw, var(--miki_page__max-width)); 
+            padding: var(--miki_padding--half);
 
             display: inline-grid;
             grid-auto-flow: column;
             justify-content: space-between;
-            justify-items: center;
             align-items: center;
         }
 
@@ -118,15 +118,10 @@
 
         #title {
             position: absolute;
+            justify-self: anchor-center;
             font-size: calc(var(--miki_header__height) * .33);
         }
 
-        #left {
-        }
-
-        #right {
-        }
-
         .collapsible_ {
             >._button {
                 padding: var(--miki_padding);
@@ -266,8 +261,6 @@
         height: 100%;
         padding: var(--miki_padding);
         margin: 0;
-
-        display: grid;
     }
 
     .__container_bg-1 {