Skip to content

Commit 4c6ecbc

Browse files
webstackdevwebstackdev
committed
Move confetti canvas to absolutely positioned for animation
1 parent 115b339 commit 4c6ecbc

3 files changed

Lines changed: 76 additions & 82 deletions

File tree

‎_TODO.md‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,3 @@ https://aws.plainenglish.io/how-to-build-a-chatbot-using-aws-lex-and-lambda-in-2
3232
- `0/2000` characters should show number of characters left instead
3333

3434
## Content Issues
35-
36-
We fixed the Confetti animation for the Contact page by wrapping the entire Contact form in the Confetti component - src/components/Pages/Contact/index.astro
37-
38-
We have the same problem of the Confetti animation being constrained to a small row of the page in the other places where it's used - the Download CTA and the Newsletter CTA layouts. But in those cases, there's no way we can wrap the page content inside the component - it's internal to the CTA components, and they're designed to be used by authors inside of article MDX files.
39-
40-
I think we need to refactor the Confetti component to create a canvas that uses absolute positioning the

‎src/components/Animations/Confetti/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const { classes = '', canvasClasses = '' } = Astro.props
1515
---
1616

1717
<confetti-animation
18-
class:list={["confetti-animation relative block", classes]}
18+
class:list={["confetti-animation block", classes]}
1919
data-testid="confetti-animation"
2020
>
2121
<canvas
2222
data-confetti-canvas
2323
aria-hidden="true"
2424
class:list={[
25-
'absolute inset-0 w-full h-full pointer-events-none z-(--z-modal)',
25+
'fixed inset-0 h-dvh w-screen pointer-events-none z-(--z-modal)',
2626
canvasClasses,
2727
]}
2828
></canvas>

‎src/components/Pages/Contact/index.astro‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,11 @@ const { content, prefilledProjectType = '' } = Astro.props
119119
{/* <Map /> */}
120120

121121
{/** Contact Form Section */}
122-
<Confetti classes="block" canvasClasses="fixed inset-0 h-dvh w-screen">
123-
<section class="pt-5 pb-8 bg-page-offset" aria-label="Contact form">
124-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
125-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start" data-sticky-container>
126-
{/** Contact Form */}
127-
<div class="lg:col-span-2 bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg">
122+
<section class="pt-5 pb-8 bg-page-offset" aria-label="Contact form">
123+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
124+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start" data-sticky-container>
125+
{/** Contact Form */}
126+
<div class="lg:col-span-2 bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg">
128127
{/** Contact FormHeader */}
129128
<div class="mb-8">
130129
<h2 class="text-page-inverse text-2xl md:text-3xl font-semibold mb-3">
@@ -372,20 +371,22 @@ const { content, prefilledProjectType = '' } = Astro.props
372371
))}
373372
</div>
374373

375-
<div class="flex justify-end">
376-
{/** Intentionally not using Button component. */}
377-
<button
378-
type="submit"
379-
class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
380-
id="submitBtn"
381-
>
382-
<span class="btn-text">{content.form.submitButtonText}</span>
383-
<span class="btn-loading hidden">
384-
<Icon icon="spinner" color="inherit" size={5} classes="mr-2" />
385-
{content.form.waitingText}
386-
</span>
387-
</button>
388-
</div>
374+
<Confetti classes="inline-block self-end">
375+
<div class="flex justify-end">
376+
{/** Intentionally not using Button component. */}
377+
<button
378+
type="submit"
379+
class="inline-flex items-center justify-center px-8 py-4 bg-page-inverse hover:bg-content-active text-content-inverse font-semibold rounded-xl transition-all duration-200 focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none min-w-50"
380+
id="submitBtn"
381+
>
382+
<span class="btn-text">{content.form.submitButtonText}</span>
383+
<span class="btn-loading hidden">
384+
<Icon icon="spinner" color="inherit" size={5} classes="mr-2" />
385+
{content.form.waitingText}
386+
</span>
387+
</button>
388+
</div>
389+
</Confetti>
389390
</form>
390391

391392
{/** Form Messages */}
@@ -437,70 +438,69 @@ const { content, prefilledProjectType = '' } = Astro.props
437438
</div>
438439
</div>
439440
</div>
440-
</div>
441+
</div>
441442

442-
{/** Contact Information */}
443-
<div
444-
class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg h-fit"
445-
data-sticky-sidebar
446-
>
447-
<div class="space-y-8">
448-
<div>
449-
<h3 class="text-page-inverse text-xl font-semibold mb-6">{content.contact.header}</h3>
443+
{/** Contact Information */}
444+
<div
445+
class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg h-fit"
446+
data-sticky-sidebar
447+
>
448+
<div class="space-y-8">
449+
<div>
450+
<h3 class="text-page-inverse text-xl font-semibold mb-6">{content.contact.header}</h3>
450451

451-
<div class="space-y-6">
452-
{content.contact.details.map((item) => (
453-
<div class="flex items-start gap-4">
454-
<div
455-
class="shrink-0 w-11 h-11 bg-page-inverse text-white rounded-xl flex items-center justify-center"
456-
>
457-
<Icon
458-
icon={item.icon}
459-
size={6}
460-
color="content-inverse"
461-
{...(item.iconClasses ? { classes: item.iconClasses } : {})}
462-
/>
463-
</div>
464-
<div>
465-
<h4 class="text-page-inverse text-md mb-1">{item.text}</h4>
466-
<p class="text-content-active text-sm" set:html={item.value}></p>
467-
</div>
452+
<div class="space-y-6">
453+
{content.contact.details.map((item) => (
454+
<div class="flex items-start gap-4">
455+
<div
456+
class="shrink-0 w-11 h-11 bg-page-inverse text-white rounded-xl flex items-center justify-center"
457+
>
458+
<Icon
459+
icon={item.icon}
460+
size={6}
461+
color="content-inverse"
462+
{...(item.iconClasses ? { classes: item.iconClasses } : {})}
463+
/>
468464
</div>
469-
))}
470-
</div>
465+
<div>
466+
<h4 class="text-page-inverse text-md mb-1">{item.text}</h4>
467+
<p class="text-content-active text-sm" set:html={item.value}></p>
468+
</div>
469+
</div>
470+
))}
471471
</div>
472+
</div>
472473

473-
<div>
474-
<h3 class="text-page-inverse text-xl font-semibold mb-4">
475-
{content.contact.expertise.header}
476-
</h3>
477-
<List
478-
items={content.contact.expertise.areas}
479-
variant="colored-marker-list"
480-
classes={{
481-
icon: "bg-page-inverse",
482-
}}
483-
/>
484-
</div>
474+
<div>
475+
<h3 class="text-page-inverse text-xl font-semibold mb-4">
476+
{content.contact.expertise.header}
477+
</h3>
478+
<List
479+
items={content.contact.expertise.areas}
480+
variant="colored-marker-list"
481+
classes={{
482+
icon: "bg-page-inverse",
483+
}}
484+
/>
485+
</div>
485486

486-
<div>
487-
<h3 class="text-page-inverse text-xl font-semibold mb-4">
488-
{content.contact.chooseUs.header}
489-
</h3>
490-
<List
491-
items={content.contact.chooseUs.areas}
492-
variant="colored-marker-list"
493-
classes={{
494-
icon: "bg-page-inverse",
495-
}}
496-
/>
497-
</div>
487+
<div>
488+
<h3 class="text-page-inverse text-xl font-semibold mb-4">
489+
{content.contact.chooseUs.header}
490+
</h3>
491+
<List
492+
items={content.contact.chooseUs.areas}
493+
variant="colored-marker-list"
494+
classes={{
495+
icon: "bg-page-inverse",
496+
}}
497+
/>
498498
</div>
499499
</div>
500500
</div>
501501
</div>
502-
</section>
503-
</Confetti>
502+
</div>
503+
</section>
504504
</div>
505505
</contact-form>
506506

0 commit comments

Comments
 (0)