Merge pull request #734 from B77Mills/adjustPushdown

Adjust pushdown for a more condensed look
parameter1 · Jul 5, 2023 · a14ba34 · a14ba34
2 parents 90110d1 + dfc6c3c
commit a14ba34
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/packages/marko-web-theme-monorail/browser/newsletter-signup-form/step2.vue b/packages/marko-web-theme-monorail/browser/newsletter-signup-form/step2.vue
@@ -90,6 +90,7 @@
                 :class="`${blockName}__form-button`"
                 :is-loading="isLoading"
                 :disabled="isComplete"
+                :label="ctaLabel"
                 :lang="lang"
               />
             </div>
@@ -180,6 +181,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    ctaLabel: {
+      type: String,
+      default: null,
+    },
     privacyPolicyLink: {
       type: Object,
       required: true,

diff --git a/packages/marko-web-theme-monorail/browser/site-newsletter-menu.vue b/packages/marko-web-theme-monorail/browser/site-newsletter-menu.vue
@@ -10,6 +10,7 @@
         :disabled="disabled"
         :image-src="imageSrc"
         :image-srcset="imageSrcset"
+        :ctaLabel="step1CtaLabel"
         :recaptcha-site-key="recaptchaSiteKey"
         :privacy-policy-link="privacyPolicyLink"
         :lang="lang"
@@ -25,6 +26,7 @@
         :default-newsletter="defaultNewsletter"
         :newsletters="newsletters"
         :demographic="demographic"
+        :ctaLabel="step2CtaLabel"
         :recaptcha-site-key="recaptchaSiteKey"
         :privacy-policy-link="privacyPolicyLink"
         :lang="lang"
@@ -92,6 +94,14 @@ export default {
       type: String,
       default: null,
     },
+    step1CtaLabel: {
+      type: String,
+      default: null,
+    },
+    step2CtaLabel: {
+      type: String,
+      default: null,
+    },
     privacyPolicyLink: {
       type: Object,
       required: true,

diff --git a/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue b/packages/marko-web-theme-monorail/browser/site-newsletter-menu/step1.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-5', 'col-lg-4'])">
+    <div :class="element('image-wrapper', ['d-none', 'd-md-flex', 'col-md-3'])">
       <img
         v-if="imageSrc"
         :src="imageSrc"
@@ -9,7 +9,7 @@
         :class="element('image')"
       >
     </div>
-    <div :class="element('form-wrapper', ['col-12', 'col-md-6', 'col-lg-5'])">
+    <div :class="element('form-wrapper', ['col-12', 'col-md-8'])">
       <div :class="element('name')">
         {{ name }}
       </div>
@@ -38,6 +38,7 @@
           :class="element('form-button')"
           :is-loading="isLoading"
           :disabled="disabled || recaptcha.loading || recaptcha.error"
+          :label="ctaLabel"
           :lang="lang"
         />
       </form>
@@ -52,7 +53,7 @@
         {{ error.message }}
       </div>
     </div>
-    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1', 'col-lg-3'])">
+    <div :class="element('close-container', ['d-none', 'd-md-flex', 'col-md-1'])">
       <close-button
         :class-name="element('close').join(' ')"
         target-button=".site-navbar__newsletter-toggler"
@@ -98,6 +99,10 @@ export default {
       type: String,
       required: true,
     },
+    ctaLabel: {
+      type: String,
+      default: null,
+    },
     disabled: {
       type: Boolean,
       default: false,

diff --git a/packages/marko-web-theme-monorail/components/site-newsletter-menu.marko b/packages/marko-web-theme-monorail/components/site-newsletter-menu.marko
@@ -10,6 +10,8 @@ $ const {
   newsletters,
   demographic,
   disabled,
+  step1CtaLabel,
+  step2CtaLabel,
   privacyPolicy,
 } = site.getAsObject("newsletter.pushdown");
 
@@ -33,6 +35,8 @@ $ const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
       imageSrc,
       imageSrcset,
       initiallyExpanded,
+      step1CtaLabel,
+      step2CtaLabel,
       recaptchaSiteKey: recaptcha.siteKey,
       privacyPolicyLink: privacyPolicy,
       lang

diff --git a/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss b/packages/marko-web-theme-monorail/scss/components/_site-newsletter-menu.scss
@@ -78,7 +78,7 @@
   }
 
   &__image {
-    width: 280px;
+    width: 170px;
     margin-top: auto;
     margin-right: auto;
     margin-left: auto;