Skip to content

Commit

Permalink
Merge pull request #300 from Oksydan/modal-to-offcanvas
Browse files Browse the repository at this point in the history
Modal aside to offcanvas migration
  • Loading branch information
Oksydan authored Oct 8, 2023
2 parents 7bdde05 + 18cf2cc commit 8b229ed
Show file tree
Hide file tree
Showing 11 changed files with 79 additions and 91 deletions.
57 changes: 0 additions & 57 deletions _dev/css/dynamic/modal/_override.scss
Original file line number Diff line number Diff line change
@@ -1,60 +1,3 @@
.modal-content {
background-clip: border-box;
}

.modal-fullscreen {
/* stylelint-disable */
padding: 0 !important; // override inline padding-right added from js
/* stylelint-enable */
.modal-dialog {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
}

.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}

.modal-body {
overflow-y: auto;
}
}

.modal .modal-dialog-aside {
width: 100%;
height: 100%;
margin: 0;
transition: transform 0.2s;
transform: translate(0);
@include media-breakpoint-up(sm) {
max-width: 320px;
}
}

.modal .modal-dialog-aside .modal-content {
height: inherit;
border: 0;
border-radius: 0;
}

.modal .modal-dialog-aside .modal-content .modal-body {
overflow-y: auto;
}

.modal.fixed-right .modal-dialog-aside {
margin-left: auto;
transform: translateX(100%);
}

.modal.fixed-left .modal-dialog-aside {
margin-right: auto;
transform: translateX(-100%);
}

.modal.show .modal-dialog-aside {
transform: translateX(0);
}
1 change: 1 addition & 0 deletions _dev/css/dynamic/offcanvas/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "override";
1 change: 1 addition & 0 deletions _dev/css/dynamic/offcanvas/_override.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Styles override for the offcanvas component
11 changes: 11 additions & 0 deletions _dev/js/theme/components/dynamic-bootstrap-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,17 @@ $(() => {
],
});

const importOffcanvas = new DynamicImportHandler({
jqueryPluginCover: 'offcanvas',
DOMEvents: 'click',
DOMEventsSelector: '[data-bs-toggle="offcanvas"]',
DOMEventsPreventDefault: true,
files: () => [
import('bootstrap/js/src/offcanvas'),
import('@css/dynamic/offcanvas/_index.scss'),
],
});

const importDropdown = new DynamicImportHandler({
jqueryPluginCover: 'dropdown',
DOMEvents: 'click',
Expand Down
3 changes: 2 additions & 1 deletion templates/_partials/header.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@
class="header-top__link"
rel="nofollow"
href="#"
data-bs-toggle="modal"
role="button"
data-bs-toggle="offcanvas"
data-bs-target="#mobile_top_menu_wrapper"
>
<div class="header-top__icon-container">
Expand Down
25 changes: 12 additions & 13 deletions templates/_partials/modal-filters.tpl
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
{extends file='components/modal.tpl'}
{extends file='components/offcanvas.tpl'}

{block name='modal_extra_attribues'}id="mobile_filters" data-modal-hide-mobile{/block}
{block name='modal_extra_class'}fixed-right{/block}
{block name='modal_dialog_extra_class'}modal-dialog-aside{/block}
{block name='modal_title'}{l s='Filters' d='Shop.Theme.Catalog'}{/block}
{block name='modal_body_extra_class'}p-0{/block}
{block name='modal_body'}
{block name='offcanvas_extra_attribues'}id="mobile_filters"{/block}
{block name='offcanvas_extra_class'}offcanvas-end{/block}
{block name='offcanvas_title'}{l s='Filters' d='Shop.Theme.Catalog'}{/block}
{block name='offcanvas_body'}
<div id="_mobile_filters"></div>
{/block}

{block name='modal_footer'}
<button type="button" class="btn d-block text-center w-100 btn-primary" data-dismiss="modal" aria-label="Close">
{l s='Show results' d='Shop.Istheme'}
<button
type="button"
class="btn d-block text-center w-100 btn-primary"
data-bs-dismiss="offcanvas"
aria-label="Close"
>
{l s='Show results' d='Shop.Istheme'}
</button>
{/block}



12 changes: 4 additions & 8 deletions templates/_partials/modal-menu.tpl
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
{extends file='components/modal.tpl'}
{extends file='components/offcanvas.tpl'}

{block name='modal_extra_attribues'}id="mobile_top_menu_wrapper" data-modal-hide-mobile{/block}
{block name='modal_extra_class'}fixed-left{/block}
{block name='modal_dialog_extra_class'}modal-dialog-aside{/block}
{block name='modal_title'}{l s='Menu' d='Shop.Theme.Catalog'}{/block}
{block name='modal_body'}
{block name='offcanvas_extra_attribues'}id="mobile_top_menu_wrapper"{/block}
{block name='offcanvas_title'}{l s='Menu' d='Shop.Theme.Catalog'}{/block}
{block name='offcanvas_body'}
<div class="js-top-menu mobile" id="_mobile_top_menu"></div>
<div class="js-top-menu-bottom">
<div id="_mobile_currency_selector" class="mb-2"></div>
<div id="_mobile_language_selector" class="mb-2"></div>
<div id="_mobile_contact_link" class="mb-2"></div>
</div>
</div>
{/block}

13 changes: 6 additions & 7 deletions templates/_partials/modal-search.tpl
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
{extends file='components/modal.tpl'}
{extends file='components/offcanvas.tpl'}

{block name='modal_extra_attribues'}id="saerchModal" data-modal-hide-mobile{/block}
{block name='modal_extra_class'}modal-fullscreen search-modal{/block}
{block name='modal_header'}{/block}
{block name='modal_body'}
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
{block name='offcanvas_extra_attribues'}id="search_dialog"{/block}
{block name='offcanvas_extra_class'}search-modal offcanvas-start{/block}
{block name='offcanvas_header'}{/block}
{block name='offcanvas_body'}
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
</button>
<div id="_mobile_search_from">
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/catalog/_partials/products-top.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@

<div class="col-sm-auto col-12 mt-2 d-md-none ms-auto">
{if !empty($listing.rendered_facets)}
<button data-bs-target="#mobile_filters" data-bs-toggle="modal" class="btn btn-secondary d-sm-inline-block d-none">
<button data-bs-target="#mobile_filters" data-bs-toggle="offcanvas" class="btn btn-secondary d-sm-inline-block d-none">
{l s='Filter' d='Shop.Theme.Actions'}
</button>
<button data-bs-target="#mobile_filters" data-bs-toggle="modal" class="btn btn-secondary d-block text-center w-100 d-sm-none">
<button data-bs-target="#mobile_filters" data-bs-toggle="offcanvas" class="btn btn-secondary d-block text-center w-100 d-sm-none">
{l s='Filter' d='Shop.Theme.Actions'}
</button>
{/if}
Expand Down
15 changes: 12 additions & 3 deletions templates/components/modal.tpl
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@

{block name='modal'}

<div class="modal fade {block name='modal_extra_class'}{/block}" {block name='modal_extra_attribues'}{/block} tabindex="-1" aria-hidden="true">
<div
class="modal fade {block name='modal_extra_class'}{/block}"
{block name='modal_extra_attribues'}{/block}
tabindex="-1"
aria-hidden="true"
>

<div class="modal-dialog {block name='modal_dialog_extra_class'}{/block}">
{block name='modal_content'}
Expand All @@ -13,8 +18,12 @@
<h5 class="modal-title">{$smarty.block.child}</h5>
{/block}
{block name='modal_close'}
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
>
</button>
{/block}
</div>
Expand Down
28 changes: 28 additions & 0 deletions templates/components/offcanvas.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

{block name='offcanvas'}
<div
class="offcanvas {block name='offcanvas_extra_class'}offcanvas-start{/block}"
tabindex="-1"
{block name='offcanvas_extra_attribues'}{/block}
>
{block name='offcanvas_header'}
<div class="offcanvas-header {block name='offcanvas_header_extra_class'}{/block}" >
{block name='offcanvas_title' hide}
<h5 class="offcanvas-title">{$smarty.block.child}</h5>
{/block}
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
>
</button>
</div>
{/block}
{block name='offcanvas_body' hide}
<div class="offcanvas-body {block name='offcanvas_body_extra_class'}{/block}">
{$smarty.block.child}
</div>
{/block}
</div>
{/block}

0 comments on commit 8b229ed

Please sign in to comment.