jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor product page

Browse source
This commit is contained in:
Emil Gulamov 2024-04-20 14:34:26 +04:00
parent 93121c1029
commit d2ecb964c2
1 changed files with 137 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/products/[...slug].astro
View file

@ -27,7 +27,9 @@ const { product } = Astro.props;
const pageTitle: string = `${product.data.title} | ${SITE.title}`; const pageTitle: string = `${product.data.title} | ${SITE.title}`;
--- ---
<MainLayout title={pageTitle}> <MainLayout
title={pageTitle}
>
<div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800"> <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
</div> </div>
@ -146,7 +148,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
)) ))
} }
</div> </div>
{ {
product.data.specificationsRight ? ( product.data.specificationsRight ? (
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0"> <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
@ -211,7 +212,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
</div> </div>
</div> </div>
</div> </div>
</MainLayout>
<div id="tabs-with-card-3" class="hidden" role="tabpanel"> <div id="tabs-with-card-3" class="hidden" role="tabpanel">
<div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5"> <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
@ -244,7 +244,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
</div> </div>
</div> </div>
</div> </div>
</MainLayout>
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script> <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
<script> <script>
window.addEventListener("load", () => { window.addEventListener("load", () => {
@ -279,13 +279,13 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
timeline.to( timeline.to(
"#fadeInUp", "#fadeInUp",
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" }, { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
"-=1.2" "-=1.2",
); );
timeline.to( timeline.to(
"#fadeInMoveRight", "#fadeInMoveRight",
{ duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" }, { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
"-=1.4" "-=1.4",
); );
timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 }); timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
@ -300,7 +300,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
"active", "active",
"bg-neutral-100", "bg-neutral-100",
"hover:border-transparent", "hover:border-transparent",
"dark:bg-white/[.05]" "dark:bg-white/[.05]",
); );
const tabId = btn.getAttribute("data-target"); const tabId = btn.getAttribute("data-target");
@ -314,7 +314,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle( changeHeadingStyle(
btn, btn,
["text-neutral-800", "dark:text-neutral-200"], ["text-neutral-800", "dark:text-neutral-200"],
["text-orange-400", "dark:text-orange-300"] ["text-orange-400", "dark:text-orange-300"],
); );
} }
} }
@ -324,7 +324,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
"active", "active",
"bg-neutral-100", "bg-neutral-100",
",hover:border-transparent", ",hover:border-transparent",
"dark:bg-white/[.05]" "dark:bg-white/[.05]",
); );
const tabId = button.getAttribute("data-target"); const tabId = button.getAttribute("data-target");
@ -338,14 +338,14 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle( changeHeadingStyle(
button, button,
["text-orange-400", "dark:text-orange-300"], ["text-orange-400", "dark:text-orange-300"],
["text-neutral-800", "dark:text-neutral-200"] ["text-neutral-800", "dark:text-neutral-200"],
); );
} }
function changeHeadingStyle( function changeHeadingStyle(
button: any, button: any,
addClasses: any, addClasses: any,
removeClasses: any removeClasses: any,
) { ) {
let heading = button.querySelector("span"); let heading = button.querySelector("span");
if (heading) { if (heading) {
@ -360,7 +360,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle( changeHeadingStyle(
tabButtons[0], tabButtons[0],
["text-orange-400", "dark:text-orange-300"], ["text-orange-400", "dark:text-orange-300"],
[] [],
); );
} }