Modify sign up form

wagtail · Feb 21, 2024 · 2499027 · 2499027
1 parent 3534cc5
commit 2499027
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html b/wagtailio/project_styleguide/templates/patterns/components/sign_up_form/base_form.html
@@ -1,16 +1,18 @@
 <div class="sign-up-form {% if classes %}{{ classes }}{% endif %}">
-    <h2 class="sign-up-form__heading heading-three">{{ heading }}</h2>
-    <p class="sign-up-form__sub-heading">{{ sub_heading }}</p>
-    <form class="sign-up-form__container" action="https://torchbox.us1.list-manage.com/subscribe/post?u={{ mailchimp_account_id }}&id={{ mailchimp_newsletter_id }}" method="post">
-        <div>
-            <input class="sign-up-form__input" id="email" name="EMAIL" type="email" autocomplete="email" placeholder="Enter your email address" aria-label="Email" required/>
-        </div>
-        <button class="button sign-up-form__button" type="submit">
-            <span class="button__text">Sign up</span>
-            <svg class="arrow" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
-        </button>
-        {% if icon %}
-            {% include "patterns/components/icon/icon.html" with classes="sign-up-form__icon" icon="" overlay_icon="wagtail-envelope"  %}
-        {% endif %}
-    </form>
+    <div class="sign-up-form__inner">
+        <h2 class="sign-up-form__heading heading-three">{{ heading }}</h2>
+        <p class="sign-up-form__sub-heading">{{ sub_heading }}</p>
+        <form class="sign-up-form__container" action="https://torchbox.us1.list-manage.com/subscribe/post?u={{ mailchimp_account_id }}&id={{ mailchimp_newsletter_id }}" method="post">
+            <div>
+                <input class="sign-up-form__input" id="email" name="EMAIL" type="email" autocomplete="email" placeholder="Enter your email address" aria-label="Email" required/>
+            </div>
+            <button class="button sign-up-form__button" type="submit">
+                <span class="button__text">Sign up</span>
+                <svg class="arrow" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
+            </button>
+        </form>
+    </div>
+    {% if icon %}
+        {% include "patterns/components/icon/icon.html" with classes="sign-up-form__icon" icon="" overlay_icon="wagtail-envelope"  %}
+    {% endif %}
 </div>
diff --git a/wagtailio/static/sass/components/_sign-up-form.scss b/wagtailio/static/sass/components/_sign-up-form.scss
@@ -3,7 +3,7 @@
     @include sf-spacing(2);
     grid-column: 2 / span 2;
     overflow: hidden; // prevent scrollbars from svg size
-
+    
     @include media-query(medium) {
       grid-column: 2 / span 3;
     }
@@ -25,28 +25,32 @@
         @include z-index(under);
         position: relative;
         width: auto;
-        margin-left: auto;
-        display: none;
 
         @include media-query(medium) {
             display: block;
-            height: 50px;
+        }
+
+        @include media-query(large) {
+            flex-grow: 1.5;
         }
 
         > svg {
             position: relative;
             width: 170px;
             height: 170px;
+        }
+    }
 
-            @include media-query(medium) {
-                inset: -100px 0 auto auto;
-            }
+    &__inner {
+        @include media-query(large) {
+            flex-grow: 1.5;
         }
     }
 
     &__container {
         display: flex;
         flex-direction: column;
+        margin: 30px 0 0 0;
 
         @include media-query(medium) {
             flex-direction: row;
@@ -82,10 +86,6 @@
         }
     }
 
-    > form {
-        margin: 30px 0 0 0;
-    }
-
     &__button {
         border-radius: $rounded-md;
         border-style: solid;
@@ -105,16 +105,18 @@
     }
 
     &--block {
+        display: flex;
+        flex-direction: column;
         border: 1px solid var(--color--text);
         border-radius: 15px;
         padding: 30px;
 
-        @include media-query(large) {
-            padding: 60px;
+        @include media-query(medium) {
+            flex-direction: row;
         }
 
-        #{$root}__sub-heading {
-            text-shadow: 2px 2px var(--color--background);
+        @include media-query(large) {
+            padding: 40px 60px;
         }
     }