Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bs5 styles migration #298

Merged
merged 17 commits into from
Oct 8, 2023
Merged

Bs5 styles migration #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
162c69f
Initial changes for bs5 migration
Oksydan Oct 5, 2023
3c5af93
Migration to new bs5 utils classes
Oksydan Oct 5, 2023
de19801
removed bs5 styles classes adjustment
Oksydan Oct 5, 2023
1e35682
bs toogle data attribute modification, screen readers fixes
Oksydan Oct 5, 2023
a775b69
changed primary color, disabled link decoration
Oksydan Oct 5, 2023
74ce0ff
bs5 display utils migration
Oksydan Oct 6, 2023
1182d5c
removed not used template
Oksydan Oct 6, 2023
eaa89c9
bs5 data attributes fixes
Oksydan Oct 6, 2023
f5fc936
Form initial changes
Oksydan Oct 6, 2023
8c9a35b
Form multiple changes
Oksydan Oct 6, 2023
0ff1b42
add to cart fix for product page
Oksydan Oct 6, 2023
e062605
Form qty spinner
Oksydan Oct 6, 2023
a76abd9
Temporary BS5 dynamic import fix
Oksydan Oct 8, 2023
d324c32
Collapse fix
Oksydan Oct 8, 2023
236cb84
Custom checkboxes
Oksydan Oct 8, 2023
f070ea2
Checkout header fix
Oksydan Oct 8, 2023
a8dcc56
stylelint fix
Oksydan Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions _dev/css/abstracts/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
2 changes: 1 addition & 1 deletion _dev/css/abstracts/variables/bootstrap/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;

$primary: $blue;
$primary: $gray-900;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
Expand Down
1 change: 1 addition & 0 deletions _dev/css/abstracts/variables/bootstrap/_options.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
$enable-responsive-font-sizes: true;
$enable-dark-mode: false;
2 changes: 2 additions & 0 deletions _dev/css/abstracts/variables/bootstrap/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
6 changes: 3 additions & 3 deletions _dev/js/theme/components/dynamic-bootstrap-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand All @@ -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'),
Expand All @@ -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'),
Expand Down
14 changes: 2 additions & 12 deletions _dev/js/theme/components/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion _dev/js/theme/core/cart/handler/cart/addToCartHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 10 additions & 10 deletions modules/contactform/views/templates/widget/contactform.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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"
Expand All @@ -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;
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions modules/productcomments/views/templates/hook/confirm-modal.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion modules/productcomments/views/templates/hook/empty-product-comment.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions modules/productcomments/views/templates/hook/post-comment-modal.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion modules/productcomments/views/templates/hook/product-additional-info.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions modules/productcomments/views/templates/hook/product-comments-list.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_brandlist/views/templates/_partials/brand_form.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand Down
9 changes: 7 additions & 2 deletions modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_contactinfo/ps_contactinfo.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_currencyselector/ps_currencyselector.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""/>
Expand Down
Loading