From 3d8493d98200321e6bbe0379e596943c5ef6820c Mon Sep 17 00:00:00 2001 From: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Date: Mon, 9 Aug 2021 12:17:32 -0600 Subject: [PATCH] footer ui updates (#318) --- assets/component-newsletter.css | 14 ++--- assets/section-footer.css | 93 +++++++++------------------------ locales/en.default.json | 3 +- sections/footer.liquid | 32 ++---------- sections/newsletter.liquid | 6 +-- 5 files changed, 41 insertions(+), 107 deletions(-) diff --git a/assets/component-newsletter.css b/assets/component-newsletter.css index b74968f7489..6f51c0467c9 100644 --- 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 index 8c0cf16f025..742b538819c 100644 --- 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,22 +177,12 @@ 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) { @@ -204,11 +190,6 @@ 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; @@ -216,7 +197,7 @@ } .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 index 7ee78a8a336..2c5943638ac 100644 --- 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 index 4d20ea613b7..fa33c7a050b 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -1,7 +1,6 @@ {% comment %}theme-check-disable UndefinedObject{% endcomment %} {{ 'section-footer.css' | asset_url | stylesheet_tag }} - @@ -9,7 +8,6 @@ - @@ -31,26 +29,7 @@ -%}
{%- for block in section.blocks -%} - {%- if block.type == 'link_list' and block.settings.heading != blank -%} -
-
-

{{ block.settings.heading | escape }}

{% render 'icon-caret' %} - {%- if block.settings.menu != blank -%} - - {%- endif -%} -
-
- {%- endif -%} - -
+
{%- if block.settings.heading != blank -%}

{{- block.settings.heading | escape -}}

{%- endif -%} @@ -128,14 +107,14 @@ +
{%- if form.errors -%} {%- endif -%}
- {%- if form.posted_successfully? -%}

{% render 'icon-success' %}{{ 'newsletter.success' | t }}

{%- endif -%} @@ -217,7 +196,6 @@ {%- endif -%} -
  • {{ 'sections.footer.social_placeholder' | t }}
    • {%- endif -%}
    @@ -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 index 481903446d5..362885c3698 100644 --- a/sections/newsletter.liquid +++ b/sections/newsletter.liquid @@ -40,14 +40,14 @@ + {%- if form.errors -%} {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%} - {%- if form.posted_successfully? -%}

    {% render 'icon-success' %}{{ 'newsletter.success' | t }}

    {%- endif -%}