From b279225a3ab3fe14065a7ba914e6b80d944acb9d Mon Sep 17 00:00:00 2001
From: Morris Brodersen <mb@morrisbrodersen.de>
Date: Sun, 19 Nov 2023 13:30:14 +0100
Subject: [PATCH] fix issues with custom list height  calc

---
 public/scripts/AppCollapsible.js  | 12 ++++++++----
 public/scripts/TodoApp.js         |  4 ++--
 public/scripts/TodoFrameCustom.js |  8 ++++++--
 public/styles/app-collapsible.css |  2 +-
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/public/scripts/AppCollapsible.js b/public/scripts/AppCollapsible.js
index ece272b..02003ee 100644
--- a/public/scripts/AppCollapsible.js
+++ b/public/scripts/AppCollapsible.js
@@ -3,11 +3,15 @@ export function AppCollapsible(el) {
     show: true,
   };
 
-  el.addEventListener('collapse', (e) => update({ show: !e.detail }));
+  setTimeout(() => el.classList.add('-animated'), 200);
 
-  el.querySelector('.bar > .toggle').addEventListener('click', () =>
-    update({ show: !state.show }),
-  );
+  el.addEventListener('collapse', (e) => {
+    update({ show: typeof e.detail === 'boolean' ? !e.detail : state.show });
+  });
+
+  el.querySelector('.bar > .toggle').addEventListener('click', () => {
+    update({ show: !state.show });
+  });
 
   update();
 
diff --git a/public/scripts/TodoApp.js b/public/scripts/TodoApp.js
index acbd343..1f0a937 100644
--- a/public/scripts/TodoApp.js
+++ b/public/scripts/TodoApp.js
@@ -33,7 +33,7 @@ export function TodoApp(el) {
     </div>
     <footer class="app-footer">
       <p>
-        VANILLA TODO &copy 2020-2022 <a href="https://morrisbrodersen.de">Morris Brodersen</a>
+        VANILLA TODO &copy; 2020&ndash;2023 <a href="https://morrisbrodersen.de">Morris Brodersen</a>
         &mdash; A case study on viable techniques for vanilla web development.
         <a href="https://github.com/morris/vanilla-todo">About →</a>
       </p>
@@ -113,7 +113,7 @@ export function TodoApp(el) {
     );
 
     el.querySelectorAll('.app-collapsible').forEach((el) =>
-      el.dispatchEvent(new CustomEvent('collapse', { detail: false })),
+      el.dispatchEvent(new CustomEvent('collapse')),
     );
   }
 
diff --git a/public/scripts/TodoFrameCustom.js b/public/scripts/TodoFrameCustom.js
index 057f0ec..efee7e1 100644
--- a/public/scripts/TodoFrameCustom.js
+++ b/public/scripts/TodoFrameCustom.js
@@ -118,14 +118,18 @@ export function TodoFrameCustom(el) {
     const container = el.querySelector('.container');
 
     for (let i = 0, l = container.children.length; i < l; ++i) {
+      container.children[i].style.height = `auto`;
       height = Math.max(container.children[i].offsetHeight, height);
     }
 
-    el.style.height = `${height + 50}px`;
+    el.style.height = `${height + 80}px`;
 
     for (let i = 0, l = container.children.length; i < l; ++i) {
-      container.children[i].style.height = `${height}px`;
+      container.children[i].style.height = `${height + 30}px`;
     }
+
+    // update collapsible on changing heights
+    el.dispatchEvent(new CustomEvent('collapse', { bubbles: true }));
   }
 
   function getLists() {
diff --git a/public/styles/app-collapsible.css b/public/styles/app-collapsible.css
index f779cd3..b6c70c2 100644
--- a/public/styles/app-collapsible.css
+++ b/public/styles/app-collapsible.css
@@ -10,7 +10,7 @@
   background: #fff;
 }
 
-.app-collapsible > .body {
+.app-collapsible.-animated > .body {
   transition: height 0.2s ease-out;
   overflow: hidden;
 }