website/pikaos-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix features open and close + rework animation to be more pog

Browse Source
This commit is contained in:
ferrreo 2023-06-28 19:14:59 +01:00
parent 6c9b258040
commit 48a541fffe
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/widgets/AccordionWidget.astro
View File

@ -7,17 +7,19 @@ const { title, description } = Astro.props;
--- ---
<div <div
class="w-full rounded-lg border px-2 py-2 transition-[height] duration-500 ease-in-out dark:bg-slate-800" class="w-full rounded-lg border overflow-hidden closed transition-height duration-200 relative px-2 py-2 dark:bg-slate-800"
> >
<button <button
class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center" class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center"
> >
<h3 <h3
class="opacity-80 w-full transition-opacity duration-500 ease-in-out font-medium pointer-events-none" class="hed w-full font-bold pointer-events-none"
> >
{title} {title}
</h3> </h3>
<div class="pointer-events-none transition-transform duration-500 shrink-0 h-4 w-4"> <div
class="chev pointer-events-none transition-transform duration-200 shrink-0 h-4 w-4"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="shrink md:h-4 fill-slate-800 dark:fill-white transition-transform duration-500 ease-in-out pointer-events-none" class="shrink md:h-4 fill-slate-800 dark:fill-white transition-transform duration-500 ease-in-out pointer-events-none"
@ -25,26 +27,36 @@ const { title, description } = Astro.props;
> >
<path <path
d="M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" d="M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
></path></svg> ></path></svg
>
</div> </div>
</button> </button>
<p <p
style="max-height: 0px;" style="top: 50px"
class="overflow-hidden transition-all duration-500 text-center md:text-start ease-in-out pointer-events-none" class="text-center md:text-start absolute pointer-events-none"
> >
{description} {description}
</p> </p>
</div> </div>
<script> <script>
for (let e of document.getElementsByClassName("accordion")) { const accords = document.querySelectorAll(".accordion");
e.addEventListener("click", function (e) {
(e.target as HTMLElement).children[0].classList.toggle("opacity-80"); accords.forEach((accord) => {
(e.target as HTMLElement).children[0].classList.toggle("font-bold"); accord.addEventListener("click", (e) => {
(e.target as HTMLElement).children[1].classList.toggle("rotate-180"); const target = e.target as HTMLElement;
if (this.nextElementSibling.style.maxHeight === "0px") const parent = target.parentNode as HTMLElement;
this.nextElementSibling.style.maxHeight = "500px"; const next = target.nextElementSibling as HTMLElement;
else this.nextElementSibling.style.maxHeight = "0px"; const nextHeight = next.getBoundingClientRect().height;
parent.style.height = parent.style.height ? "" : 58 + nextHeight + "px";
parent.classList.toggle("closed");
target.querySelector(".chev")?.classList.toggle("rotate-180");
}); });
} });
</script> </script>
<style>
.closed {
height: 58px;
}
</style>