spree_frontend 4.1.0.rc2 → 4.1.0.rc3

data/app/assets/stylesheets/spree/frontend/application.scss

@@ -51,4 +51,5 @@
 @import "spree/frontend/views/spree/shared/mobile_navigation";
 @import "spree/frontend/views/spree/shared/no_product_available";
 @import "spree/frontend/views/spree/shared/color_select";
+@import "spree/frontend/views/spree/shared/dropdown";
 @import "spree/frontend/views/spree/shared/delete_address_popup";

data/app/assets/stylesheets/spree/frontend/components-bootstrap/modal.scss

@@ -1,3 +1,7 @@
 .modal-backdrop {
   background: adjust-color(theme-color-level('dark', -5), $alpha: -0.4);
 }
+
+.modal {
+  padding: 0 !important
+}

data/app/assets/stylesheets/spree/frontend/components-custom/inputs.scss

@@ -1,5 +1,5 @@
 .spree-flat-input {
-  color: theme-color('secondary');
+  color: theme-color("secondary");
   transition: basic-transition(border-color);
   padding: 15px;
   width: 100%;
@@ -11,6 +11,9 @@
   outline: none;
   font-size: font-px-to-rem(12px);
   line-height: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   @include media-breakpoint-up(sm) {
     padding: 25px;
     font-size: font-px-to-rem(23px);
@@ -20,7 +23,7 @@
     font-size: font-px-to-rem(14px);
   }
   &:focus {
-    border-color: theme-color('secondary');
+    border-color: theme-color("secondary");
   }
   &::placeholder {
     text-transform: uppercase;
@@ -45,12 +48,8 @@
   }
 }
 
-label {
-  color: theme-color('secondary');
-}
-
 .spree-flat-label {
-  color: theme-color('secondary');
+  color: theme-color("secondary");
   text-transform: uppercase;
   font-size: font-px-to-rem(12px);
 
@@ -83,7 +82,7 @@ label {
     height: 22px;
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     display: none;
   }
 
@@ -94,8 +93,9 @@ label {
     height: 22px;
     font-size: 0;
     border-radius: 0;
-    border: 2px solid theme-color('secondary');
+    border: 2px solid theme-color("secondary");
     background-color: $input-background;
+    cursor: pointer;
 
     @include media-breakpoint-up(sm) {
       width: 32px;
@@ -111,7 +111,7 @@ label {
   label:after {
     transition: basic-transition(opacity);
     opacity: 0;
-    content: '';
+    content: "";
     position: absolute;
     width: 12px;
     height: 8px;
@@ -138,8 +138,8 @@ label {
     }
   }
 
-  input[type='checkbox']:checked + label {
-    background-color: theme-color('secondary');
+  input[type="checkbox"]:checked + label {
+    background-color: theme-color("secondary");
 
     &:after {
       opacity: 1;
@@ -165,7 +165,7 @@ label {
 }
 
 .spree-checkbox-label {
-  color: theme-color('info');
+  color: theme-color("info");
   font-size: font-px-to-rem(12px);
   margin: 0;
   // Autoprefixer don't seem to catch this
@@ -174,6 +174,7 @@ label {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  cursor: pointer;
 
   @include media-breakpoint-up(sm) {
     font-size: font-px-to-rem(21px);

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/confirm.scss

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
 
+  div:first-child {
+    -webkit-flex: 0;
+    flex-shrink: 0;
+  }
+
   &-order-details {
     padding-bottom: 40px;
     font-weight: 500;

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/edit.scss

@@ -1,4 +1,11 @@
 .checkout {
+  &-summary {
+    &-container {
+      @include media-breakpoint-up(lg) {
+        top: $spree-header-desktop-height + 25px;
+      }
+    }
+  }
   &-header {
     margin: 0;
     &-link {

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/registration.scss

@@ -1,6 +1,5 @@
 .checkout-registration {
   padding-bottom: 64px;
-  border-bottom: 1px solid theme-color('borders');
 
   &-styled-or {
     font-size: 12px;

data/app/assets/stylesheets/spree/frontend/views/spree/orders/edit.scss

@@ -215,13 +215,17 @@
         margin: 0;
       }
       input[type="number"] {
+        -webkit-appearance: none;
         -moz-appearance: textfield;
+        appearance: none;
       }
       button {
         font-size: font-px-to-rem(14px);
         height: 25px;
         background-color: $input-background;
         border-color: theme-color("borders");
+        border-width: 1px !important;
+        border-style: solid;
         color: color-yiq($input-background);
         @include media-breakpoint-up(sm) {
           height: 51.4px;
@@ -354,6 +358,11 @@
         }
       }
     }
+    input[type=text] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
   }
   &-total {
     margin-top: 28px;

data/app/assets/stylesheets/spree/frontend/views/spree/products/cart_form.scss

@@ -27,6 +27,7 @@
   .quantity-select button {
     background: $input-background;
     color: color-yiq($input-background);
+    touch-action: manipulation;
   }
   @include media-breakpoint-up(md) {
     &-price {
@@ -62,8 +63,8 @@
       list-style: none;
       padding: 0;
       margin: 0;
-      margin-left: - calc-spacer(1);
-      margin-right: - calc-spacer(1);
+      margin-left: -calc-spacer(1);
+      margin-right: -calc-spacer(1);
       &-label {
         font-size: font-px-to-rem(11px);
         border: 2px solid theme-color-level("light", 1);
@@ -80,12 +81,12 @@
         opacity: 0;
         position: fixed;
         &:checked {
-          &+#{$self}-variant-values-label {
+          & + #{$self}-variant-values-label {
             border-color: theme-color("dark-text");
           }
         }
         &--bad-combination {
-          &+#{$self2}-label {
+          & + #{$self2}-label {
             position: relative;
             color: theme-color-level("light", 1);
             &:hover {
@@ -96,7 +97,7 @@
               display: block;
               width: 2px;
               height: 100% * sqrt(2);
-              content: '';
+              content: "";
               background: theme-color-level("light", 1);
               transition: background 200ms;
               transform: rotate(-45deg);
@@ -112,7 +113,8 @@
           cursor: not-allowed;
           opacity: 0.5;
 
-          &:active, &:focus {
+          &:active,
+          &:focus {
             outline: theme-color("dark-text") dotted thin;
           }
         }
@@ -133,7 +135,7 @@
             line-height: $size - $size-border * 2;
             &:before {
               $inner-circle-size: $size - ($size-border - 1px) * 2; // Cover outer border by 1px to avoid color bleed.
-              content: '';
+              content: "";
               margin: -1px;
               display: block;
               border: 2px solid theme-color("light");
@@ -145,7 +147,7 @@
           }
           &-radio {
             &--bad-combination {
-              &+#{$self}-variant-values-label {
+              & + #{$self}-variant-values-label {
                 &:after {
                   height: 100%;
                   top: 0;
@@ -154,7 +156,7 @@
             }
             &:checked {
               &--bad-combination {
-                &+#{$self}-variant-values-label {
+                & + #{$self}-variant-values-label {
                   &:after {
                     background: theme-color("dark-text");
                   }
@@ -177,7 +179,7 @@
           }
           &-radio {
             &--bad-combination {
-              &+#{$self}-variant-values-label {
+              & + #{$self}-variant-values-label {
                 &:hover {
                   &:after {
                     background: theme-color-level("light", 1);
@@ -190,7 +192,7 @@
       }
     }
   }
-  &>li+li{
+  & > li + li {
     margin-top: calc-spacer(4);
   }
   @include media-breakpoint-up(md) {
@@ -210,21 +212,21 @@
 .select-label {
   cursor: pointer;
   padding: 4px 7px;
-  border: 2px solid theme-color('borders');
+  border: 2px solid theme-color("borders");
   min-width: 32px;
   max-height: 32px;
   text-align: center;
   font-size: font-px-to-rem(14px);
   font-weight: 500;
   @include media-breakpoint-up(sm) {
-    border: 3px solid theme-color('borders');
+    border: 3px solid theme-color("borders");
     padding: 7px 7px;
     min-width: 49px;
     max-height: 49px;
     font-size: font-px-to-rem(20px);
   }
   @include media-breakpoint-up(md) {
-    border: 2px solid theme-color('borders');
+    border: 2px solid theme-color("borders");
     padding: 4px 7px;
     min-width: 32px;
     max-height: 32px;
@@ -232,7 +234,7 @@
   }
 
   input:checked + & {
-    border-color: theme-color('secondary');
+    border-color: theme-color("secondary");
   }
 }
 

data/app/assets/stylesheets/spree/frontend/views/spree/products/show.scss

@@ -163,3 +163,10 @@
     line-height: font-px-to-rem(26px);
   }
 }
+
+.breadcrumb-item:last-of-type {
+  display: none;
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/carousel/thumbnails.scss

@@ -11,21 +11,12 @@
       display: block;
     }
     &-single {
-      height: 0;
-      padding-bottom: $thumbnails-carousel-single-height;
       position: relative;
       display: none;
-
-      .modal-dialog--zoom & {
-        padding-bottom: $thumbnails-carousel-single-height-zoom;
-      }
+      overflow: hidden;
 
       img {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        border: 1px solid transparent;
+        border: 2px solid transparent;
         &.selected {
           border-color: $secondary-color;
         }
@@ -75,7 +66,7 @@
       &-single {
         &--visible {
           & ~ & {
-            margin-top: $single-gap-md;
+            margin-top: $single-gap-md / 2;
           }
 
           .modal-dialog--zoom & ~ & {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/delete_address_popup.scss

@@ -36,29 +36,6 @@
       width: 80%;
     }
 
-    form {
-      input#keywords {
-        color: theme-color('dark-text');
-        font-size: font-px-to-rem(14px);
-        width: calc(100% - 40px);
-        &:focus {
-          outline: none;
-        }
-        &::placeholder {
-          color: theme-color('borders');
-        }
-        &::-webkit-search-cancel-button {
-          display: none;
-        }
-        @include media-breakpoint-up(lg) {
-          font-size: font-px-to-rem(22px);
-        }
-      }
-      input[type='submit'] {
-        display: none;
-      }
-    }
-
     &.shown {
       visibility: visible;
       opacity: 1;
@@ -71,7 +48,7 @@
     line-height: 0.91;
     letter-spacing: 0.55px;
     text-align: center;
-    color: #232323;
+    color: $font-color;
     margin-bottom: 23px;
 
     @include media-breakpoint-up(lg) {
@@ -88,7 +65,7 @@
     line-height: 1.38;
     letter-spacing: 0.4px;
     text-align: center;
-    color: #232323;
+    color: $font-color;
     margin: auto;
 
     @include media-breakpoint-up(sm) {
@@ -101,7 +78,7 @@
   &-buttons {
     margin-top: 48px;
     justify-content: space-evenly;
-    @supports (-ms-ime-align:auto) {
+    @supports (-ms-ime-align: auto) {
       justify-content: space-around;
     }
   }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/dropdown.scss

@@ -0,0 +1,3 @@
+.spree-flat-select-arrow {
+  pointer-events: none;
+}

data/app/assets/stylesheets/spree/frontend/views/spree/shared/main_nav_bar.scss

@@ -67,6 +67,7 @@
       display: none;
       background: $meganav-background;
       background-clip: padding-box;
+      border-top: 1px solid $global-border-style;
 
       form {
         input#keywords {
@@ -92,7 +93,7 @@
       }
 
       @include media-breakpoint-up(xl) {
-        top: $spree-header-desktop-height;
+        top: $spree-header-desktop-height - 1px;
       }
     }
   }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/quantity_select.scss

@@ -50,6 +50,8 @@
       margin: 0;
   }
   input[type=number] {
-      -moz-appearance:textfield;
+    -webkit-appearance: none;
+    -moz-appearance:textfield;
+    appearance: none;
   }
 }

data/app/controllers/spree/products_controller.rb

@@ -1,6 +1,7 @@
 module Spree
   class ProductsController < Spree::StoreController
     include Spree::ProductsHelper
+    include Spree::FrontendHelper
 
     before_action :load_product, only: [:show, :related]
     before_action :load_taxon, only: :index
@@ -10,6 +11,17 @@ module Spree
     def index
       @searcher = build_searcher(params.merge(include_images: true))
       @products = @searcher.retrieve_products
+
+      last_modified = @products.maximum(:updated_at)&.utc if @products.respond_to?(:maximum)
+
+      etag = [
+        store_etag,
+        last_modified&.to_i,
+        available_option_types_cache_key,
+        filtering_params_cache_key
+      ]
+
+      fresh_when etag: etag, last_modified: last_modified, public: true
     end
 
     def show
@@ -20,6 +32,7 @@ module Spree
       if stale?(etag: product_etag, last_modified: @product.updated_at.utc, public: true)
         @product_summary = Spree::ProductSummaryPresenter.new(@product).call
         @product_properties = @product.product_properties.includes(:property)
+        @product_price = @product.price_in(current_currency).amount
         load_variants
         @product_images = product_images(@product, @variants)
       end