Merge pull request PrestaShop#5939 from ishcherbakov/product_layout

FO: Product layout

themes/classic/_dev/css/components/block-reassurance.scss

@@ -1,5 +1,5 @@
 #block-reassurance{
-  margin-top: rem(60px);
+  margin-top: rem(32px);
   img{
     opacity: .7;
     width: rem(25px);

themes/classic/_dev/css/components/cart.scss

@@ -130,11 +130,10 @@
     max-width: rem(75px);
     @include pull-left;
     box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.15);
-    > .input-group,
-    > .form-control {
+    > .form-control,
+    > .input-group {
       color: $gray-darker;
       background-color: white;
-      border: $input-btn-border-width solid $input-border-color;
       height: $input-height;
       padding: 0.175rem 0.5rem;
       width: rem(48px);

themes/classic/_dev/css/components/products.scss

@@ -43,27 +43,54 @@
   border: 2px solid white;
 }
 .product-actions {
+  .control-label {
+    width: 100%;
+    margin-bottom: rem(6px);
+    display: block;
+    width: 100%;
+  }
   .add-to-cart {
-    margin-left: rem(15px);
-    margin-top: rem(47px);
+    height: rem(44px);
+    line-height: inherit;
+    padding-top: rem(10px);
+    .material-icons {
+      line-height: inherit;
+    }
   }
 }
 .product-quantity {
-  display: inline-block;
-  .bootstrap-touchspin {
-    margin-top: rem(-6px);
+  .qty {
+    float: left;
+    width: 80px;
+    margin-bottom: rem(8px);
+  }
+  .add {
+    float: left;
+    margin-bottom: rem(8px);
   }
   #quantity_wanted {
     color: $gray-darker;
     background-color: white;
-    border: 1px solid $gray-light;
-    height: 2.25rem;
+    height: rem(44px);
     padding: 0.175rem 0.5rem;
-    width: 3rem;
+    width: rem(48px);
   }
   .input-group-btn-vertical {
     float: left;
   }
+  .input-group-btn-vertical {
+    .btn {
+      padding: rem(11px) rem(10px) rem(10px) rem(10px);
+      i {
+        font-size: rem(16px);
+        top: rem(2px);
+        left: rem(3px);
+      }
+    }
+  }
+  .btn-touchspin {
+    height: rem(23px);
+  }
 }
 .product-discounts {
   margin: $extra-large-space 0;
@@ -133,7 +160,7 @@
 }
 .tabs {
   @include box-shadow;
-  margin-top: $medium-space;
+  margin-top: rem(32px);
   background: white;
   padding: $medium-space $large-space;
   .tab-pane {
@@ -329,11 +356,8 @@
   display: inline-block;
   font-weight: 700;
   margin-left: $small-space;
-  margin-top: rem(47px);
-  position: relative;
-  top: rem(25px);
   .material-icons {
-    margin-right: rem(5px);
+    line-height: inherit;
   }
   .product-available {
     color: $brand-success;
@@ -382,6 +406,10 @@
     ul li {
       margin-right: $small-space;
     }
+    .color {
+      margin-left: 0;
+      margin-top: 0;
+    }
   }
 }
 .product-flags {
@@ -478,19 +506,22 @@ li.product-flag {
   width: 100%;
   @include display(flex);
   @include align-items(center);
-  margin-top: $medium-space;
+  margin-top: rem(24px);
   ul {
     margin-bottom: 0;
   }
   li {
     @include box-shadow;
-    height: 2.5em;
-    width: 2.5em;
+    height: rem(40px);
+    width: rem(40px);
     border-radius: 50%;
     display: inline-block;
     background-color: white;
+    background-repeat: no-repeat;
+    background-size: rem(32px) rem(32px);
+    background-position: rem(4px) rem(4px);
     cursor: pointer;
-    margin-left: $font-size-base;
+    margin-left: rem(8px);
     @include transition(all .2s ease-in);
     a {
       display: block;

themes/classic/_dev/css/components/quickview.scss

@@ -14,7 +14,6 @@
     min-height: rem(380px);
   }
   .modal-footer {
-    margin-top: $extra-large-space;
     border-top: 1px solid rgba($gray,.3);
   }
   .layer {

themes/classic/_dev/css/partials/_commons.scss

@@ -170,6 +170,9 @@ small.label, small.value {
     &:focus {
       outline: none;
     }
+    &.form-control {
+      border: $input-btn-border-width solid $input-border-color;
+    }
   }
   .btn-touchspin {
     @extend .btn-default;

themes/classic/_dev/js/cart.js

@@ -71,6 +71,7 @@ function createSpin()
     verticaldownclass: 'material-icons touchspin-down',
     buttondown_class: 'btn btn-touchspin js-touchspin',
     buttonup_class: 'btn btn-touchspin js-touchspin',
+    min: 1,
     max: 1000000
   });
 }

themes/classic/_dev/js/listing.js

@@ -40,6 +40,15 @@ $(document).ready(() => {
         }
       });
     }
+    qv.find('#quantity_wanted').TouchSpin({
+      verticalbuttons: true,
+      verticalupclass: 'material-icons touchspin-up',
+      verticaldownclass: 'material-icons touchspin-down',
+      buttondown_class: 'btn btn-touchspin js-touchspin',
+      buttonup_class: 'btn btn-touchspin js-touchspin',
+      min: 1,
+      max: 1000000
+    });
   };
   var move = (direction) => {
     const THUMB_MARGIN = 20;

themes/classic/_dev/js/product.js

@@ -61,6 +61,7 @@ $(document).ready(function () {
       verticaldownclass: 'material-icons touchspin-down',
       buttondown_class: 'btn btn-touchspin js-touchspin',
       buttonup_class: 'btn btn-touchspin js-touchspin',
+      min: 1,
       max: 1000000
     });
   }

themes/classic/assets/js/theme.js

@@ -16545,6 +16545,15 @@
 	        }
 	      });
 	    }
+	    qv.find('#quantity_wanted').TouchSpin({
+	      verticalbuttons: true,
+	      verticalupclass: 'material-icons touchspin-up',
+	      verticaldownclass: 'material-icons touchspin-down',
+	      buttondown_class: 'btn btn-touchspin js-touchspin',
+	      buttonup_class: 'btn btn-touchspin js-touchspin',
+	      min: 1,
+	      max: 1000000
+	    });
 	  };
 	  var move = function move(direction) {
 	    var THUMB_MARGIN = 20;
@@ -20524,6 +20533,7 @@
 	      verticaldownclass: 'material-icons touchspin-down',
 	      buttondown_class: 'btn btn-touchspin js-touchspin',
 	      buttonup_class: 'btn btn-touchspin js-touchspin',
+	      min: 1,
 	      max: 1000000
 	    });
 	  }
@@ -20602,6 +20612,7 @@
 	    verticaldownclass: 'material-icons touchspin-down',
 	    buttondown_class: 'btn btn-touchspin js-touchspin',
 	    buttonup_class: 'btn btn-touchspin js-touchspin',
+	    min: 1,
 	    max: 1000000
 	  });
 	}