From 42c654871d2301135261456d94a5aa406b3f4763 Mon Sep 17 00:00:00 2001 From: Stu Freen Date: Fri, 24 Feb 2023 12:59:24 -0500 Subject: [PATCH 01/12] Make header image preload and proper width (#2307) * Make header image preload and always 1x 2x sizes * Add middle size to image_tag * Fix image size so that desktop logo width is always respected * Fix the sticky-header scroll width * Use wrapper to resize logo to 75% * Swap sizes --- assets/base.css | 5 ++++ sections/header.liquid | 53 ++++++++++++++++++++++++------------------ 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/assets/base.css b/assets/base.css index a3d2d82e519..a401662b5a7 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2369,7 +2369,12 @@ product-info .loading-overlay:not(.hidden) ~ *, .header__heading-logo { height: auto; + max-width: 100%; +} + +.header__heading-logo-wrapper { width: 100%; + display: inline-block; transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99); } diff --git a/sections/header.liquid b/sections/header.liquid index ac12d8ac126..d735c157f1b 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -32,12 +32,9 @@ margin-left: -1.2rem; } - .header__heading-logo { - max-width: {{ settings.logo_width }}px; - } {%- if section.settings.sticky_header_type == 'reduce-logo-size' -%} - .scrolled-past-header .header__heading-logo { + .scrolled-past-header .header__heading-logo-wrapper { width: 75%; } {%- endif -%} @@ -398,15 +395,21 @@ {%- endif -%} {%- if settings.logo != blank -%} - {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} - {{ settings.logo | image_url: width: 500 | image_tag: - class: 'header__heading-logo motion-reduce', - widths: '50, 100, 150, 200, 250, 300, 400, 500', - height: logo_height, - width: settings.logo_width, - alt: logo_alt - }} +
+ {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} + {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %} + {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} + {{ settings.logo | image_url: width: 600 | image_tag: + class: 'header__heading-logo motion-reduce', + widths: widths, + height: logo_height, + width: settings.logo_width, + alt: logo_alt, + sizes: sizes, + preload: true + }} +
{%- else -%} {{ shop.name }} {%- endif -%} @@ -521,15 +524,21 @@ {%- endif -%} {%- if settings.logo != blank -%} - {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} - {{ settings.logo | image_url: width: 500 | image_tag: - class: 'header__heading-logo', - widths: '50, 100, 150, 200, 250, 300, 400, 500', - height: logo_height, - width: settings.logo_width, - alt: logo_alt - }} +
+ {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} + {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %} + {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} + {{ settings.logo | image_url: width: 600 | image_tag: + class: 'header__heading-logo', + widths: widths, + height: logo_height, + width: settings.logo_width, + alt: logo_alt, + sizes: sizes, + preload: true + }} +
{%- else -%} {{ shop.name }} {%- endif -%} From d75eeb869f0f0598f99b8916d0b42ab57d1452f9 Mon Sep 17 00:00:00 2001 From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Date: Tue, 28 Feb 2023 11:01:56 -0800 Subject: [PATCH 02/12] Add drawer menu desktop (#2195) * Add drawer option to the menu settings * Add logic and styles for drawer menu * Add a new breakpoint for desktop layout. Implement movement of close button for the drawer. * Change a css rule order * Minor changes in css to position close-button correctly * Minor changes in css to position close-button correctly * Minor changes in base.css and header.liquid * Fix resizing issue for open drawer * Clean up JS logic. * Remove repositioning of closing button X. Align log-in icon and nav. Decrease the header padding for tablet. * Remove unnecessary css rule. * Minor refactoring * Hide login in the drawer for tablet/desktop. * Refactoring css * Change naming for grid system * Refactor header.liquid. Remove else and add elsif. * Polish css. Add role navigation for drawer-menu. * Remove role navigation and add nav tag * Remove nav * Change order of conditional classes. Correct indentation. * Minor chnages in grid system. * Move the cart-notification according to the menu type. * Fix typo in comment. * Minor fix for middle-center logo position. * Add condition for .header-middle-center for drawer * Minor changes in css for .header__search * Refactor and polish css. * Update 20 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --- assets/base.css | 63 ++++++++++++++++++++------ assets/component-cart-notification.css | 6 +++ assets/component-menu-drawer.css | 14 ++++-- assets/global.js | 10 +++- locales/cs.schema.json | 3 ++ locales/da.schema.json | 3 ++ locales/de.schema.json | 3 ++ locales/en.default.schema.json | 3 ++ locales/es.schema.json | 3 ++ locales/fi.schema.json | 3 ++ locales/fr.schema.json | 3 ++ locales/it.schema.json | 3 ++ locales/ja.schema.json | 3 ++ locales/ko.schema.json | 3 ++ locales/nb.schema.json | 3 ++ locales/nl.schema.json | 3 ++ locales/pl.schema.json | 3 ++ locales/pt-BR.schema.json | 3 ++ locales/pt-PT.schema.json | 3 ++ locales/sv.schema.json | 3 ++ locales/th.schema.json | 3 ++ locales/tr.schema.json | 3 ++ locales/vi.schema.json | 3 ++ locales/zh-CN.schema.json | 3 ++ locales/zh-TW.schema.json | 3 ++ sections/header.liquid | 24 ++++++---- snippets/cart-notification.liquid | 3 +- 27 files changed, 156 insertions(+), 27 deletions(-) diff --git a/assets/base.css b/assets/base.css index a401662b5a7..f775c50400b 100644 --- a/assets/base.css +++ b/assets/base.css @@ -244,11 +244,14 @@ html.no-js .no-js-hidden { } .page-width { - max-width: var(--page-width); margin: 0 auto; padding: 0 1.5rem; } +.page-width:not(.drawer-menu) { + max-width: var(--page-width); +} + .page-width-desktop { padding: 0; margin: 0 auto; @@ -259,6 +262,11 @@ html.no-js .no-js-hidden { padding: 0 5rem; } + .header.page-width { + padding-left: 3.2rem; + padding-right: 3.2rem; + } + .page-width--narrow { padding: 0 9rem; } @@ -273,6 +281,11 @@ html.no-js .no-js-hidden { } @media screen and (min-width: 990px) { + .header:not(.drawer-menu).page-width { + padding-left: 5rem; + padding-right: 5rem; + } + .page-width--narrow { max-width: 72.6rem; padding: 0; @@ -2291,7 +2304,7 @@ product-info .loading-overlay:not(.hidden) ~ *, .header { display: grid; - grid-template-areas: 'left-icon heading icons'; + grid-template-areas: 'left-icons heading icons'; grid-template-columns: 1fr 2fr 1fr; align-items: center; } @@ -2305,13 +2318,21 @@ product-info .loading-overlay:not(.hidden) ~ *, grid-template-columns: 1fr auto; } + .header--top-left.drawer-menu, + .header--middle-left.drawer-menu { + grid-template-areas: + 'navigation heading icons'; + grid-template-columns: auto 1fr auto; + column-gap: 1rem; + } + .header--middle-left { grid-template-areas: 'heading navigation icons'; grid-template-columns: auto auto 1fr; column-gap: 2rem; } - .header--middle-center { + .header--middle-center:not(.drawer-menu) { grid-template-areas: 'navigation heading icons'; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; @@ -2323,10 +2344,16 @@ product-info .loading-overlay:not(.hidden) ~ *, .header--top-center { grid-template-areas: - 'left-icon heading icons' + 'left-icons heading icons' 'navigation navigation navigation'; } + .header--top-center.drawer-menu { + grid-template-areas: + 'left-icons heading icons'; + grid-template-columns: 1fr 2fr 1fr; + } + .header:not(.header--middle-left, .header--middle-center) .header__inline-menu { margin-top: 1.05rem; } @@ -2396,7 +2423,8 @@ product-info .loading-overlay:not(.hidden) ~ *, } @media screen and (min-width: 990px) { - .header__heading-link { + .header--middle-left .header__heading-link, + .header--top-left .header__heading-link { margin-left: -0.75rem; } @@ -2405,6 +2433,12 @@ product-info .loading-overlay:not(.hidden) ~ *, justify-self: start; } + .header--middle-center .header__heading-link, + .header--middle-center .header__heading { + justify-self: center; + text-align: center; + } + .header--top-center .header__heading-link, .header--top-center .header__heading { justify-self: center; @@ -2462,12 +2496,6 @@ product-info .loading-overlay:not(.hidden) ~ *, margin-right: -1.2rem; } -@media screen and (max-width: 989px) { - menu-drawer ~ .header__icons .header__icon--account { - display: none; - } -} - .header__icon--menu[aria-expanded="true"]::before { content: ""; top: 100%; @@ -2485,10 +2513,18 @@ menu-drawer + .header__search { } .header > .header__search { - grid-area: left-icon; + grid-area: left-icons; justify-self: start; } +.header--top-center.drawer-menu > .header__search { + margin-left: 3.2rem; +} + +.header--top-center header-drawer { + grid-area: left-icons; +} + .header:not(.header--has-menu) * > .header__search { display: none; } @@ -2788,7 +2824,8 @@ details-disclosure > details { } .overflow-hidden-mobile, -.overflow-hidden-tablet { +.overflow-hidden-tablet, +.overflow-hidden-desktop { overflow: hidden; } diff --git a/assets/component-cart-notification.css b/assets/component-cart-notification.css index fe6dd46ad67..0421db4ea84 100644 --- a/assets/component-cart-notification.css +++ b/assets/component-cart-notification.css @@ -40,6 +40,12 @@ .cart-notification { border-width: 0 var(--popup-border-width) var(--popup-border-width); max-width: 36.8rem; + right: 2.2rem; + } +} + +@media screen and (min-width: 990px) { + .cart-notification-wrapper:is(.page-width) > .cart-notification { right: 4rem; } } diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index 85cfbe13e53..8c731a2bacd 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -224,9 +224,19 @@ details[open].menu-opening > .menu-drawer__submenu { align-items: center; text-decoration: none; padding: 1.2rem; - margin-left: -1.2rem; font-size: 1.4rem; color: rgb(var(--color-foreground)); + margin-bottom: 2rem; +} + +.menu-drawer__utility-links:has(ul:empty) .menu-drawer__account { + margin-bottom: 0; +} + +@media screen and (min-width: 750px) { + .menu-drawer__utility-links:has(ul:empty) { + display: none; + } } .menu-drawer__account .icon-account { @@ -241,8 +251,6 @@ details[open].menu-opening > .menu-drawer__submenu { .menu-drawer .list-social { justify-content: flex-start; - margin-left: -1.25rem; - margin-top: 2rem; } .menu-drawer .list-social:empty { diff --git a/assets/global.js b/assets/global.js index 9e926a720bb..01639b27d45 100644 --- a/assets/global.js +++ b/assets/global.js @@ -400,7 +400,7 @@ class MenuDrawer extends HTMLElement { this.closeAnimation(this.mainDetailsToggle); } - onFocusOut(event) { + onFocusOut() { setTimeout(() => { if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer(); }); @@ -462,14 +462,22 @@ class HeaderDrawer extends MenuDrawer { }); summaryElement.setAttribute('aria-expanded', true); + window.addEventListener('resize', this.onResize); trapFocus(this.mainDetailsToggle, summaryElement); document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`); } closeMenuDrawer(event, elementToFocus) { + if (!elementToFocus) return; super.closeMenuDrawer(event, elementToFocus); this.header.classList.remove('menu-open'); + window.removeEventListener('resize', this.onResize); } + + onResize = () => { + this.header && document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`); + document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`); + }; } customElements.define('header-drawer', HeaderDrawer); diff --git a/locales/cs.schema.json b/locales/cs.schema.json index 0cd757a92df..b88e6709d61 100644 --- a/locales/cs.schema.json +++ b/locales/cs.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega nabídka" + }, + "options__3": { + "label": "Výsuvný panel" } }, "mobile_layout": { diff --git a/locales/da.schema.json b/locales/da.schema.json index 9c945e4e9d3..a25e573f2a0 100644 --- a/locales/da.schema.json +++ b/locales/da.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Skuffe" } }, "mobile_layout": { diff --git a/locales/de.schema.json b/locales/de.schema.json index 7d762292794..4b6e4249fff 100644 --- a/locales/de.schema.json +++ b/locales/de.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega-Menü" + }, + "options__3": { + "label": "Einschub" } }, "mobile_layout": { diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index 4656d112619..b40595ee01f 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -1036,6 +1036,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Drawer" } }, "show_line_separator": { diff --git a/locales/es.schema.json b/locales/es.schema.json index 84c2129dbf0..03ff4904fe6 100644 --- a/locales/es.schema.json +++ b/locales/es.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega menú" + }, + "options__3": { + "label": "Menú lateral" } }, "mobile_layout": { diff --git a/locales/fi.schema.json b/locales/fi.schema.json index 9a6667e9f0f..2039a2a9343 100644 --- a/locales/fi.schema.json +++ b/locales/fi.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega-valikko" + }, + "options__3": { + "label": "Laatikko" } }, "mobile_layout": { diff --git a/locales/fr.schema.json b/locales/fr.schema.json index 29eae83e5f5..d7c3437dd09 100644 --- a/locales/fr.schema.json +++ b/locales/fr.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Méga menu" + }, + "options__3": { + "label": "Tiroir" } }, "mobile_layout": { diff --git a/locales/it.schema.json b/locales/it.schema.json index be810390dcf..5bfad2ef0eb 100644 --- a/locales/it.schema.json +++ b/locales/it.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Finestra" } }, "mobile_layout": { diff --git a/locales/ja.schema.json b/locales/ja.schema.json index 9255e8fc8bf..a0d3df4965c 100644 --- a/locales/ja.schema.json +++ b/locales/ja.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "メガメニュー" + }, + "options__3": { + "label": "ドロワー" } }, "mobile_layout": { diff --git a/locales/ko.schema.json b/locales/ko.schema.json index 33e6ff53caa..2d2422ecfca 100644 --- a/locales/ko.schema.json +++ b/locales/ko.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "메가 메뉴" + }, + "options__3": { + "label": "서랍" } }, "mobile_layout": { diff --git a/locales/nb.schema.json b/locales/nb.schema.json index fcf2d65d63e..ea170a0a87f 100644 --- a/locales/nb.schema.json +++ b/locales/nb.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Megameny" + }, + "options__3": { + "label": "Skuff" } }, "mobile_layout": { diff --git a/locales/nl.schema.json b/locales/nl.schema.json index ee4383929a9..941f6d0425c 100644 --- a/locales/nl.schema.json +++ b/locales/nl.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Lade" } }, "mobile_layout": { diff --git a/locales/pl.schema.json b/locales/pl.schema.json index 2fa1772e098..d554717aad9 100644 --- a/locales/pl.schema.json +++ b/locales/pl.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Szuflada" } }, "mobile_layout": { diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json index 1300672fd66..c81ec6c7104 100644 --- a/locales/pt-BR.schema.json +++ b/locales/pt-BR.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Megamenu" + }, + "options__3": { + "label": "Deslizante" } }, "mobile_layout": { diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json index b65f4f23d42..9fcc188a2be 100644 --- a/locales/pt-PT.schema.json +++ b/locales/pt-PT.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega menu" + }, + "options__3": { + "label": "Menu deslizante" } }, "mobile_layout": { diff --git a/locales/sv.schema.json b/locales/sv.schema.json index e45ecdda9dd..d485d7a73f5 100644 --- a/locales/sv.schema.json +++ b/locales/sv.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Megameny" + }, + "options__3": { + "label": "Låda" } }, "mobile_layout": { diff --git a/locales/th.schema.json b/locales/th.schema.json index 3079b964fe6..591c49fd333 100644 --- a/locales/th.schema.json +++ b/locales/th.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "เมกะเมนู" + }, + "options__3": { + "label": "แถบตัวเลือกแบบซ่อนได้" } }, "mobile_layout": { diff --git a/locales/tr.schema.json b/locales/tr.schema.json index 54f13539e03..a30b762fee3 100644 --- a/locales/tr.schema.json +++ b/locales/tr.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Mega menü" + }, + "options__3": { + "label": "Çekmece" } }, "mobile_layout": { diff --git a/locales/vi.schema.json b/locales/vi.schema.json index 456e543e650..f896d67d6e4 100644 --- a/locales/vi.schema.json +++ b/locales/vi.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "Menu lớn" + }, + "options__3": { + "label": "Ngăn" } }, "mobile_layout": { diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json index be145e697df..3d826fce2a8 100644 --- a/locales/zh-CN.schema.json +++ b/locales/zh-CN.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "超级菜单" + }, + "options__3": { + "label": "抽屉" } }, "mobile_layout": { diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json index 2ccdcdb73b8..1e6940b5df6 100644 --- a/locales/zh-TW.schema.json +++ b/locales/zh-TW.schema.json @@ -890,6 +890,9 @@ }, "options__2": { "label": "大型選單" + }, + "options__3": { + "label": "隱藏式選單" } }, "mobile_layout": { diff --git a/sections/header.liquid b/sections/header.liquid index d735c157f1b..085eeb5de63 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -39,11 +39,13 @@ } {%- endif -%} - @media screen and (min-width: 990px) { - header-drawer { - display: none; + {%- if section.settings.menu_type_desktop != "drawer" -%} + @media screen and (min-width: 990px) { + header-drawer { + display: none; + } } - } + {%- endif -%} .menu-drawer-container { display: flex; @@ -134,9 +136,9 @@ <{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% 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 -%} - +