Skip to content

Commit

Permalink
Merge remote-tracking branch 'shopify/main' into studio
Browse files Browse the repository at this point in the history 
* shopify/main:
  Improve image sizes in the multicolumn section (Shopify#2349)
  Fix the Page section's width.  (Shopify#2364)
  Update 12 translation files (Shopify#2366)
  Removing "my" from cart popup notification (Shopify#2353)
  [Cart.js] Fix fetch url so it's not hard coded (Shopify#2357) (Shopify#2365)
  Update 1 translation file (Shopify#2352)
  Default Follow on Shop to on
  [Header] Add localization selectors (Shopify#2258)
  Remove async CSS pattern where it may introduce layout shifts (Shopify#2270)
  Change rich text section heading to be of type inline_richtext, also moved rte styling into base.css (Shopify#2326)
  Add drawer menu desktop (Shopify#2195)
  Make header image preload and proper width (Shopify#2307)
  • Loading branch information
@pangloss
pangloss committed Mar 11, 2023
2 parents c1f3c25 + d2580da commit 71fca67
Show file tree
Hide file tree
Showing 84 changed files with 1,512 additions and 610 deletions.
139 changes: 127 additions & 12 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,10 @@ html.no-js .no-js-hidden {
padding: 0 1.5rem;
}

.page-width.drawer-menu {
max-width: 100%;
}

.page-width-desktop {
padding: 0;
margin: 0 auto;
Expand All @@ -259,6 +263,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;
}
Expand All @@ -273,6 +282,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;
Expand Down Expand Up @@ -2291,12 +2305,16 @@ 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;
}

@media screen and (min-width: 990px) {
.header {
grid-template-columns: 1fr auto 1fr;
}

.header--top-left,
.header--middle-left:not(.header--has-menu) {
grid-template-areas:
Expand All @@ -2305,13 +2323,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;
Expand All @@ -2323,10 +2349,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 auto 1fr;
}

.header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
margin-top: 1.05rem;
}
Expand Down Expand Up @@ -2369,7 +2401,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);
}

Expand All @@ -2391,7 +2428,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;
}

Expand All @@ -2400,6 +2438,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;
Expand Down Expand Up @@ -2457,12 +2501,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%;
Expand All @@ -2480,10 +2518,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;
}
Expand Down Expand Up @@ -2783,7 +2829,8 @@ details-disclosure > details {
}

.overflow-hidden-mobile,
.overflow-hidden-tablet {
.overflow-hidden-tablet,
.overflow-hidden-desktop {
overflow: hidden;
}

Expand Down Expand Up @@ -3006,3 +3053,71 @@ details-disclosure > details {
outline: transparent solid 1px;
}
}

.rte:after {
clear: both;
content: '';
display: block;
}

.rte > p:first-child {
margin-top: 0;
}

.rte > p:last-child {
margin-bottom: 0;
}

.rte table {
table-layout: fixed;
}

@media screen and (min-width: 750px) {
.rte table td {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
}

.rte img {
height: auto;
max-width: 100%;
border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
border-radius: var(--media-radius);
box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
list-style-position: inside;
padding-left: 2rem;
}

.rte li {
list-style: inherit;
}

.rte li:last-child {
margin-bottom: 0;
}

.rte a {
color: rgba(var(--color-link), var(--alpha-link));
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.1rem;
transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
color: rgb(var(--color-link));
text-decoration-thickness: 0.2rem;
}

.rte blockquote {
display: inline-flex;
}

.rte blockquote > * {
margin: -0.5rem 0 -0.5rem 0;
}
6 changes: 3 additions & 3 deletions assets/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class CartItems extends HTMLElement {
}

onCartUpdate() {
fetch('/cart?section_id=main-cart-items')
fetch(`${routes.cart_url}?section_id=main-cart-items`)
.then((response) => response.text())
.then((responseText) => {
const html = new DOMParser().parseFromString(responseText, 'text/html');
Expand Down Expand Up @@ -116,9 +116,9 @@ class CartItems extends HTMLElement {
if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);

this.getSectionsToRender().forEach((section => {
const elementToReplace =
const elementToReplace =
document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
elementToReplace.innerHTML =
elementToReplace.innerHTML =
this.getSectionInnerHTML(parsedState.sections[section.section], section.selector);
}));
const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined;
Expand Down
6 changes: 6 additions & 0 deletions assets/component-cart-notification.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
Loading

0 comments on commit 71fca67

Please sign in to comment.