From e88b028b584ddcf494b2d1b41ba0ae2c06276deb Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Thu, 20 Jun 2024 19:40:05 +0200
Subject: [PATCH] contact page animation

---
 assets/section-contact-form.css | 19 +++++++++++++++----
 sections/contact-form.liquid    | 18 ++++++++++--------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/assets/section-contact-form.css b/assets/section-contact-form.css
index 5470c62..cae38e8 100644
--- a/assets/section-contact-form.css
+++ b/assets/section-contact-form.css
@@ -18,6 +18,12 @@
   .contact .field {
     margin-bottom: 2rem;
   }
+
+  .contact__fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 2rem;
+  }
 }
 /*
 .contact__button {
@@ -35,10 +41,15 @@
   }
 } */
 
+#shx-contact-form-contact-us-send {
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
 @media screen and (min-width: 750px) {
-  .contact__fields {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: 2rem;
+  #shx-contact-form-contact-us-send {
+    width: 250px;
+    height: 250px;
   }
 }
diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
index 442e200..32cccb5 100644
--- a/sections/contact-form.liquid
+++ b/sections/contact-form.liquid
@@ -33,19 +33,21 @@
       -%}
       {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
         {%- if form.posted_successfully? -%}
+          <dotlottie-player
+            id="shx-contact-form-contact-us-send"
+            src="{{ 'lottie_page_contact_us_send.lottie' | asset_url }}"
+            background="transparent"
+            speed="1"
+            autoplay
+            direction="1"
+            mode="bounce"></dotlottie-player>
+
           <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
             {% render 'icon-success' %}
             {{ 'templates.contact.form.post_success' | t }}
           </h2>
 
-          <dotlottie-player
-            src="{{ 'lottie_page_contact_us_send.lottie' | asset_url }}"
-            background="transparent"
-            speed="1"
-            autoplay
-            style="width: 300px; height: 300px; margin: 0 auto;"
-            direction="1"
-            mode="bounce"></dotlottie-player>
+         
         {%- elsif form.errors -%}
           <div class="form__message">
             <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>