footer ui updates (#318)

Shopify · Aug 9, 2021 · 3d8493d · 3d8493d
1 parent eaa5621
commit 3d8493d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 107 deletions.
diff --git a/assets/component-newsletter.css b/assets/component-newsletter.css
@@ -20,6 +20,10 @@
   width: 100%;
 }
 
+.newsletter-form__field-wrapper .field__input {
+  padding-right: 5rem;
+}
+
 .newsletter-form__message {
   justify-content: center;
   margin-bottom: 0;
@@ -42,12 +46,10 @@
 }
 
 .newsletter-form__button {
-  margin-left: 1.4rem;
+  width: 4.4rem;
+  margin: 0;
 }
 
-@media screen and (max-width: 989px) {
-  .newsletter-form__button {
-    width: 100%;
-    margin: 1.4rem 0 0 0;
-  }
+.newsletter-form__button .icon {
+  width: 1.5rem;
 }
diff --git a/assets/section-footer.css b/assets/section-footer.css
@@ -1,9 +1,12 @@
-.footer {
-  border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
-}
 
-.footer:not(.color-background-1) {
-  border-top: none;
+@media screen and (min-width: 750px) {
+  .footer {
+    border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  }
+
+  .footer:not(.color-background-1) {
+    border-top: none;
+  }
 }
 
 @media screen and (max-width: 749px) {
@@ -21,6 +24,11 @@
   .footer-block.grid__item:first-child {
     margin-top: 0;
   }
+
+  .footer__content-top {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
 }
 
 .footer__content-top {
@@ -30,11 +38,6 @@
 }
 
 @media screen and (min-width: 750px) {
-  .footer__content-top {
-    padding-top: 7rem;
-    padding-bottom: 7rem;
-  }
-
   .footer__content-top .grid {
     margin-left: -3rem;
     row-gap: 6rem;
@@ -107,25 +110,12 @@
   }
 }
 
-.footer-block:only-child:last-child,
-.accordion:first-child + .footer-block:last-child {
+.footer-block:only-child:last-child {
   text-align: center;
   max-width: 76rem;
   margin: 0 auto;
 }
 
-.accordion:empty + .footer-block {
-  margin-top: 0;
-}
-
-.footer .accordion {
-  margin-top: 0;
-}
-
-.footer .small-hide + .accordion {
-  border-top: none;
-}
-
 @media screen and (min-width: 750px) {
   .footer-block {
     display: block;
@@ -142,7 +132,7 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-end;
-  margin-top: 5rem;
+  margin-top: 2rem;
 }
 
 .footer-block--newsletter:only-child {
@@ -153,6 +143,12 @@
   flex: 1 1 100%;
 }
 
+@media screen and (max-width: 749px) {
+  .footer-block.footer-block--menu:only-child {
+    text-align: left;
+  }
+}
+
 @media screen and (min-width: 750px) {
   .footer-block--newsletter {
     flex-wrap: nowrap;
@@ -181,42 +177,27 @@
   justify-content: center;
 }
 
-.footer__list-social .list-social__item--placeholder:not(:only-child) {
-  display: none;
-}
-
 .footer-block__newsletter {
   text-align: center;
 }
 
-@media screen and (max-width: 749px) {
-  .footer-block__newsletter .newsletter-form__field-wrapper {
-    width: 30rem;
-  }
-}
-
-.footer-block__newsletter .newsletter-form__button.button {
-  width: fit-content;
+.newsletter-form__field-wrapper {
+  max-width: 36rem;
 }
 
 @media screen and (min-width: 750px) {
   .footer-block__newsletter:not(:only-child) {
     text-align: left;
   }
 
-  .footer-block__newsletter .newsletter-form__button.button {
-    margin-top: 0;
-    margin-left: 1.4rem;
-  }
-
   .footer-block__newsletter:not(:only-child) .footer__newsletter {
     justify-content: flex-start;
     margin: 0;
   }
 }
 
 .footer-block__newsletter + .footer__list-social {
-  margin-top: 5rem;
+  margin-top: 3rem;
 }
 
 @media screen and (max-width: 749px) {
@@ -405,12 +386,6 @@ noscript .localization-selector.link {
   opacity: 0.75;
 } */
 
-@media screen and (min-width: 750px) {
-  footer .accordion {
-    display: none;
-  }
-}
-
 @keyframes appear-down {
   0% {
     opacity: 0;
@@ -422,38 +397,20 @@ noscript .localization-selector.link {
   }
 }
 
-footer details[open] summary ~ * {
-  animation: appear-down var(--duration-default) ease;
-}
-
-.footer .accordion .list-menu__item--link {
-  justify-content: center;
-  text-align: center;
-}
-
 .footer-block__details-content {
   margin-bottom: 4rem;
 }
 
-.footer-block__details-content li:first-child .link {
-  padding-top: 3rem;
-}
-
 @media screen and (min-width: 750px) {
   .footer-block__details-content {
     margin-bottom: 0;
   }
 
-  .footer-block__details-content li:first-child .link {
-    padding-top: 0;
-  }
-
   .footer-block__details-content > p,
   .footer-block__details-content > li {
     padding: 0;
   }
 
-  .accordion:first-child + .footer-block:last-child li,
   .footer-block:only-child li {
     display: inline;
   }
@@ -490,7 +447,6 @@ footer details[open] summary ~ * {
   .footer-block__details-content .list-menu__item--link {
     padding-top: 1rem;
     padding-bottom: 1rem;
-    margin-top: 0.5rem;
   }
 }
 
@@ -502,7 +458,6 @@ footer details[open] summary ~ * {
 
   .footer-block__details-content > :first-child .list-menu__item--link {
     padding-top: 0;
-    margin-top: 0;
   }
 }
 

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -54,7 +54,7 @@
     "month_year": "%B %Y"
   },
   "newsletter": {
-    "label": "Your email",
+    "label": "Email",
     "success": "Thanks for subscribing",
     "button_label": "Subscribe"
   },
@@ -210,7 +210,6 @@
       }
     },
     "footer": {
-      "social_placeholder": "Follow us on social media!",
       "payment": "Payment methods"
     },
     "featured_blog": {

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -1,15 +1,13 @@
 {% comment %}theme-check-disable UndefinedObject{% endcomment %}
 {{ 'section-footer.css' | asset_url | stylesheet_tag }}
 <link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
-<link rel="stylesheet" href="{{ 'component-accordion.css' | asset_url }}" media="print" onload="this.media='all'">
 <link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
 <link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
 <link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
 <link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
 <link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
 
 <noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
-<noscript>{{ 'component-accordion.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
@@ -31,26 +29,7 @@
         -%}
         <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
           {%- for block in section.blocks -%}
-            {%- if block.type == 'link_list' and block.settings.heading != blank -%}
-              <div class="accordion" {{ block.shopify_attributes }}>
-                <details>
-                  <summary><h2 class="h4 accordion__title">{{ block.settings.heading | escape }}</h2>{% render 'icon-caret' %}</summary>
-                  {%- if block.settings.menu != blank -%}
-                    <ul class="footer-block__details-content list-unstyled">
-                      {%- for link in block.settings.menu.links -%}
-                        <li>
-                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
-                            {{ link.title }}
-                          </a>
-                        </li>
-                      {%- endfor -%}
-                    </ul>
-                  {%- endif -%}
-                </details>
-              </div>
-            {%- endif -%}
-
-            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu small-hide{% endif %}" {{ block.shopify_attributes }}>
+            <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.heading != blank -%}
                 <h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
               {%- endif -%}
@@ -128,14 +107,14 @@
                   <label class="field__label" for="NewsletterForm--{{ section.id }}">
                     {{ 'newsletter.label' | t }}
                   </label>
+                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
+                    {% render 'icon-arrow' %}
+                  </button>
                 </div>
                 {%- if form.errors -%}
                   <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                 {%- endif -%}
               </div>
-              <button type="submit" class="button button--secondary newsletter-form__button" name="commit" id="Subscribe">
-                {{ 'newsletter.button_label' | t }}
-              </button>
               {%- if form.posted_successfully? -%}
                 <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
               {%- endif -%}
@@ -217,7 +196,6 @@
                 </a>
               </li>
             {%- endif -%}
-            <li class="list-social__item--placeholder">{{ 'sections.footer.social_placeholder' | t }}</li>
           </ul>
         {%- endif -%}
       </div>
@@ -512,7 +490,7 @@
     {
       "type": "text",
       "id": "newsletter_heading",
-      "default": "Sign up to our emails",
+      "default": "Subscribe to our emails",
       "label": "t:sections.footer.settings.newsletter_heading.label"
     },
     {

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -40,14 +40,14 @@
                   <label class="field__label" for="NewsletterForm--{{ section.id }}">
                     {{ 'newsletter.label' | t }}
                   </label>
+                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
+                    {% render 'icon-arrow' %}
+                  </button>
                 </div>
                 {%- if form.errors -%}
                   <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                 {%- endif -%}
               </div>
-              <button type="submit" class="newsletter__button button" name="commit">
-                {{ 'newsletter.button_label' | t }}
-              </button>
               {%- if form.posted_successfully? -%}
                 <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
               {%- endif -%}