Merge remote-tracking branch 'upstream/main' into main

tairli · Aug 22, 2021 · 330e6b4 · 330e6b4
2 parents 79467e4 + 7a2f34f
commit 330e6b4
Show file tree

Hide file tree

Showing 77 changed files with 3,465 additions and 377 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -733,6 +733,25 @@ summary::-webkit-details-marker {
   outline: 0 !important;
 }
 
+.focus-offset:focus-visible {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.focus-offset:focus {
+  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  outline-offset: 1rem;
+  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
+    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
+}
+
+.focus-offset:focus:not(:focus-visible) {
+  outline: 0;
+  box-shadow: none;
+}
+
 /* component-title */
 .title,
 .title-wrapper-with-link {
@@ -1189,7 +1208,6 @@ deferred-media {
 .share-button {
   display: block;
   position: relative;
-  max-width: 31rem;
 }
 
 .share-button details {
@@ -1199,7 +1217,8 @@ deferred-media {
 .share-button__button {
   font-size: 1.4rem;
   display: flex;
-  align-items: baseline;
+  min-height: 2.4rem;
+  align-items: center;
   color: rgba(var(--color-link), var(--alpha-link));
   margin-left: 0;
   padding-left: 0;
@@ -1238,6 +1257,7 @@ details[open] > .share-button__fallback {
   left: 0.1rem;
   z-index: 3;
   width: 100%;
+  min-width: 31rem;
   box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
 }
 
@@ -1323,20 +1343,13 @@ details[open] > .share-button__fallback {
   box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
 }
 
-.field__input:focus-visible,
-.select__select:focus-visible,
-.field input:focus-visible {
-  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55),
-    0 0 0 0.3rem rgb(var(--color-background)),
-    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-}
-
 .field__input:focus,
 .select__select:focus,
-.field input:focus {
-  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55),
-    0 0 0 0.3rem rgb(var(--color-background)),
-    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
+.customer .field input:focus,
+.customer select:focus,
+.localization-form__select:focus {
+  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
+  outline: transparent;
 }
 
 .text-area,

diff --git a/assets/component-card.css b/assets/component-card.css
@@ -5,7 +5,13 @@
 }
 
 .card + .card-information {
-  margin-top: 1.2rem;
+  margin-top: 1.3rem;
+}
+
+@media screen and (min-width: 750px) {
+  .card + .card-information {
+    margin-top: 1.7rem;
+  }
 }
 
 .card.card--soft {
@@ -175,7 +181,7 @@
 }
 
 .card-information__wrapper > *:not(.visually-hidden:first-child) + * {
-  margin-top: 1.1rem;
+  margin-top: 0.7rem;
 }
 
 .card-information__wrapper .caption {

diff --git a/assets/component-pickup-availability.css b/assets/component-pickup-availability.css
@@ -28,6 +28,7 @@ pickup-availability[available] {
   color: rgba(var(--color-foreground), 0.75);
   letter-spacing: 0.06rem;
   padding: 0 0 0.2rem;
+  text-align: left;
   text-decoration: underline;
 }
 

diff --git a/assets/component-price.css b/assets/component-price.css
@@ -83,6 +83,7 @@
 .price--on-sale .price-item--regular {
   text-decoration: line-through;
   color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.3rem;
 }
 
 .unit-price {

diff --git a/assets/component-product-model.css b/assets/component-product-model.css
@@ -24,7 +24,7 @@
 }
 
 @media screen and (min-width: 750px) {
-  .product__media-wrapper > .button.product__xr-button {
+  slider-component + .button.product__xr-button {
     display: none;
   }
 

diff --git a/assets/customer.css b/assets/customer.css
@@ -473,15 +473,6 @@
   }
 }
 
-.order tbody td:nth-of-type(3) dd:nth-of-type(2) {
-  font-size: 1.1rem;
-  letter-spacing: 0.07rem;
-  line-height: 1.2;
-  margin-top: 0.2rem;
-  text-transform: uppercase;
-  color: var(--color-foreground-70);
-}
-
 .order tfoot tr:last-of-type td,
 .order tfoot tr:last-of-type th {
   font-size: 2.2rem;
@@ -617,6 +608,19 @@
   color: rgba(var(--color-foreground), 0.7);
 }
 
+.order .unit-price {
+  font-size: 1.1rem;
+  letter-spacing: 0.07rem;
+  line-height: 1.2;
+  margin-top: 0.2rem;
+  text-transform: uppercase;
+  color: rgba(var(--color-foreground), 0.7);
+}
+
+.order .regular-price {
+  font-size: 1.3rem;
+}
+
 /* Addresses */
 .addresses li > button {
   margin-left: 0.5rem;

diff --git a/assets/global.js b/assets/global.js
@@ -456,15 +456,17 @@ class SliderComponent extends HTMLElement {
   }
 
   initPages() {
-    if (!this.sliderItems.length === 0) return;
-    this.slidesPerPage = Math.floor(this.slider.clientWidth / this.sliderItems[0].clientWidth);
-    this.totalPages = this.sliderItems.length - this.slidesPerPage + 1;
+    const sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
+    this.sliderLastItem = sliderItemsToShow[sliderItemsToShow.length - 1];
+    if (sliderItemsToShow.length === 0) return;
+    this.slidesPerPage = Math.floor(this.slider.clientWidth / sliderItemsToShow[0].clientWidth);
+    this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1;
     this.update();
   }
 
   update() {
     if (!this.pageCount || !this.pageTotal) return;
-    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItems[0].clientWidth) + 1;
+    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
 
     if (this.currentPage === 1) {
       this.prevButton.setAttribute('disabled', true);
@@ -484,7 +486,7 @@ class SliderComponent extends HTMLElement {
 
   onButtonClick(event) {
     event.preventDefault();
-    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderItems[0].clientWidth : this.slider.scrollLeft - this.sliderItems[0].clientWidth;
+    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
     this.slider.scrollTo({
       left: slideScrollPosition
     });
@@ -533,14 +535,21 @@ class VariantSelects extends HTMLElement {
     const newMedia = document.querySelector(
       `[data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]`
     );
+
     if (!newMedia) return;
+    const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
+    const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`);
     const parent = newMedia.parentElement;
+    if (parent.firstChild == newMedia) return;
+    modalContent.prepend(newMediaModal);
     parent.prepend(newMedia);
-    window.setTimeout(() => { parent.scroll(0, 0) });
+    this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header');
+    this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal'));
+    window.setTimeout(() => { parent.querySelector('li.product__media-item').scrollIntoView({behavior: "smooth"}); });
   }
 
   updateURL() {
-    if (!this.currentVariant) return;
+    if (!this.currentVariant || this.dataset.updateUrl === 'false') return;
     window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`);
   }