Merge branch 'develop'

prestarocket-agence · Apr 19, 2019 · f605ce1 · f605ce1
2 parents a877be8 + 0ce7b8a
commit f605ce1
Show file tree

Hide file tree

Showing 68 changed files with 809 additions and 416 deletions.
diff --git a/README.md b/README.md
@@ -4,14 +4,17 @@ Classic Rocket is a rework of "classic theme". It has been built keeping in  min
 
 Contributed by [Prestarocket](//www.prestarocket.com/blog/) (Twitter: [@prestarocket](https://twitter.com/prestarocket))
 
+Demo : [https://demoprestashop.prestarocket.com/](https://demoprestashop.prestarocket.com/)
+
 Main features :
 - last version of Twitter Bootstrap
 - lazy loading images
 - offcanvas for main menu and filter menu
 - less css and less js
-- form accessibility
+- form accessibility and better validation
 - SEO: Hn, rel prev/next for pagination...
 - font performance
+- better responsive
 
 We use [Dareboost](https://www.dareboost.com/) to test and improve our work.
 
@@ -22,7 +25,7 @@ With the same server (gzip, PrestaShop performance settings properly adjusted)
 - JS: 155 Ko (with Classic theme) to 86 Ko
 
 You can also see the web quality and performance comparison report on [Dareboost](https://www.dareboost.com/en/comparison/d_5b51dc70e967906045fd3683/d_5b51dc70e967906045fd3684)
-### Twitter Bootstrap 4.1.x
+### Twitter Bootstrap 4.3.x
 
 - Almost all tpl files are edited to use new BS classes (ex: col-xs-12 => col-12)
 - For retrocompatibility and third modules, we keep some important old classes in bs_alpha.scss      
@@ -110,11 +113,13 @@ Filter
 ```
 
 ## Compatibility
-PrestaShop 1.7.3.2 to 1.7.4.x
+PrestaShop 1.7.3.2 to 1.7.5.x
 
 ## Download
-- For PrestaShop 1.7.3.x (version 1.0.0): [classic-rocket](https://github.com/PrestaShop/classic-rocket/releases/download/1.0.0/classic-rocket.zip)
+- For PrestaShop 1.7.5.x (version 1.0.0): [classic-rocket](https://github.com/PrestaShop/classic-rocket/releases/download/2.1.1/classic-rocket.zip)
 
+## Misc
+You can also use gulp to work faster during development (gulpfile.js => gulp watch)
 
 ## To do (you can help!):
 - test rtl

diff --git a/_dev/css/bootstrap.scss b/_dev/css/bootstrap.scss
@@ -1,16 +1,16 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
+@import "node_modules/bootstrap/scss/root";
+@import "node_modules/bootstrap/scss/reboot";
+@import "node_modules/bootstrap/scss/type";
 $theme-colors: map-remove($theme-colors,"primary","secondary","success","info","warning","danger","light","dark");
 
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
+@import "node_modules/bootstrap/scss/images";
+@import "node_modules/bootstrap/scss/code";
+@import "node_modules/bootstrap/scss/grid";
+@import "node_modules/bootstrap/scss/tables";
+@import "node_modules/bootstrap/scss/forms";
 $theme-colors: (
         "primary":    $primary,
         "secondary":  $secondary,
@@ -21,22 +21,22 @@ $theme-colors: (
         "light":      $light,
         "dark":       $dark
 );
-@import "~bootstrap/scss/buttons";
+@import "node_modules/bootstrap/scss/buttons";
 $theme-colors: map-remove($theme-colors,"primary","secondary","success","info","warning","danger","light","dark");
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/nav";
-//@import "~bootstrap/scss/navbar";
+@import "node_modules/bootstrap/scss/transitions";
+@import "node_modules/bootstrap/scss/dropdown";
+@import "node_modules/bootstrap/scss/button-group";
+@import "node_modules/bootstrap/scss/input-group";
+@import "node_modules/bootstrap/scss/custom-forms";
+@import "node_modules/bootstrap/scss/nav";
+//@import "node_modules/bootstrap/scss/navbar";
 
 
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
+@import "node_modules/bootstrap/scss/card";
+@import "node_modules/bootstrap/scss/breadcrumb";
+@import "node_modules/bootstrap/scss/pagination";
+@import "node_modules/bootstrap/scss/badge";
+@import "node_modules/bootstrap/scss/jumbotron";
 $theme-colors: (
         "primary":    $primary,
         "secondary":  $secondary,
@@ -47,18 +47,18 @@ $theme-colors: (
         "light":      $light,
         "dark":       $dark
 );
-@import "~bootstrap/scss/alert";
+@import "node_modules/bootstrap/scss/alert";
 $theme-colors: map-remove($theme-colors,"primary","secondary","success","info","warning","danger","light","dark");
 
-//@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-//@import "~bootstrap/scss/carousel";
+//@import "node_modules/bootstrap/scss/progress";
+@import "node_modules/bootstrap/scss/media";
+@import "node_modules/bootstrap/scss/list-group";
+@import "node_modules/bootstrap/scss/close";
+@import "node_modules/bootstrap/scss/toasts";
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+@import "node_modules/bootstrap/scss/popover";
+//@import "node_modules/bootstrap/scss/carousel";
 $theme-colors: (
         "primary":    $primary,
         "secondary":  $secondary,
@@ -69,8 +69,8 @@ $theme-colors: (
         "light":      $light,
         "dark":       $dark
 );
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+@import "node_modules/bootstrap/scss/spinners";
+@import "node_modules/bootstrap/scss/utilities";
+@import "node_modules/bootstrap/scss/print";
 
 
diff --git a/_dev/css/components/cart.scss b/_dev/css/components/cart.scss
@@ -9,4 +9,84 @@
   .material-icons{
     color:$gray-600;
   }
+}
+.product-line-actions{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  .input-group.bootstrap-touchspin{
+    max-width: 130px;
+  }
+
+}
+.product-line-grid{
+  .product-line__title{
+    margin-bottom: $spacer*.75;
+    display: inline-block;
+    color: $body-color;
+  }
+  .product-price{
+    display: flex;
+    align-items: center;
+    .discount{
+      font-size: $font-size-sm;
+      line-height: 1;
+    }
+  }
+  .product-discount{
+    margin-right: $spacer/2;
+  }
+
+}
+.product-line__img{
+  margin-right: $spacer;
+}
+@include media-breakpoint-down(md) {
+  .product-line__img{
+    width: 100px;
+    height: auto;
+  }
+  .product-line-actions {
+  justify-content: flex-end;
+    margin-top: $spacer;
+    .product-price{
+      margin:0 $spacer*2;
+    }
+  }
+}
+@include media-breakpoint-down(sm) {
+  .product-line__img{
+    width: 50px;
+  }
+  .product-line-actions {
+    .product-price{
+      margin:0 $spacer;
+    }
+  }
+
+}
+
+.cart__card-body{
+  position: relative;
+ .cart__card-loader{
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   align-items: center;
+   justify-content: center;
+   display: none;
+   background-color: rgba($white, .85);
+   opacity: 0;
+   transition: $transition-fade;
+   z-index: 3;
+ }
+  &.is--loading{
+    .cart__card-loader {
+      display: flex;
+      opacity: 1;
+    }
+
+  }
 }
diff --git a/_dev/css/components/footer.scss b/_dev/css/components/footer.scss
@@ -1,12 +1,7 @@
 .l-footer {
   color: $text-muted;
 
-  .title{
-    color:$black;
-    text-transform: uppercase;
-    display: block;
-    @extend .h3;
-  }
+
   .cms-page-link,
   .account-list a{
     color: $text-muted;
@@ -15,4 +10,50 @@
 
     }
   }
-}
+}
+.footer-container{
+  margin-top: $footer-container-margin-top;
+}
+
+.footer__title{
+  color:$black;
+  &:visited,&:hover{
+    color: $black;
+  }
+  text-transform: uppercase;
+  display: block;
+  font-weight: 700;
+  margin-bottom: $spacer/2;
+  &--mobile{
+    display: none;
+    margin-bottom: 0;
+    padding: $spacer/2 0;
+    border-bottom: 1px solid $border-color;
+
+
+    &:after{
+      content:"\e313";
+      font-family: 'Material Icons';
+      font-feature-settings: 'liga' 1;
+      position: absolute;
+      right: $grid-gutter-width/2;
+      transition: .3s transform ease-in-out;
+      font-size: $font-size-base *1.5;
+    }
+    &[data-toggle="collapse"][aria-expanded="true"]:after {
+      transform:         rotate(180deg);
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .footer__title{
+    &--desktop{
+
+      display: none;
+    }
+    &--mobile{
+      display: block;
+    }
+  }
+}
diff --git a/_dev/css/components/imageslider.scss b/_dev/css/components/imageslider.scss
@@ -6,7 +6,7 @@
 }
 .slider-caption{
   position: absolute;
-  bottom:30px;
+  top:10%;
   left: 90px;
   margin-bottom: 0;
   color: #fff;

diff --git a/_dev/css/components/products.scss b/_dev/css/components/products.scss
@@ -191,6 +191,7 @@
   //@extend .d-flex;
   text-transform: uppercase;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 //product tabs
@@ -247,3 +248,57 @@
   padding-left: $spacer;
 }
 
+//modal cart
+.modal-cart__image{
+  margin-right: $spacer;
+  max-width: 200px;
+
+  height: auto;
+}
+@include media-breakpoint-down(md) {
+  .modal-cart__image{
+    max-width: 120px;
+  }
+  .blockcart-modal {
+    .divide-right{
+      display: flex;
+      justify-content: center;
+    }
+    .modal-footer {
+      position: fixed;
+      bottom: 0;
+      background: #fff;
+      justify-content: center;
+      left: 0;
+      width: 100%;
+      box-shadow: 0px -0.25rem 0.5rem rgba($black, .15);
+    }
+    .modal-body{
+      margin-bottom: ($btn-padding-y * 2) + ($btn-font-size*$btn-line-height) + $modal-inner-padding * 2;
+    }
+  }
+}
+@include media-breakpoint-down(xs) {
+  .modal-cart__image{
+    max-width: 70px;
+  }
+}
+//spinner add to cart
+.btn-add-to-cart {
+  .btn-add-to-cart__spinner {
+    @extend .spinner-border;
+    width: $spinner-width-addtocart;
+    height: $spinner-height-addtocart;
+    border-width: $spinner-borderwidth-addtocart;
+    display: none;
+  }
+  &.is--loading{
+    .btn-add-to-cart__spinner {
+      display: inline-block;
+    }
+    .btn-add-to-cart__icon {
+      display: none;
+    }
+  }
+}
+
diff --git a/_dev/css/partials/_commons.scss b/_dev/css/partials/_commons.scss
@@ -126,8 +126,21 @@ h1,.h1{
   height: 0;
   overflow: hidden;
   padding-top: 100%;
-  background: rgba(0,0,0,0.05) url("data:image/gif;base64,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") no-repeat center center;
+  background: rgba(0,0,0,0.05);
   transition: background 150ms;
+  &:after{
+    @extend .spinner-border;
+    content: "";
+    border-color: $gray-300;
+    position: absolute;
+    top: calc(50% - #{($spinner-height/2)});
+    left: calc(50% - #{($spinner-width/2)});
+    z-index: 2;
+    border-right-color: transparent;
+  }
+  &--lazyload:after{
+    display: none;
+  }
 }
 
 .rc > * {