mirror/vanilla-todo
1
0
Fork 0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-08-18 11:51:20 +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,
};
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();

4
public/scripts/TodoApp.js
View File

@@ -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')),
);
}

8
public/scripts/TodoFrameCustom.js
View File

@@ -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() {

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

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