wickes-css2 2.105.0-develop.7 → 2.105.0-develop.8

package/src/page_project-list-vat.html

@@ -21,8 +21,4 @@
   }}
 </main>
 {{/content}}
-{{#content "foot" mode="append"}}
-<script defer src="./js/project-list.min.js"></script>
-<script defer src="./js/share-project-list.min.js"></script>
-{{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup-android.html

@@ -8,9 +8,7 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list.min.js"></script>
-<script defer src="./js/share-project-list.min.js"></script>
+<script src="./js/project-list-note.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
-<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup-ios.html

@@ -8,9 +8,7 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list.min.js"></script>
-<script defer src="./js/share-project-list.min.js"></script>
+<script src="./js/project-list-note.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
-<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_project-list-with-new-share-popup.html

@@ -8,8 +8,7 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script defer src="./js/project-list.min.js"></script>
+<script src="./js/project-list-note.min.js"></script>
 <script async src="https://static.addtoany.com/menu/page.js"></script>
-<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_search-results.html

@@ -16,7 +16,8 @@
 
     <div class="row">
       <aside class="left-aside">
-        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
+        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
+        {{> search-filter-mobile }}
       </aside>
 
       <div class="content">
@@ -24,6 +25,11 @@
 
         <div class="sort-products-list">
           <div class="sort-products-list__section sort-products-list__items-per-page">
+            <button class="btn btn-primary open-filters-btn" id="open-overlay">
+              <span class="btn__text">
+                <span class="icon"><span class="fas fa-filter"></span></span>Show filters
+              </span>
+            </button>
             {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
           </div>
           <div class="sort-products-list__section sort-products-list__pagination">
@@ -74,6 +80,5 @@
 <script defer src="./js/energy-efficiency.min.js"></script>
 <script defer src="./js/page/plp-img-v2.js"></script>
 <script defer src="./js/page/plp-cards-v2.js"></script>
-<script defer src="./js/search-filter.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_shared-project-list-bicester-hub.html

@@ -9,9 +9,7 @@
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script defer src="./js/project-list.min.js"></script>
-<script defer src="./js/share-project-list.min.js"></script>
+<script src="./js/project-list-note.min.js"></script>
 <script defer src="./js/global-search.min.js"></script>
-<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_tradepro-discount-app.html

@@ -32,7 +32,7 @@ mainClass="discount-offer"
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-        discountSrc=my_account.tradepro.discount
+        discountText=my_account.tradepro.discountText
         title="In-store discount"
         code=my_account.discount
         }}

package/src/page_tradepro-discount-double.html

@@ -0,0 +1,109 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account discount double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary  discount-offer__body--double">
+        {{> my-account/discount
+            secondary=true
+            mod="discount-offer--background-secondary"
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id discount-offer--background-secondary"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+            discountText=my_account.tradepro.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -2,7 +2,7 @@
   "my-account-v2"
   dataBreadcrumbs=discount.tradePro.breadcrumbs
   pageClass="page_my-account_new"
-  title="My Account DIY"
+  title="My Account discount"
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
@@ -24,6 +24,40 @@
   </div>
 </div>
 
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary">
+        {{> my-account/discount
+            secondary=true
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=my_account.tradepro2.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-12 discount-offer__wrap">
@@ -32,7 +66,7 @@
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-            discountSrc=my_account.tradepro.discount
+            discountText=my_account.tradepro.discountText
             title="In-store discount"
             code=my_account.discount
         }}

package/src/scss/common/_common.scss

@@ -180,7 +180,7 @@ main {
   &__text {
     display: inline-block;
     vertical-align: top;
-    font-size: 0.875rem;
+    font-size: .875rem;
   }
 }
 
@@ -207,7 +207,7 @@ main {
   display: inline-block;
   padding: 2px 10px;
   background-color: $gray-bg;
-  font-size: 0.875rem;
+  font-size: .875rem;
   line-height: 1.375rem;
   border-left: 2px solid $gray;
 
@@ -318,7 +318,7 @@ main {
   border-top: 3px solid $blue-dark;
   width: 60px;
   height: 60px;
-  animation: spin 0.75s linear infinite;
+  animation: spin .75s linear infinite;
   position: absolute;
   left: calc(50% - 30px);
   top: calc(50% - 30px);
@@ -410,8 +410,7 @@ main {
 }
 
 @include media-breakpoint-down(xs) {
-  a,
-  p {
+  a, p {
     word-wrap: break-word;
   }
 

package/src/scss/components/_accordion.scss

@@ -46,6 +46,7 @@
         border-radius: 3px;
         word-wrap: break-word;
 
+
         &-icon {
           position: static;
           color: $warm-grey;
@@ -71,6 +72,7 @@
             content: '+';
             font-size: 1.77rem;
           }
+
         }
 
         &:hover {
@@ -87,7 +89,7 @@
         border-radius: 3px;
 
         &-inner {
-          font-size: 0.875rem;
+          font-size: .875rem;
           font-weight: 500;
           line-height: 18px;
         }

package/src/scss/components/_custom-slider.scss

@@ -6,9 +6,8 @@
   border-radius: 0;
   position: fixed;
   background-color: $white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  /* prettier-ignore */
-  transition: transform 0.4s ease, opacity 0.4s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
+  transition: transform .4s ease, opacity .4s ease;
   opacity: 0;
   display: flex;
   flex-direction: column;
@@ -131,7 +130,7 @@
 
       &__notice {
         margin-top: 4px;
-        font-size: 0.75rem;
+        font-size: .75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -207,7 +206,7 @@
       }
 
       .title {
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: 500;
         line-height: 1.375rem;
         text-decoration: none;
@@ -215,7 +214,7 @@
       }
 
       .item {
-        font-size: 0.75rem;
+        font-size: .75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -291,8 +290,8 @@
         }
 
         &[disabled] {
-          border: none;
-          opacity: 0.6;
+          border: 0;
+          opacity: .6;
         }
       }
     }
@@ -300,7 +299,7 @@
     .btn--remove,
     .btn--quantity {
       &:hover {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
@@ -333,10 +332,10 @@
     grid-gap: 16px;
     padding: 16px;
     background: $white;
-    transition: all 0.3s ease;
+    transition: all .3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -407,7 +406,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       flex-direction: column;
     }
   }
@@ -520,7 +519,7 @@
 
           .checkout-widget__details-hidden {
             padding-left: 15px;
-            font-size: 0.75rem;
+            font-size: .75rem;
             line-height: 1rem;
             list-style-type: disc;
             font-weight: 400;
@@ -531,7 +530,7 @@
             .icon {
               color: $blue;
               font-size: 1rem;
-              transition: all 0.3s ease;
+              transition: all .3s ease;
               transform: rotate(180deg);
             }
 
@@ -600,7 +599,7 @@
       margin-top: 12px;
 
       &__details .title {
-        @include multiline-ellipsis(1);
+        @include multiline-ellipsis();
       }
 
       &__item {

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -17,7 +17,7 @@
   }
 
   &__annotation {
-    font-size: 0.75rem;
+    font-size: .75rem;
   }
 
   .delivery-date::after {
@@ -70,14 +70,14 @@
       &_names {
         background: $white;
         color: $blue-ocean-dark;
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: 500;
         margin: 0;
       }
 
       &_days {
-        font-size: 0.8125rem;
-        line-height: 0.8125rem;
+        font-size: .8125rem;
+        line-height: .8125rem;
         font-weight: 500;
       }
 
@@ -88,7 +88,7 @@
 
     &__cell {
       &_cnt {
-        font-size: 0.875rem;
+        font-size: .875rem;
         border-radius: 50%;
         height: 34px;
         line-height: 34px;
@@ -111,6 +111,7 @@
         }
       }
 
+
       &_selected,
       &:active {
         position: relative;
@@ -224,7 +225,7 @@
 
     .subtitle {
       margin-top: 2px;
-      font-size: 0.875rem;
+      font-size: .875rem;
       font-weight: 400;
       line-height: 22px;
       text-wrap: auto;

package/src/scss/components/_date-selection.scss

@@ -404,7 +404,7 @@
       right: 20px;
       font-size: 1.125rem;
       color: $blue;
-      transition: all 0.5s ease;
+      transition: all .5s ease;
       transform: rotate(180deg);
     }
   }

package/src/scss/components/_popover-mini-basket.scss

@@ -34,7 +34,7 @@
     &-desc {
       display: inline-block;
       margin-top: 4px;
-      font-size: 0.75rem;
+      font-size: .75rem;
     }
 
     &-text-wrapper {
@@ -44,7 +44,7 @@
     &-message {
       margin: 0;
       display: inline-block;
-      font-size: 0.875rem;
+      font-size: .875rem;
       vertical-align: middle;
       font-weight: 500;
       max-width: calc(100% - 30px);
@@ -119,7 +119,7 @@
     .notification__close {
       right: 10px;
       top: 10px;
-      font-size: 0.75rem;
+      font-size: .75rem;
     }
 
     .notification__icon {

package/src/scss/components/_search-filter.scss

@@ -3,25 +3,6 @@
     padding: 20px 0 0;
   }
 
-  &__facet-cta {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    color: $blue;
-    font-weight: 500;
-    font-size: 0.875rem;
-    line-height: 22px;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: auto;
-    }
-  }
-
   &__item {
     margin-bottom: 20px;
 
@@ -42,44 +23,19 @@
 }
 
 .filter-results {
-  .accordions {
-    overflow: auto;
-    max-height: calc(100vh - 137px);
-  }
-
   &_mobile {
+    max-height: 100vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 
-  &_desktop {
-    position: sticky;
-  }
-
   &__heading {
-    padding: 12px 0;
-    position: sticky;
-    background-color: $white;
-    z-index: $filters;
-
-    &:before {
-      content: '';
-      bottom: 100%;
-      left: 0;
-      position: absolute;
-      width: 100%;
-      height: 40px;
-      background: $white;
-    }
+    padding: 10px 0;
 
     .link-secondary {
       text-decoration: none;
       float: right;
     }
-
-    .flex {
-      margin-bottom: 8px;
-    }
   }
 
   &__actions {
@@ -100,6 +56,16 @@
     }
   }
 
+  &__close-holder {
+    margin-bottom: 10px;
+    text-align: right;
+  }
+
+  &__btn-close {
+    color: $warm-grey;
+    font-size: 1rem;
+  }
+
   .custom-scroll {
     &[data-simplebar] {
       max-height: 234px;
@@ -117,25 +83,8 @@
   }
 
   .filter-results {
-    &_desktop {
-      display: none;
-    }
-
-    &__heading {
-      padding-bottom: 20px;
-    }
-  }
-}
-
-.page-responsiveThematicProductListPage {
-  .sort-products-list {
-    @include make-row;
-    justify-content: space-between;
-  }
-
-  .filter-results_mobile {
-    display: none;
     padding: 20px 15px;
+    display: none;
     position: fixed;
     top: 0;
     right: 0;
@@ -149,24 +98,8 @@
       display: block;
     }
 
-    &__close-holder {
-      display: block;
-    }
-
-    .filter-results {
-      &__heading:before {
-        display: none;
-      }
-
-      &__close-holder {
-        margin-bottom: 10px;
-        text-align: right;
-      }
-
-      &__btn-close {
-        color: $warm-grey;
-        font-size: 1rem;
-      }
+    &__heading {
+      padding-bottom: 20px;
     }
   }
 }
@@ -183,17 +116,4 @@
       display: none;
     }
   }
-
-  .page-responsiveThematicProductListPage {
-    .filter-results {
-      &_desktop {
-        display: block;
-        position: static;
-      }
-
-      &__heading {
-        position: static;
-      }
-    }
-  }
 }

package/src/scss/components/checkout-chip.scss

@@ -38,7 +38,7 @@
     gap: 4px;
     cursor: pointer;
     user-select: none;
-    transition: border-color 0.2s;
+    transition: border-color .2s;
     width: 78px;
   }
 
@@ -62,4 +62,4 @@
   .checkout-chip__label {
     border: 1px solid $red;
   }
-}
+}