Migration to new bs5 utils classes

modules/contactform/views/templates/widget/contactform.tpl

@@ -113,7 +113,7 @@
 
         </section>
 
-        <footer class="form-footer text-right">
+        <footer class="form-footer text-end">
           <style>
             input[name=url] {
               display: none !important;

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>

modules/productcomments/views/templates/hook/post-comment-modal.tpl

@@ -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"

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>

modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl

@@ -28,30 +28,30 @@
     <div class="font-weight-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>

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>

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=""/>

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl

@@ -29,7 +29,7 @@
       <p id="block-newsletter-label" class="col-12">{l s='Get our latest news and special sales' d='Shop.Theme.Global'}</p>
       <div class="col-12 mb-1">
         <input
-          class="btn btn-primary float-right"
+          class="btn btn-primary float-end"
           name="submitNewsletter"
           type="submit"
           value="{l s='OK' d='Shop.Theme.Actions'}"

modules/ps_facetedsearch/views/templates/front/catalog/active-filters.tpl

@@ -36,7 +36,7 @@
             {block name='active_filters_item'}
               <li class="col flex-grow-0 flex-shrink-0 p-1">
                 <a class="text-nowrap btn btn-outline-secondary btn-sm js-search-link d-flex align-items-center" href="{$filter.nextEncodedFacetsURL}" rel="nofollow">
-                  {l s='%1$s:' d='Shop.Theme.Catalog' sprintf=[$filter.facetLabel]} {$filter.label} <i class="material-icons font-reset ml-1 align-middle">&#xE14C;</i>
+                  {l s='%1$s:' d='Shop.Theme.Catalog' sprintf=[$filter.facetLabel]} {$filter.label} <i class="material-icons font-reset ms-1 align-middle">&#xE14C;</i>
                 </a>
               </li>
             {/block}

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

@@ -37,7 +37,7 @@
             <div class="clear-all-wrapper card-body">
               <button data-search-url="{$clear_all_link}"
                 class="btn btn-sm btn-block btn-outline-secondary btn-sm js-search-filters-clear-all">
-                <i class="material-icons font-reset mr-1 align-middle">&#xE14C;</i>
+                <i class="material-icons font-reset me-1 align-middle">&#xE14C;</i>
                 {l s='Clear all' d='Shop.Theme.Actions'}
               </button>
             </div>
@@ -143,7 +143,7 @@
                               data-action="range-from"
                               >
                           </div>
-                          <div class="px-2 ml-auto search-filters__input-group">
+                          <div class="px-2 ms-auto search-filters__input-group">
                             <input
                               class="js-input-range-slider form-control form-control-sm text-center search-filters__input"
                               type="text"

modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl

@@ -27,7 +27,7 @@
   <h3 class="hidden-sm-down">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
   <div class="title clearfix hidden-md-up" data-target="#footer_eu_about_us_list" data-toggle="collapse">
     <span class="h3">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>
-    <span class="float-right">
+    <span class="float-end">
       <span class="navbar-toggler collapse-icons">
         <i class="add">add</i>
         <i class="remove">remove</i>

templates/_partials/form-fields.tpl

@@ -48,7 +48,7 @@
   <div class="form-group js-input-column">
     {if $field.type == 'checkbox' || $field.type == 'radio-buttons'}
       {if $field.type == 'radio-buttons'}
-        <div class="form-label label mr-3">{$field.label}</div>
+        <div class="form-label label me-3">{$field.label}</div>
       {/if}
     {else}
       <label class="form-label {if $field.required}required{/if}" for="f-{$field.name}_{$uniqId}">

templates/_partials/password-policy-template.tpl

@@ -17,11 +17,11 @@
     <div class="js-password-strength-text password-strength-text"></div>
     <div class="password-requirements">
       <p class="js-password-requirements-length password-requirements-length font-sm d-flex align-items-center my-2" data-translation="{l s='Enter a password between %s and %s characters' d='Shop.Theme.Customeraccount'}">
-        <i class="material-icons mr-1 font-size-lg">check_circle</i>
+        <i class="material-icons me-1 font-size-lg">check_circle</i>
         <span></span>
       </p>
       <p class="js-password-requirements-score password-requirements-score font-sm d-flex align-items-center my-2" data-translation="{l s='The minimum score must be: %s' d='Shop.Theme.Customeraccount'}">
-        <i class="material-icons mr-1 font-size-lg">check_circle</i>
+        <i class="material-icons me-1 font-size-lg">check_circle</i>
         <span></span>
       </p>
     </div>

templates/catalog/_partials/miniatures/_partials/product-prices.tpl

@@ -1,9 +1,9 @@
 {block name='product_price_and_shipping'}
   {if $product.show_price}
-    <div class="product-miniature__pricing text-right">
+    <div class="product-miniature__pricing text-end">
       {if $product.has_discount}
         {hook h='displayProductPriceBlock' product=$product type="old_price"}
-        <span class="price price--regular mr-1" aria-label="{l s='Regular price' d='Shop.Theme.Catalog'}">{$product.regular_price}</span>
+        <span class="price price--regular me-1" aria-label="{l s='Regular price' d='Shop.Theme.Catalog'}">{$product.regular_price}</span>
       {/if}
 
       {hook h='displayProductPriceBlock' product=$product type="before_price"}

templates/catalog/_partials/miniatures/pack-product.tpl

@@ -24,7 +24,7 @@
  *}
 {block name='pack_miniature_item'}
   <div class="card overflow-hidden">
-    <div class="row no-gutters flex-nowrap">
+    <div class="row g-0 flex-nowrap">
       <div class="col-4 col-md-3 col-xl-2">
         <a href="{$product.url}" title="{$product.name}">
           {images_block webpEnabled=$webpEnabled}

templates/catalog/_partials/product-add-to-cart.tpl

@@ -28,7 +28,7 @@
     {block name='product_quantity'}
       <div class="product-quantity row mb-1 mx-n1 mt-n2 align-items-center">
         <div class="qty col-12 col-sm-auto mx-auto mt-2 px-1">
-          <div class="js-product-qty-spinner row no-gutters">
+          <div class="js-product-qty-spinner row g-0">
             <div class="col-auto">
               <a href="#" class="js-custom-qty-btn-down">
                 -

templates/catalog/_partials/product-customization.tpl

@@ -40,7 +40,7 @@
                   <label class="customization-label">{$field.label}</label>
                   {if $field.type == 'text'}
                     <textarea placeholder="{l s='Your message here' d='Shop.Forms.Help'}" class="product-message" maxlength="250" {if $field.required} required {/if} name="{$field.input_name}"></textarea>
-                    <small class="float-right">{l s='250 char. max' d='Shop.Forms.Help'}</small>
+                    <small class="float-end">{l s='250 char. max' d='Shop.Forms.Help'}</small>
                     {if $field.text !== ''}
                         <h6 class="customization-message">{l s='Your customization:' d='Shop.Theme.Catalog'}
                             <label>{$field.text}</label>
@@ -58,13 +58,13 @@
                       <button class="btn btn-primary">{l s='Choose file' d='Shop.Theme.Actions'}</button>
                     </span>
                     {assign var=authExtensions value=' .'|implode:constant('ImageManager::EXTENSIONS_SUPPORTED')}
-                    <small class="float-xs-right">.{$authExtensions}</small>
+                    <small class="float-end">.{$authExtensions}</small>
                   {/if}
                 </li>
               {/foreach}
             </ul>
             <div class="clearfix">
-              <button class="btn btn-primary float-right" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
+              <button class="btn btn-primary float-end" type="submit" name="submitCustomizedData">{l s='Save Customization' d='Shop.Theme.Actions'}</button>
             </div>
           </form>
         {/block}

templates/catalog/_partials/product-details.tpl

@@ -56,9 +56,9 @@
     {if $product.grouped_features}
       <section class="product-features my-3">
         <p class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</p>
-        <dl class="row no-gutters mb-0">
+        <dl class="row g-0 mb-0">
           {foreach from=$product.grouped_features item=feature}
-            <dt class="col-4 pr-3 {if !$feature@last}pb-2 mb-2 border-bottom{/if}">{$feature.name}</dt>
+            <dt class="col-4 pe-3 {if !$feature@last}pb-2 mb-2 border-bottom{/if}">{$feature.name}</dt>
             <dd class="col-8 {if !$feature@last}pb-2 mb-2 border-bottom{/if}">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
           {/foreach}
         </dl>
@@ -73,7 +73,7 @@
         <p class="h6">{l s='Specific References' d='Shop.Theme.Catalog'}</p>
           <dl class="row">
             {foreach from=$product.specific_references item=reference key=key}
-              <dt class="col-4 pr-3 {if !$reference@last}pb-2 mb-2 border-bottom{/if}">{$key}</dt>
+              <dt class="col-4 pe-3 {if !$reference@last}pb-2 mb-2 border-bottom{/if}">{$key}</dt>
               <dd class="col-8 {if !$reference@last}pb-2 mb-2 border-bottom{/if}">{$reference}</dd>
             {/foreach}
           </dl>

templates/catalog/_partials/product-prices.tpl

@@ -48,7 +48,7 @@
           </span>
           {block name='product_discount'}
             {if $product.has_discount}
-              <span class="ml-2 price price--regular">{$product.regular_price}</span>
+              <span class="ms-2 price price--regular">{$product.regular_price}</span>
             {/if}
           {/block}
           {hook h='displayProductPriceBlock' product=$product type="old_price"}

templates/catalog/_partials/products-top.tpl

@@ -35,7 +35,7 @@
     {/block}
   </div>
 
-  <div class="col-sm-auto col-12 mt-2 d-md-none ml-auto">
+  <div class="col-sm-auto col-12 mt-2 d-md-none ms-auto">
     {if !empty($listing.rendered_facets)}
       <button data-target="#mobile_filters" data-toggle="modal" class="btn btn-secondary d-sm-inline-block d-none">
         {l s='Filter' d='Shop.Theme.Actions'}
@@ -46,7 +46,7 @@
     {/if}
   </div>
 
-  <div class="col-auto d-none d-lg-block ml-auto mt-2">
+  <div class="col-auto d-none d-lg-block ms-auto mt-2">
     <ul class="display-toggle d-flex align-items-center mx-n1 m-0">
       <li class="display-toggle__elem px-1">
         <a href="#" data-toggle-listing data-display-type="grid" class="display-toggle__link d-inline-block {if $listingDisplayType == 'grid'}active{/if}">

templates/catalog/_partials/products.tpl

@@ -30,7 +30,7 @@
     {include file='_partials/pagination.tpl' pagination=$listing.pagination}
   {/block}
 
-  <div class="hidden-md-up text-xs-right up">
+  <div class="hidden-md-up text-end up">
     <a href="#header" class="btn btn-secondary">
       {l s='Back to top' d='Shop.Theme.Actions'}
     </a>

templates/checkout/_partials/address-form.tpl

@@ -31,14 +31,14 @@
 {block name='form_buttons'}
   {if !$form_has_continue_button}
     <div class="d-flex align-items-center justify-content-end">
-      <a class="js-cancel-address cancel-address btn btn-link mr-auto" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+      <a class="js-cancel-address cancel-address btn btn-link me-auto" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
       <button type="submit" class="btn btn-primary">{l s='Save' d='Shop.Theme.Actions'}</button>
     </div>
 
   {else}
     <div class="d-flex align-items-center justify-content-end">
       {if $customer.addresses|count > 0}
-        <a class="js-cancel-address cancel-address btn btn-link mr-auto" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
+        <a class="js-cancel-address cancel-address btn btn-link me-auto" href="{url entity='order' params=['cancelAddress' => {$type}]}">{l s='Cancel' d='Shop.Theme.Actions'}</a>
       {/if}
       <button type="submit" class="continue btn btn-primary" name="confirm-addresses" value="1">
           {l s='Continue' d='Shop.Theme.Actions'}

templates/checkout/_partials/address-selector-block.tpl

@@ -41,11 +41,11 @@
 
             <a class="edit-address js-edit-address d-flex justify-content-center align-items-center" data-link-action="edit-address"
               href="{url entity='order' params=['id_address' => $address.id, 'editAddress' => $type, 'token' => $token]}">
-              <i class="material-icons mr-1">&#xE254;</i>{l s='Edit' d='Shop.Theme.Actions'}
+              <i class="material-icons me-1">&#xE254;</i>{l s='Edit' d='Shop.Theme.Actions'}
             </a>
             <a class="delete-address js-delete-address d-flex justify-content-center align-items-center" data-link-action="delete-address"
               href="{url entity='order' params=['id_address' => $address.id, 'deleteAddress' => true, 'token' => $token]}">
-              <i class="material-icons mr-1">&#xE872;</i>{l s='Delete' d='Shop.Theme.Actions'}
+              <i class="material-icons me-1">&#xE872;</i>{l s='Delete' d='Shop.Theme.Actions'}
             </a>
           </div>
 

templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -55,7 +55,7 @@
       <div class="product-line-info product-price{if $product.has_discount} has-discount{/if}">
         <div class="current-price">
           {if $product.has_discount}
-            <span class="price price--regular mr-1">{$product.regular_price}</span>
+            <span class="price price--regular me-1">{$product.regular_price}</span>
           {/if}
           <span
             class="current-price-display price{if $product.has_discount} current-price-discount{/if}">{$product.price}</span>
@@ -117,7 +117,7 @@
       {if !empty($product.is_gift)}
         <span class="gift-quantity">{$product.quantity}</span>
       {else}
-          <div class="js-custom-cart-qty-spinner row no-gutters">
+          <div class="js-custom-cart-qty-spinner row g-0">
               <div class="col-auto">
                   <a href="#" class="js-custom-qty-btn-down">
                       -

templates/checkout/_partials/cart-voucher.tpl

@@ -39,7 +39,7 @@
                             href="{$voucher.delete_url}"
                             data-link-action="remove-voucher"
                             data-id-discount="{$voucher.id_cart_rule}"
-                            class="text-danger ml-1 js-voucher-delete">
+                            class="text-danger ms-1 js-voucher-delete">
                           <span class="material-icons font-reset btn-icon">delete</span>
                         </a>
                       {/if}

templates/checkout/_partials/customer-form.tpl

@@ -45,7 +45,7 @@
 {/block}
 
 {block "form_buttons"}
-  <div class="text-right">
+  <div class="text-end">
     <button
       class="continue btn btn-primary d-none d-md-inline-block"
       name="continue"

templates/checkout/_partials/header.tpl

@@ -43,7 +43,7 @@
             {/images_block}
           </a>
         </div>
-        <div class="col d-none d-md-block text-right">
+        <div class="col d-none d-md-block text-end">
           {hook h='displayNav1'}
         </div>
       </div>

templates/checkout/_partials/login-form.tpl

@@ -25,7 +25,7 @@
 {extends file='customer/_partials/login-form.tpl'}
 
 {block name='form_buttons'}
-  <div class="text-right">
+  <div class="text-end">
     <button
       class="continue btn btn-primary d-none d-md-inline-block"
       name="continue"

templates/checkout/_partials/steps/addresses.tpl

@@ -123,7 +123,7 @@
       {/if}
 
       {if !$form_has_continue_button}
-        <div class="text-right">
+        <div class="text-end">
           <button type="submit" class="btn btn-primary continue d-none d-md-inline-block" name="confirm-addresses" value="1">
             {l s='Continue' d='Shop.Theme.Actions'}
           </button>

templates/checkout/_partials/steps/checkout-step.tpl

@@ -51,10 +51,10 @@
         {if $step_is_reachable}
           <a
             href="#"
-            class="ml-auto checkout-step__edit-btn step-edit js-step-edit text-muted btn btn-sm btn-link py-0 stretched-link"
+            class="ms-auto checkout-step__edit-btn step-edit js-step-edit text-muted btn btn-sm btn-link py-0 stretched-link"
             data-target="#content-{$identifier}">
             <span class="d-inline-flex align-items-center">
-              <span class="material-icons font-sm mr-1 btn-icon">mode_edit</span>
+              <span class="material-icons font-sm me-1 btn-icon">mode_edit</span>
               {l s='Edit' d='Shop.Theme.Actions'}
             </span>
           </a>