Merge pull request #298 from Oksydan/bs5-styles-migration

Bs5 styles migration
Oksydan · Oct 8, 2023 · a8da696 · a8da696
2 parents 6dda425 + a8dcc56
commit a8da696
Show file tree

Hide file tree

Showing 104 changed files with 495 additions and 464 deletions.
diff --git a/_dev/css/abstracts/_index.scss b/_dev/css/abstracts/_index.scss
@@ -1,8 +1,8 @@
 @import "~bootstrap/scss/functions";
 
-@import "functions/index";
-@import "variables/index";
-@import "mixins/index";
+@import "functions";
+@import "variables";
+@import "mixins";
 
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";

diff --git a/_dev/css/abstracts/variables/bootstrap/_colors.scss b/_dev/css/abstracts/variables/bootstrap/_colors.scss
@@ -23,7 +23,7 @@ $green:   #28a745;
 $teal:    #20c997;
 $cyan:    #17a2b8;
 
-$primary:       $blue;
+$primary:       $gray-900;
 $secondary:     $gray-600;
 $success:       $green;
 $info:          $cyan;

diff --git a/_dev/css/abstracts/variables/bootstrap/_options.scss b/_dev/css/abstracts/variables/bootstrap/_options.scss
@@ -1 +1,2 @@
 $enable-responsive-font-sizes: true;
+$enable-dark-mode: false;
diff --git a/_dev/css/abstracts/variables/bootstrap/_typography.scss b/_dev/css/abstracts/variables/bootstrap/_typography.scss
@@ -37,3 +37,5 @@ $headings-margin-bottom:      rem-calc(20px);
 $headings-font-weight:        700;
 $headings-line-height:        1.2;
 $headings-color:              $gray-900;
+
+$link-decoration:             none;
diff --git a/_dev/js/theme/components/dynamic-bootstrap-components.js b/_dev/js/theme/components/dynamic-bootstrap-components.js
@@ -7,7 +7,7 @@ $(() => {
   const importModal = new DynamicImportHandler({
     jqueryPluginCover: 'modal',
     DOMEvents: 'click',
-    DOMEventsSelector: '[data-toggle="modal"]',
+    DOMEventsSelector: '[data-bs-toggle="modal"]',
     DOMEventsPreventDefault: true,
     files: () => [
       import('bootstrap/js/src/modal'),
@@ -18,7 +18,7 @@ $(() => {
   const importDropdown = new DynamicImportHandler({
     jqueryPluginCover: 'dropdown',
     DOMEvents: 'click',
-    DOMEventsSelector: '[data-toggle="dropdown"]',
+    DOMEventsSelector: '[data-bs-toggle="dropdown"]',
     DOMEventsPreventDefault: true,
     files: () => [
       import('bootstrap/js/src/dropdown'),
@@ -29,7 +29,7 @@ $(() => {
   const importCollapse = new DynamicImportHandler({
     jqueryPluginCover: 'collapse',
     DOMEvents: 'click',
-    DOMEventsSelector: '[data-toggle="collapse"]',
+    DOMEventsSelector: '[data-bs-toggle="collapse"]',
     DOMEventsPreventDefault: true,
     files: () => [
       import('bootstrap/js/src/collapse'),

diff --git a/_dev/js/theme/components/form.js b/_dev/js/theme/components/form.js
@@ -19,29 +19,19 @@ const supportedValidity = () => {
 
 export default class Form {
   static init() {
-    Form.parentFocus();
     Form.togglePasswordVisibility();
     Form.formValidation();
   }
 
-  static parentFocus() {
-    $('.js-child-focus').on('focus', ({ target }) => {
-      $(target).closest('.js-parent-focus').addClass('focus');
-    });
-    $('.js-child-focus').on('focusout', ({ target }) => {
-      $(target).closest('.js-parent-focus').removeClass('focus');
-    });
-  }
-
   static togglePasswordVisibility() {
     $('[data-action="show-password"]').on('click', (e) => {
       e.preventDefault();
       e.stopImmediatePropagation();
 
       const $btn = $(e.currentTarget);
       const $input = $btn
-        .closest('.input-group')
-        .children('input.js-visible-password');
+        .closest('.js-parent-focus')
+        .find('.js-visible-password');
 
       if ($input.attr('type') === 'password') {
         $input.attr('type', 'text');

diff --git a/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js b/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js
@@ -31,7 +31,7 @@ const addToCartHandler = async (event) => {
   const idProductInput = form.querySelector('[name=id_product]');
   const quantityInput = form.querySelector('[name=qty]');
   const idProductAttributeInput = form.querySelector('[name=id_product_attribute]');
-  const idCustomizationInout = form.querySelector('[name=id_product_attribute]');
+  const idCustomizationInout = form.querySelector('[name=id_customization]');
 
   const idProduct = Number.parseInt((idProductInput?.value || null), 10);
   const qty = Number.parseInt(quantityInput?.value, 10) || 0;

diff --git a/modules/contactform/views/templates/widget/contactform.tpl b/modules/contactform/views/templates/widget/contactform.tpl
@@ -46,16 +46,16 @@
       {if !$notifications || $notifications.nw_error}
         <section class="form-fields">
 
-          <div class="form-group">
+          <div class="mb-3">
             <label class="form-control-label">{l s='Subject' d='Shop.Forms.Labels'}</label>
-            <select name="id_contact" class="custom-select">
+            <select name="id_contact" class="form-select">
               {foreach from=$contact.contacts item=contact_elt}
                 <option value="{$contact_elt.id_contact}">{$contact_elt.name}</option>
               {/foreach}
             </select>
           </div>
 
-          <div class="form-group">
+          <div class="mb-3">
             <label class="form-control-label">{l s='Email address' d='Shop.Forms.Labels'}</label>
             <input
               class="form-control"
@@ -67,9 +67,9 @@
           </div>
 
           {if $contact.orders}
-            <div class="form-group">
+            <div class="mb-3">
               <label class="form-control-label">{l s='Order reference' d='Shop.Forms.Labels'}</label>
-              <select name="id_order" class="custom-select">
+              <select name="id_order" class="form-select">
                 <option value="">{l s='Select reference' d='Shop.Forms.Help'}</option>
                 {foreach from=$contact.orders item=order}
                   <option value="{$order.id_order}">{$order.reference}</option>
@@ -82,7 +82,7 @@
           {/if}
 
           {if $contact.allow_file_upload}
-            <div class="form-group">
+            <div class="mb-3">
               <label class="form-control-label">{l s='Attachment' d='Shop.Forms.Labels'}</label>
 
               <div class="custom-file">
@@ -95,7 +95,7 @@
             </div>
           {/if}
 
-          <div class="form-group">
+          <div class="mb-3">
             <label class="form-control-label">{l s='Message' d='Shop.Forms.Labels'}</label>
             <textarea
               class="form-control"
@@ -106,14 +106,14 @@
           </div>
 
           {if isset($id_module)}
-            <div class="form-group">
+            <div class="mb-3">
               {hook h='displayGDPRConsent' id_module=$id_module}
             </div>
           {/if}
 
         </section>
 
-        <footer class="form-footer text-right">
+        <footer class="form-footer text-end">
           <style>
             input[name=url] {
               display: none !important;
@@ -122,7 +122,7 @@
           <input type="text" name="url" value=""/>
           <input type="hidden" name="token" value="{$token}" />
           <input class="btn btn-primary d-none d-md-inline-block" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
-          <input class="btn btn-primary btn-block d-block d-md-none" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
+          <input class="btn btn-primary d-block text-center w-100 d-block d-md-none" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
         </footer>
       {/if}
     </div>

diff --git a/modules/productcomments/views/templates/hook/confirm-modal.tpl b/modules/productcomments/views/templates/hook/confirm-modal.tpl
@@ -57,10 +57,10 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary confirm-button btn-block" data-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
+        <button type="button" class="btn btn-primary confirm-button d-block text-center w-100" data-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
           {l s='Yes' d='Modules.Productcomments.Shop'}
         </button>
-        <button type="button" class="btn btn-text refuse-button btn-block" data-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
+        <button type="button" class="btn btn-text refuse-button d-block text-center w-100" data-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
           {l s='No' d='Modules.Productcomments.Shop'}
         </button>
       </div>

diff --git a/modules/productcomments/views/templates/hook/empty-product-comment.tpl b/modules/productcomments/views/templates/hook/empty-product-comment.tpl
@@ -27,7 +27,7 @@
   {if $post_allowed}
     <div class="text-center">
       <button class="btn btn-primary js-post-product-comment">
-        <i class="material-icons btn-icon mr-1">edit</i>
+        <i class="material-icons btn-icon me-1">edit</i>
         {l s='Be the first to write your review' d='Modules.Productcomments.Shop'}
       </button>
     </div>

diff --git a/modules/productcomments/views/templates/hook/post-comment-modal.tpl b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
@@ -32,7 +32,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title h5">{l s='Write your review' d='Modules.Productcomments.Shop'}</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
@@ -43,7 +43,7 @@
               {foreach from=$criterions item='criterion'}
                 <li>
                   <div class="criterion-rating d-flex">
-                    <label class="mb-0 mr-1">{$criterion.name|escape:'html':'UTF-8'}:</label>
+                    <label class="mb-0 me-1">{$criterion.name|escape:'html':'UTF-8'}:</label>
                     <div
                       class="grade-stars"
                       data-grade="3"
@@ -55,28 +55,28 @@
             </ul>
           {/if}
 
-          <div class="form-group">
+          <div class="mb-3">
             <label for="comment_title" class="form-label required">{l s='Title' d='Modules.Productcomments.Shop'}</label>
             <input class="form-control" id="comment_title" name="comment_title" type="text" value=""/>
           </div>
 
           {if !$logged}
-            <div class="form-group">
+            <div class="mb-3">
               <label class="form-label required" for="customer_name">{l s='Your name' d='Modules.Productcomments.Shop'}</label>
               <input class="form-control" id="customer_name" name="customer_name" type="text" value=""/>
             </div>
           {/if}
 
-          <div class="form-group">
+          <div class="mb-3">
             <label class="form-label required" for="comment_content">{l s='Review' d='Modules.Productcomments.Shop'}</label>
             <textarea class="form-control" rows="4" id="comment_content" name="comment_content"></textarea>
           </div>
         </div>
         <div class="modal-footer">
-          <button type="submit" class="btn btn-primary btn-block">
+          <button type="submit" class="btn btn-primary d-block text-center w-100">
             {l s='Send' d='Modules.Productcomments.Shop'}
           </button>
-          <button type="button" class="btn btn-text btn-block" data-dismiss="modal" aria-label="{l s='Cancel' d='Modules.Productcomments.Shop'}">
+          <button type="button" class="btn btn-text d-block text-center w-100" data-dismiss="modal" aria-label="{l s='Cancel' d='Modules.Productcomments.Shop'}">
             {l s='Cancel' d='Modules.Productcomments.Shop'}
           </button>
         </div>

diff --git a/modules/productcomments/views/templates/hook/product-additional-info.tpl b/modules/productcomments/views/templates/hook/product-additional-info.tpl
@@ -36,7 +36,7 @@
       {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade}
       <div class="additional-links">
         {if $post_allowed}
-          <a class="btn btn-text js-post-product-comment ml-2" href="#product-comments-list-header">
+          <a class="btn btn-text js-post-product-comment ms-2" href="#product-comments-list-header">
             <i class="material-icons btn-icon">edit</i>
             {l s='Write your review' d='Modules.Productcomments.Shop'}
           </a>

diff --git a/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl b/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl
@@ -25,33 +25,33 @@
 
 <div class="product-comment-list-item pb-4 mb-4 border-bottom" data-product-comment-id="@COMMENT_ID@" data-product-id="@PRODUCT_ID@">
   <div class="d-flex mb-2 align-items-center">
-    <div class="font-weight-bold">
+    <div class="fw-bold">
       @CUSTOMER_NAME@
     </div>
-    {* <div class="text-muted font-sm ml-2">
+    {* <div class="text-muted font-sm ms-2">
       @COMMENT_DATE@
     </div> *}
-    <div class="grade-stars flex-shrink-0 flex-grow-0 ml-auto"></div>
+    <div class="grade-stars flex-shrink-0 flex-grow-0 ms-auto"></div>
   </div>
 
   <div class="comment-content">
     <p class="h5 mb-3">@COMMENT_TITLE@</p>
     <p class="font-sm">@COMMENT_COMMENT@</p>
     <div class="d-flex">
       {if $usefulness_enabled}
-        <div class="mr-2">
+        <div class="me-2">
           <a href="#" role="button" class="btn btn-text btn-sm d-inline-flex align-items-center font-lg js-useful-review">
             <i class="material-icons text-reset font-reset thumb_up"></i>
-            <span class="js-useful-review-value font-sm ml-1">@COMMENT_USEFUL_ADVICES@</span>
+            <span class="js-useful-review-value font-sm ms-1">@COMMENT_USEFUL_ADVICES@</span>
           </a>
           <a href="#" role="button" class="btn btn-text btn-sm d-inline-flex align-items-center font-lg js-not-useful-review">
             <i class="material-icons text-reset font-reset thumb_down"></i>
-            <span class="js-not-useful-review-value font-sm ml-1">@COMMENT_NOT_USEFUL_ADVICES@</span>
+            <span class="js-not-useful-review-value font-sm ms-1">@COMMENT_NOT_USEFUL_ADVICES@</span>
           </a>
         </div>
       {/if}
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <a href="#" role="button" class="btn btn-text btn-sm d-inline-flex align-items-center font-lg js-report-abuse" title="{l s='Report abuse' d='Modules.Productcomments.Shop'}">
           <i class="material-icons text-reset font-reset outlined_flag"></i>
         </a>

diff --git a/modules/productcomments/views/templates/hook/product-comments-list.tpl b/modules/productcomments/views/templates/hook/product-comments-list.tpl
@@ -29,11 +29,11 @@
 
 <div class="mb-4">
   <div class="d-flex my-4" id="product-comments-list-header">
-    <div class="comments-nb h3 d-flex align-items-center mr-3 mb-0">
-      <i class="material-icons mr-2">chat</i>
+    <div class="comments-nb h3 d-flex align-items-center me-3 mb-0">
+      <i class="material-icons me-2">chat</i>
       {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
     </div>
-    <div class="ml-auto">
+    <div class="ms-auto">
       {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade}
     </div>
   </div>
@@ -51,11 +51,11 @@
   </div>
 
   <div class="flex-column flex-sm-row d-flex align-items-center" id="product-comments-list-footer">
-    <div id="product-comments-list-pagination" class="comments-pagination ml-sm-auto order-sm-1"></div>
+    <div id="product-comments-list-pagination" class="comments-pagination ms-sm-auto order-sm-1"></div>
     {if $post_allowed && $nb_comments != 0}
       <div class="my-sm-2 mt-3">
         <button class="btn btn-primary js-post-product-comment">
-          <i class="material-icons btn-icon mr-1">edit</i>
+          <i class="material-icons btn-icon me-1">edit</i>
           {l s='Write your review' d='Modules.Productcomments.Shop'}
         </button>
       </div>

diff --git a/modules/ps_brandlist/views/templates/_partials/brand_form.tpl b/modules/ps_brandlist/views/templates/_partials/brand_form.tpl
@@ -27,7 +27,7 @@
   <button
     class="btn-unstyle select-title"
     rel="nofollow"
-    data-toggle="dropdown"
+    data-bs-toggle="dropdown"
     aria-haspopup="true"
     aria-expanded="false">
     {l s='All brands' d='Shop.Theme.Catalog'}

diff --git a/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl b/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl
@@ -34,7 +34,12 @@
               <a href="{$node.link}" class="stretched-link text-reset list-group-item-action-dropdown-link">
                 {$node.name}
               </a>
-              <a href="#exCollapsingNavbar{$node.id}" class="icon-collapse list-group-item-collapse text-reset" data-toggle="collapse">
+              <a href="#catcol_{$node.id}"
+                 class="icon-collapse list-group-item-collapse text-reset"
+                 data-bs-toggle="collapse"
+                 role="button"
+                 data-bs-target="#catcol_{$node.id}"
+              >
                 <i class="material-icons d-block">&#xE313;</i>
               </a>
             </div>
@@ -44,7 +49,7 @@
             </a>
           {/if}
           {if $node.children}
-            <div class="collapse" id="exCollapsingNavbar{$node.id}">
+            <div class="collapse" id="catcol_{$node.id}">
               {categories nodes=$node.children depth=$depth+1}
             </div>
           {/if}

diff --git a/modules/ps_contactinfo/ps_contactinfo.tpl b/modules/ps_contactinfo/ps_contactinfo.tpl
@@ -27,7 +27,7 @@
 
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Store information' d='Shop.Theme.Global'}</span>
-    <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+    <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-bs-toggle="collapse">
       <i class="material-icons d-block"></i>
     </a>
   </div>

diff --git a/modules/ps_currencyselector/ps_currencyselector.tpl b/modules/ps_currencyselector/ps_currencyselector.tpl
@@ -24,7 +24,7 @@
  *}
 
 <div id="_desktop_currency_selector" class="col-auto flex-grow-0 flex-shrink-0">
-  <select class="js-select-link custom-select" aria-labelledby="currency-selector-label">
+  <select class="js-select-link form-select" aria-labelledby="currency-selector-label">
     {foreach from=$currencies item=currency}
       <option value="{$currency.url}"{if $currency.current} selected{/if}>{$currency.iso_code}{if $currency.sign !== $currency.iso_code} {$currency.sign}{/if}</option>
     {/foreach}

diff --git a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
@@ -27,7 +27,7 @@
 
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
-    <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
+    <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-bs-toggle="collapse">
       <i class="material-icons d-block"></i>
     </a>
   </div>

diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
@@ -24,7 +24,7 @@
 *}
 
 <div class="card overflow-hidden">
-  <div class="row no-gutters flex-nowrap align-items-center">
+  <div class="row g-0 flex-nowrap align-items-center">
     <div class="col-auto">
       <a href="{$mailAlert.link}">
         <img src="{$mailAlert.cover_url}" alt=""/>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		$enable-responsive-font-sizes: true;
		$enable-dark-mode: false;