Merge pull request #325 from SharakPL/clean-helpers

Clean helpers, add programmable media queries

modules/ps_facetedsearch/views/templates/front/catalog/facets.tpl

@@ -19,22 +19,22 @@
 {$componentName = 'search-filters'}
 
 {if $displayedFacets|count}
-  <div id="search-filters" class="{$componentName} d-flex flex-direction-column flex-wrap w-full">
+  <div id="search-filters" class="{$componentName} d-flex flex-direction-column flex-wrap w-100">
     {block name='facets_title'}
       <p class="{$componentName}-title d-none d-md-block">{l s='Filter By' d='Shop.Theme.Actions'}</p>
     {/block}
 
     {block name='facets_clearall_button'}
       {if $activeFilters|count}
-        <div class="clear-all-wrapper w-full order-2 order-md-1">
+        <div class="clear-all-wrapper w-100 order-2 order-md-1">
           <button data-search-url="{$clear_all_link}" class="btn border rounded-pill text-gray py-1 my-2 js-search-filters-clear-all">
             {l s='Clear all' d='Shop.Theme.Actions'}
           </button>
         </div>
       {/if}
     {/block}
 
-    <div class="accordion w-full order-1 order-md-2">
+    <div class="accordion w-100 order-1 order-md-2">
       {foreach from=$displayedFacets item="facet" name="facets"}
         <section class="facet accordion-item">
           {assign var=_expand_id value=10|mt_rand:100000}

modules/ps_shoppingcart/modal.tpl

@@ -97,11 +97,11 @@
       </div>
       <div class="modal-footer border-1">
         <div class="cart-footer-actions d-flex flex-wrap align-items-center justify-content-between w-100">
-          <button type="button" class="btn btn-outline-primary btn-with-icon w-md-auto w-full mb-md-0 mb-3" data-bs-dismiss="modal">
+          <button type="button" class="btn btn-outline-primary btn-with-icon w-md-auto w-100 mb-md-0 mb-3" data-bs-dismiss="modal">
             <i class="material-icons rtl-flip">&#xE5CB;</i>
             {l s='Continue shopping' d='Shop.Theme.Actions'}
           </button>
-          <a href="{$cart_url}" class="btn btn-primary w-md-auto w-full">{l s='Proceed to checkout' d='Shop.Theme.Actions'}</a>
+          <a href="{$cart_url}" class="btn btn-primary w-md-auto w-100">{l s='Proceed to checkout' d='Shop.Theme.Actions'}</a>
         </div>    
         <div class="cart-footer-extra d-flex flex-wrap w-100 m-0">
           {hook h='displayCartModalFooter' product=$product}

src/scss/partials/_helpers.scss

@@ -12,48 +12,22 @@
   flex-wrap: nowrap;
 }
 
-@media screen and (min-width: 576px) {
-  .container--limited-sm {
-    max-width: 540px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .container--limited-md {
-    max-width: 720px;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .container--limited-lg {
-    max-width: 960px;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .container--limited-xl {
-    max-width: 1140px;
+@each $breakpoint, $container-max-width in $container-max-widths {
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    .container--limited-#{$breakpoint} {
+      max-width: $container-max-width;
+    }
+
+    .w-#{$breakpoint}-auto {
+      width: auto;
+    }
+
+    .w-#{$breakpoint}-100 {
+      width: 100%;
+    }
   }
 }
 
 .text-gray {
   color: $gray-700;
 }
-
-.w-full {
-  width: 100%;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.w-md-auto {
-  @include media-breakpoint-up(md) {
-    width: auto;
-  }
-}

templates/catalog/_partials/product-discounts.tpl

@@ -7,7 +7,7 @@
     <p class="h6 product__discounts__title">{l s='Volume discounts' d='Shop.Theme.Catalog'}</p>
     {block name='product_discount_table'}
       <div class="table-wrapper p-2 px-3">
-        <table class="product__discounts__table w-full">
+        <table class="product__discounts__table w-100">
           <thead>
           <tr>
             <th>{l s='Quantity' d='Shop.Theme.Catalog'}</th>

templates/catalog/_partials/products-top.tpl

@@ -20,7 +20,7 @@
 
         {if !empty($listing.rendered_facets)}
           <div class="col-4 d-block d-md-none filter-button">
-            <button id="search_filter_toggler" class="btn btn-outline-primary btn-with-icon w-full js-search-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-faceted">
+            <button id="search_filter_toggler" class="btn btn-outline-primary btn-with-icon w-100 js-search-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-faceted">
               <i class="material-icons">filter_list</i>
               {l s='Filter' d='Shop.Theme.Actions'}
             </button>

templates/checkout/_partials/steps/addresses.tpl

@@ -49,7 +49,7 @@
           <p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
         {/if}
 
-        <a href="{$new_address_delivery_url}" class="btn btn-outline-primary btn-with-icon w-full w-md-auto mb-3">
+        <a href="{$new_address_delivery_url}" class="btn btn-outline-primary btn-with-icon w-100 w-md-auto mb-3">
           <i class="material-icons">&#xE145;</i>
           {l s='Add new address' d='Shop.Theme.Actions'}
         </a>
@@ -90,7 +90,7 @@
             <p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
           {/if}
 
-          <a href="{$new_address_invoice_url}" class="btn btn-outline-primary btn-with-icon w-full w-md-auto">
+          <a href="{$new_address_invoice_url}" class="btn btn-outline-primary btn-with-icon w-100 w-md-auto">
             <i class="material-icons">&#xE145;</i>
             {l s='Add new address' d='Shop.Theme.Actions'}
           </a>
@@ -99,13 +99,13 @@
       {/if}
 
       <div class="mt-4 d-flex flex-wrap justify-content-between">
-        <button class="btn btn-outline-primary btn-with-icon w-full w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-personal-information-step">
+        <button class="btn btn-outline-primary btn-with-icon w-100 w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-personal-information-step">
           <i class="material-icons rtl-flip">arrow_backward</i>
           {l s='Back to Personal Information' d='Shop.Theme.Actions'}
         </button>
 
         {if !$form_has_continue_button}
-            <button type="submit" class="btn btn-primary btn-with-icon w-full w-md-auto continue" name="confirm-addresses" value="1">
+            <button type="submit" class="btn btn-primary btn-with-icon w-100 w-md-auto continue" name="confirm-addresses" value="1">
               {l s='Continue to Shipping' d='Shop.Theme.Actions'}
               <div class="material-icons rtl-flip">arrow_forward</div>
             </button>

templates/checkout/_partials/steps/payment.tpl

@@ -130,15 +130,15 @@
   {/if}
 
   <div class="payment__actions d-block d-md-flex d-flex flex-wrap justify-content-between">
-    <button class="btn btn-outline-primary btn-with-icon w-full w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-delivery-step">
+    <button class="btn btn-outline-primary btn-with-icon w-100 w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-delivery-step">
       <div class="material-icons rtl-flip">arrow_backward</div>
       {l s='Back to Shipping method' d='Shop.Theme.Actions'}
     </button>
 
-    <div id="payment-confirmation" class="w-full w-md-auto js-payment-confirmation">
+    <div id="payment-confirmation" class="w-100 w-md-auto js-payment-confirmation">
       <div class="ps-shown-by-js">
         <div class="payment__actions">
-          <button type="submit" class="btn btn-primary btn-with-icon w-full{if !$selected_payment_option} disabled{/if}">
+          <button type="submit" class="btn btn-primary btn-with-icon w-100{if !$selected_payment_option} disabled{/if}">
             {l s='Place order' d='Shop.Theme.Checkout'}
             <div class="material-icons rtl-flip">arrow_forward</div>
           </button>

templates/checkout/_partials/steps/personal-information.tpl

@@ -38,7 +38,7 @@
     <div class="mt-4">
       <form method="GET" action="{$urls.pages.order}">
         <button
-          class="continue btn btn-primary btn-with-icon w-full w-md-auto"
+          class="continue btn btn-primary btn-with-icon w-100 w-md-auto"
           name="controller"
           type="submit"
           value="order"

templates/checkout/_partials/steps/shipping.tpl

@@ -96,12 +96,12 @@
         </div>
 
         <div class="shipping__actions d-flex flex-wrap justify-content-between">
-          <button class="btn btn-outline-primary btn-with-icon w-full w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-addresses-step">
+          <button class="btn btn-outline-primary btn-with-icon w-100 w-md-auto mb-3 mb-md-0 js-back" data-step="checkout-addresses-step">
             <div class="material-icons rtl-flip">arrow_backward</div>
             {l s='Back to Addresses' d='Shop.Theme.Actions'}
           </button>
 
-          <button type="submit" class="btn btn-primary btn-with-icon w-full w-md-auto" name="confirmDeliveryOption" value="1">
+          <button type="submit" class="btn btn-primary btn-with-icon w-100 w-md-auto" name="confirmDeliveryOption" value="1">
             {l s='Continue to Payment' d='Shop.Theme.Actions'}
             <div class="material-icons rtl-flip">arrow_forward</div>
           </button>

templates/checkout/checkout-steps.tpl

@@ -20,7 +20,7 @@
           {l s='1' d='Shop.Theme.Checkout'}
         </span> 
         <button 
-          class="{$componentName}__text nav-link w-full bg-transparent btn p-0 border-0 mb-0"
+          class="{$componentName}__text nav-link w-100 bg-transparent btn p-0 border-0 mb-0"
           data-bs-toggle="tab" 
           data-bs-target="#checkout-personal-information-step"
         >
@@ -37,7 +37,7 @@
           {l s='2' d='Shop.Theme.Checkout'}
         </span> 
         <button 
-          class="{$componentName}__text nav-link w-full bg-transparent btn p-0 border-0 mb-0"
+          class="{$componentName}__text nav-link w-100 bg-transparent btn p-0 border-0 mb-0"
           data-bs-toggle="tab" 
           data-bs-target="#checkout-addresses-step"
         >
@@ -54,7 +54,7 @@
           {l s='3' d='Shop.Theme.Checkout'}
         </span> 
         <button 
-          class="{$componentName}__text nav-link w-full bg-transparent btn p-0 border-0 mb-0"
+          class="{$componentName}__text nav-link w-100 bg-transparent btn p-0 border-0 mb-0"
           data-bs-toggle="tab" 
           data-bs-target="#checkout-delivery-step"
         >
@@ -71,7 +71,7 @@
           {l s='4' d='Shop.Theme.Checkout'}
         </span> 
         <button 
-          class="{$componentName}__text nav-link w-full bg-transparent btn p-0 border-0 mb-0"
+          class="{$componentName}__text nav-link w-100 bg-transparent btn p-0 border-0 mb-0"
           data-bs-toggle="tab" 
           data-bs-target="#checkout-payment-step"
         >