wickes-css2 2.109.0-develop.6 → 2.109.0-develop.7

package/src/scss/components/_card-store-locator.scss

@@ -2,6 +2,16 @@
   border: 1px solid $gray;
   display: flex;
   flex-direction: column;
+  height: 100%;
+
+  &__schedule {
+    .schedule-title {
+      &.card-store__title {
+        font-weight: $btn-font-weight;
+        padding: 15px 15px 13px;
+      }
+    }
+  }
 
   .store-locator-details & {
     border: 0;
@@ -17,8 +27,14 @@
     }
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
   &__info {
-    padding: 20px 15px 0;
+    padding: 15px 14px 0;
 
     .store-locator-details & {
       padding-top: 0;
@@ -27,16 +43,10 @@
 
   &__title {
     padding-top: 10px;
-    font-size: 1rem;
-    font-weight: 500;
+    font-weight: $headings-font-weight;
     line-height: 1.125rem;
 
-    &.schedule-title.schedule-title {
-      margin: 0 15px;
-    }
-
     .card-store__schedule & {
-      padding: 20px 0;
       font-weight: bold;
     }
 
@@ -51,11 +61,12 @@
   }
 
   &__distance {
-    font-weight: 500;
+    font-weight: $headings-font-weight;
+    margin-top: 4px;
   }
 
   &__address {
-    padding: 10px 0;
+    padding: 8px 0 0;
 
     .store-locator-details & {
       padding-bottom: 20px;
@@ -67,9 +78,21 @@
     }
   }
 
+  &__navigation {
+    padding: 16px 15px 4px;
+    margin-top: auto;
+
+    .btn {
+      margin-top: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
   &__schedule {
+    padding: 0 15px;
     line-height: 30px;
-    padding: 0 0 10px;
 
     .store-locator-details & {
       padding: 0 15px;
@@ -79,14 +102,10 @@
   &__contacts {
     @include primary-text;
     padding: 0 15px;
-
-    .store-locator-details & {
-      padding: 20px 15px;
-    }
   }
 
   &__tel {
-    padding-top: 10px;
+    padding-top: 8px;
     border-top: 1px solid $gray;
     display: block;
     white-space: nowrap;
@@ -103,23 +122,97 @@
   }
 
   &__actions {
-    text-align: center;
-    padding: 10px 0 20px;
+    padding: 8px 15px 15px;
 
     a {
-      font-weight: 500;
+      font-weight: $font-weight-bold;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      text-decoration: underline;
     }
   }
 
   &__features {
     padding: 0 15px;
   }
+}
 
-  &__navigation {
-    padding: 0 15px 15px;
+.card-store__schedule {
+  .opening-times-accordion {
+    padding: 0;
+    border-top: 0;
+    border-bottom: 0;
+
+    &__icon {
+      left: auto;
+      right: -2px;
+      top: 9px;
+      font-size: 1.25rem;
+    }
 
-    .btn {
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      padding: 10px 0 12px;
+      margin: 0;
+    }
+
+    &__title {
+      font-size: 0.875rem;
+      font-weight: $headings-font-weight;
+      line-height: 22px;
+      color: $gray-dark;
+    }
+
+    &__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease;
+    }
+
+    &__content {
+      padding: 0 0 12px;
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+
+    &__close {
       width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0 4px;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+
+      &:focus:not(:focus-visible) {
+        outline: none;
+      }
+    }
+
+    &__close-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: $headings-font-weight;
+      color: $blue;
+      cursor: pointer;
+      box-sizing: border-box;
+      height: 24px;
+      line-height: 24px;
+      width: 24px;
+      text-align: center;
+      font-size: 1.25rem;
+    }
+
+    &.accordion_collapsed {
+      .opening-times-accordion__icon {
+        transform: rotate(360deg);
+      }
     }
   }
 }
@@ -129,7 +222,11 @@
 
   &__day,
   &__time {
-    width: 50%;
+    display: flex;
+    justify-content: flex-end;
+    width: 56%;
+    min-width: 145px;
+    padding-right: 15px;
 
     .store-locator-details & {
       text-align: right;
@@ -137,8 +234,18 @@
     }
   }
 
+  &__time {
+    gap: 3px;
+  }
+
   &__day {
+    align-items: center;
+    justify-content: flex-start;
+    min-width: auto;
+    width: 44%;
     padding-left: 15px;
+    padding-right: 0;
+    line-height: 20px;
 
     .store-locator-details & {
       text-align: left;
@@ -165,12 +272,16 @@
 @include media-breakpoint-down(sm) {
   .card-store {
     &__schedule {
-      display: flex;
-      flex-direction: column;
+      display: block;
+      padding: 0 15px;
+    }
 
-      .card-store__special-time {
-        order: -1;
-      }
+    &__navigation {
+      padding-top: 12px;
+    }
+
+    &__actions {
+      padding-bottom: 12px;
     }
   }
 
@@ -188,10 +299,6 @@
     .store-locator-details & {
       width: 55%;
     }
-
-    &__info {
-      min-height: 240px;
-    }
   }
 }
 

package/src/scss/components/card-product-banner.scss

@@ -1,46 +1,23 @@
 @import '../helpers/helpers';
 
-.card-product-banner {
+.card-bloomreach-media-banner {
+  padding: 0 15px;
+}
+
+.card-product-banner,
+.card-bloomreach-media-banner {
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-down(sm) {
-    position: relative;
-    padding: 0 5px;
-    margin-bottom: 20px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 5px;
-      width: calc(100% - 10px);
-      border-bottom: 1px solid #ccc;
-    }
-  }
-
   &__link {
     display: inline-block;
     width: 100%;
     height: 100%;
     padding: 0 15px;
-
-    @include media-breakpoint-down(sm) {
-      display: inline-block;
-      padding: 0;
-      width: 100%;
-    }
-  }
-
-  &__picture {
-    display: flex;
   }
 
-  &__image {
+  &__image,
+  img {
     display: inline-block;
     width: 100%;
   }
@@ -61,10 +38,6 @@
       padding: 0 15px;
     }
 
-    &__picture {
-      display: flex;
-    }
-
     &__image {
       display: inline-block;
       width: 100%;
@@ -94,6 +67,11 @@
 }
 
 @include media-breakpoint-down(md) {
+  .card-product-banner,
+  .card-bloomreach-media-banner {
+    @include make-col(6);
+  }
+
   .products-list {
     .card-sponsor-product,
     .card-sponsor-banner {
@@ -117,6 +95,28 @@
 }
 
 @include media-breakpoint-down(sm) {
+  .card-product-banner,
+  .card-bloomreach-media-banner {
+    position: relative;
+    padding: 0 5px;
+    margin-bottom: 20px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 5px;
+      width: calc(100% - 10px);
+      border-bottom: 1px solid #ccc;
+    }
+
+    &__link {
+      display: inline-block;
+      width: 100%;
+      padding: 0;
+    }
+  }
+
   .products-list {
     .product-card__sponsored {
       margin-right: auto;

package/src/scss/components/special-opening-schedule-v2.scss

@@ -3,7 +3,7 @@
 .special-opening-schedule-item.schedule-item {
   flex-direction: row;
 
-  &__reason  {
+  &__reason {
     @include make-col(1, 3);
     font-weight: 400;
     padding: 0 15px;
@@ -24,7 +24,7 @@
     white-space: nowrap;
   }
 
-  &__addition-info  {
+  &__addition-info {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;
@@ -35,10 +35,6 @@
 
 .store-locator {
   .special-opening-schedule-item.schedule-item {
-    &__reason  {
-      display: none;
-    }
-
     &__data-time {
       @include make-col(12);
     }

package/src/scss/components/special-opening-schedule.scss

@@ -5,10 +5,12 @@
   flex-direction: column;
   line-height: 2;
   padding: 5px 0;
+  position: relative;
 
-  &__reason  {
+  &__reason {
     font-weight: 700;
-    padding: 0 15px;
+    padding: 0 0 0 15px;
+    line-height: 24px;
   }
 
   &__data-time {
@@ -17,7 +19,10 @@
   }
 
   &__time {
-    text-transform: uppercase;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
 
     @include media-breakpoint-up(sm) {
       white-space: nowrap;
@@ -28,7 +33,7 @@
     }
   }
 
-  &__addition-info  {
+  &__addition-info {
     font-weight: 500;
     padding: 0 15px;
     margin: 5px 0;
@@ -36,3 +41,11 @@
     font-size: 12px;
   }
 }
+
+@include media-breakpoint-up(xl) {
+  .special-opening-schedule-item.schedule-item {
+    &__reason {
+      min-width: 106px;
+    }
+  }
+}

package/src/scss/emulation.scss

@@ -57,12 +57,6 @@
   max-width: 0.625rem;
 }
 
-@include media-breakpoint-down(sm) {
-  .cards-store-list:not(:nth-child(-n + 4)) {
-    display: none;
-  }
-}
-
 .pdp-price__quantity-calculator,
 .calculator-hub-wrapper {
   min-height: 38px;

package/src/scss/pages/page_store-locator.scss

@@ -7,16 +7,26 @@ h1 {
 
 .cards-store {
   &-list {
-    @include make-col-ready;
-    margin-bottom: 20px;
+    padding-right: 0;
+    padding-left: 0;
+    height: auto;
 
     &__actions {
-      margin: 0 auto;
+      margin: 24px auto 0;
     }
   }
 
   &-wrapper {
     padding-top: 40px;
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      margin-right: 0;
+      margin-left: 0;
+      align-items: start;
+    }
   }
 }
 
@@ -40,10 +50,6 @@ h1 {
   padding-top: 20px;
 }
 
-.cards-store-list__actions {
-  margin: 0 auto;
-}
-
 .btn_store-near-me {
   @include button-full;
   margin-bottom: 20px;
@@ -52,25 +58,20 @@ h1 {
 @include media-breakpoint-down(sm) {
   .cards-store {
     &-list {
-      @include make-col-ready;
-      @include make-col(12);
-
       &__actions {
-        @include make-col-ready;
-        @include make-col(12);
+        width: 100%;
 
         .icon__eye {
-          svg {
-            vertical-align: -.45em;
-            height: 1.375rem;
-            width: 1.3125rem;
+          svg,
+          i {
+            vertical-align: -0.15em;
             margin-right: 5px;
           }
         }
       }
     }
 
-    &-list_open .cards-store-list:not(:nth-child(-n+3)) {
+    &-list_open .cards-store-list:not(:nth-child(-n + 3)) {
       display: block;
     }
   }
@@ -92,18 +93,28 @@ h1 {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sm) {
   .cards-store {
-    &-list {
-      @include make-col-ready;
-      @include make-col(4);
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
 
-      &__actions {
-        display: none;
+    &-list__actions {
+      margin: 24px 0 0;
+      display: flex;
+      justify-content: center;
+
+      .btn {
+        min-width: 148px;
+        width: auto;
       }
     }
   }
+}
 
+@include media-breakpoint-up(md) {
   .btn_store-near-me {
     display: none;
   }
@@ -111,9 +122,20 @@ h1 {
 
 @include media-breakpoint-up(lg) {
   .cards-store {
-    &-list {
-      @include make-col-ready;
-      @include make-col(3);
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .cards-store {
+    &-wrapper {
+      .row {
+        grid-template-columns: repeat(4, 1fr);
+      }
     }
   }
 }

package/src/scss/store-locator-main.scss

@@ -21,9 +21,20 @@
 @import 'components/special-opening-schedule-v2';
 @import 'pages/page_store-locator';
 @import 'pages/page_store-locator-details';
-@import 'components/pagination';
+@import 'components/loader';
+// Loader
+
+.loader-wrapper {
+  position: fixed;
+}
+
+// Main
+main {
+  padding-bottom: 72px;
+}
 
 //Component card extract start
+
 .card {
   flex-direction: row;
   margin-bottom: 30px;
@@ -74,10 +85,12 @@
   div {
     font-weight: 100;
   }
+
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
 }
+
 //Component card extract end
 
 //Page store-locator extract start
@@ -89,4 +102,5 @@
     display: none;
   }
 }
+
 //Page store-locator extract end

package/src/sitemap.html

@@ -50,6 +50,7 @@
                         <li><span class="page-id">1.19</span><a href="page_homepage-with-chat-bot.html" target="_blank">Homepage - With Chat Bot Icon</a></li>
                         <li><span class="page-id">1.20</span><a href="page_plp-with-paint.html" target="_blank">Products list - With paint swatches</a></li>
                         <li><span class="page-id">1.21</span><a href="page_homepage-with-global-search-v2-vat.html" target="_blank">Homepage - With Content Search V2 VAT</a></li>
+                        <li><span class="page-id">1.22</span><a href="page_plp_bloomreach.html" target="_blank">Products list Bloomreach</a></li>
                     </ul>
                     <h3>PDP</h3>
                     <ul>

package/src/js/emulation/store-locator-list.js

@@ -1,19 +0,0 @@
-//TODO: needs refactoring in future, gather tother with range-type.js for common script
-var Wick = Wick || {};
-
-Wick.StoreLocator = (function () {
-  var $button = $('.store-locator__load-button'),
-    cardsListOpenClass = 'cards-store-list_open',
-    $cardsList = $('.cards-store-wrapper'),
-    $buttons = $cardsList.find($button);
-
-  $buttons.on('click', function () {
-    if ($cardsList.hasClass(cardsListOpenClass)) {
-      $('html, body').scrollTop($cardsList.parents('.cards-store-holder').offset().top + 20);
-    }
-    $cardsList.toggleClass(cardsListOpenClass);
-    $buttons.toggle();
-  });
-})();
-
-