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:34:18 +01:00
parent 48a541fffe
commit 5eb78d7a66
1 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,20 +6,12 @@ type Props = {
const { title, description } = Astro.props; const { title, description } = Astro.props;
--- ---
<div <accordion-widget class="w-full rounded-lg border block overflow-hidden closed transition-height duration-200 relative px-2 py-2 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 class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center">
> <h3 class="hed w-full font-bold pointer-events-none">
<button
class="w-full text-center md:text-start accordion flex flex-row gap-x-1 py-1 justify-between items-center"
>
<h3
class="hed w-full font-bold pointer-events-none"
>
{title} {title}
</h3> </h3>
<div <div class="chev pointer-events-none transition-transform duration-200 shrink-0 h-4 w-4">
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"
@ -31,20 +23,17 @@ const { title, description } = Astro.props;
> >
</div> </div>
</button> </button>
<p <p style="top: 50px" class="text-center md:text-start absolute pointer-events-none">
style="top: 50px"
class="text-center md:text-start absolute pointer-events-none"
>
{description} {description}
</p> </p>
</div> </accordion-widget>
<script> <script>
const accords = document.querySelectorAll(".accordion"); class AccordionWidget extends HTMLElement {
constructor() {
accords.forEach((accord) => { super();
accord.addEventListener("click", (e) => { this.addEventListener("click", (event) => {
const target = e.target as HTMLElement; const target = event.target as HTMLElement;
const parent = target.parentNode as HTMLElement; const parent = target.parentNode as HTMLElement;
const next = target.nextElementSibling as HTMLElement; const next = target.nextElementSibling as HTMLElement;
const nextHeight = next.getBoundingClientRect().height; const nextHeight = next.getBoundingClientRect().height;
@ -52,7 +41,10 @@ const { title, description } = Astro.props;
parent.classList.toggle("closed"); parent.classList.toggle("closed");
target.querySelector(".chev")?.classList.toggle("rotate-180"); target.querySelector(".chev")?.classList.toggle("rotate-180");
}); });
}); }
}
customElements.define("accordion-widget", AccordionWidget);
</script> </script>
<style> <style>