mirror/vanilla-todo
1
0
Fork 0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-08-18 20:03:04 +02:00
Code Issues Releases Wiki Activity

fix issues with custom list height calc

Browse Source
This commit is contained in:
Morris Brodersen
2023-11-19 13:30:14 +01:00
parent 6930416e4d
commit b279225a3a
4 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/scripts/AppCollapsible.js
View File

@@ -3,11 +3,15 @@ export function AppCollapsible(el) {
show: true, show: true,
}; };
el.addEventListener('collapse', (e) => update({ show: !e.detail })); setTimeout(() => el.classList.add('-animated'), 200);
el.querySelector('.bar > .toggle').addEventListener('click', () => el.addEventListener('collapse', (e) => {
update({ show: !state.show }), update({ show: typeof e.detail === 'boolean' ? !e.detail : state.show });
); });
el.querySelector('.bar > .toggle').addEventListener('click', () => {
update({ show: !state.show });
});
update(); update();

4
public/scripts/TodoApp.js
View File

@@ -33,7 +33,7 @@ export function TodoApp(el) {
</div> </div>
<footer class="app-footer"> <footer class="app-footer">
<p> <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. &mdash; A case study on viable techniques for vanilla web development.
<a href="https://github.com/morris/vanilla-todo">About →</a> <a href="https://github.com/morris/vanilla-todo">About →</a>
</p> </p>
@@ -113,7 +113,7 @@ export function TodoApp(el) {
); );
el.querySelectorAll('.app-collapsible').forEach((el) => el.querySelectorAll('.app-collapsible').forEach((el) =>
el.dispatchEvent(new CustomEvent('collapse', { detail: false })), el.dispatchEvent(new CustomEvent('collapse')),
); );
} }

8
public/scripts/TodoFrameCustom.js
View File

@@ -118,14 +118,18 @@ export function TodoFrameCustom(el) {
const container = el.querySelector('.container'); const container = el.querySelector('.container');
for (let i = 0, l = container.children.length; i < l; ++i) { 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); 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) { 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() { function getLists() {

2
public/styles/app-collapsible.css
View File

@@ -10,7 +10,7 @@
background: #fff; background: #fff;
} }
.app-collapsible > .body { .app-collapsible.-animated > .body {
transition: height 0.2s ease-out; transition: height 0.2s ease-out;
overflow: hidden; overflow: hidden;
} }