From c107279e78734bc0d3aadf115f95fdc772647269 Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Tue, 3 May 2022 12:06:28 -0400 Subject: [PATCH 1/7] Add new settings --- locales/en.default.schema.json | 15 +++++++++++++++ sections/header.liquid | 32 ++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index d53a2258bbf..5005a982743 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -915,6 +915,9 @@ "options__3": { "label": "Top center" }, + "options__4": { + "label": "Middle center" + }, "info": "Position is automatically optimized for mobile." }, "menu": { @@ -939,6 +942,18 @@ }, "margin_bottom": { "label": "Bottom margin" + }, + "mobile_layout": { + "content": "Mobile layout" + }, + "mobile_logo_position": { + "label": "Mobile logo position", + "options__1": { + "label": "Center" + }, + "options__2": { + "label": "Left" + } } } }, diff --git a/sections/header.liquid b/sections/header.liquid index a803270bc1f..19a7408d216 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -789,10 +789,6 @@ "type": "select", "id": "logo_position", "options": [ - { - "value": "middle-left", - "label": "t:sections.header.settings.logo_position.options__1.label" - }, { "value": "top-left", "label": "t:sections.header.settings.logo_position.options__2.label" @@ -800,6 +796,14 @@ { "value": "top-center", "label": "t:sections.header.settings.logo_position.options__3.label" + }, + { + "value": "middle-left", + "label": "t:sections.header.settings.logo_position.options__1.label" + }, + { + "value": "middle-center", + "label": "t:sections.header.settings.logo_position.options__4.label" } ], "default": "middle-left", @@ -842,6 +846,26 @@ "label": "t:sections.header.settings.enable_sticky_header.label", "info": "t:sections.header.settings.enable_sticky_header.info" }, + { + "type": "header", + "content": "t:sections.header.settings.mobile_layout.content" + }, + { + "type": "select", + "id": "mobile_logo_position", + "options": [ + { + "value": "center", + "label": "t:sections.header.settings.mobile_logo_position.options__1.label" + }, + { + "value": "left", + "label": "t:sections.header.settings.mobile_logo_position.options__2.label" + } + ], + "default": "center", + "label": "t:sections.header.settings.mobile_logo_position.label" + }, { "type": "header", "content": "t:sections.all.spacing" From 8e36ea2781ecdc108e43e8cdcc0358dd1c94b933 Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Tue, 19 Jul 2022 11:53:15 -0400 Subject: [PATCH 2/7] Update logo position CSS --- assets/base.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/base.css b/assets/base.css index 11bf3263b06..360e961a156 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2242,6 +2242,12 @@ input[type='checkbox'] { column-gap: 2rem; } + .header--middle-center { + grid-template-areas: 'navigation heading icons'; + grid-template-columns: 1fr auto 1fr; + column-gap: 2rem; + } + .header--top-center { grid-template-areas: 'left-icon heading icons' From 8a3138ef7fe7335af798d2a25cb4a8d19bc762a6 Mon Sep 17 00:00:00 2001 From: LucasLacerdaUX Date: Tue, 19 Jul 2022 17:38:06 -0400 Subject: [PATCH 3/7] Header mobile position --- assets/base.css | 10 ++++++++++ sections/header.liquid | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/assets/base.css b/assets/base.css index 360e961a156..b643660ccd1 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2304,6 +2304,16 @@ input[type='checkbox'] { .header__heading-link { text-align: center; } + + .header--mobile-left .header__heading, + .header--mobile-left .header__heading-link { + text-align: center; + justify-self: start; + } + + .header--mobile-left { + grid-template-columns: auto 2fr 1fr; + } } @media screen and (min-width: 990px) { diff --git a/sections/header.liquid b/sections/header.liquid index 19a7408d216..60a7794cac5 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -123,7 +123,7 @@ <{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> -
+
{%- if section.settings.menu != blank -%}