UI: Offcanvas fixes

This commit is contained in:
Dennis Reimann 2024-08-20 18:11:13 +02:00
parent bd91c45d1f
commit 672491c66c
No known key found for this signature in database
GPG key ID: 5009E1797F03F8D0
6 changed files with 10 additions and 8 deletions

View file

@ -142,7 +142,7 @@
Empty Empty
</button> </button>
<button id="CartClose" type="button" class="cart-toggle-btn" v-on:click="toggleCart" aria-controls="cart" aria-label="Close"> <button id="CartClose" type="button" class="cart-toggle-btn" v-on:click="toggleCart" aria-controls="cart" aria-label="Close">
<vc:icon symbol="close" /> <vc:icon symbol="cross" />
</button> </button>
</header> </header>
<div class="offcanvas-body py-0"> <div class="offcanvas-body py-0">

View file

@ -81,7 +81,7 @@
<vc:icon symbol="nav-mobile-menu"/> <vc:icon symbol="nav-mobile-menu"/>
</button> </button>
<div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="ItemsListOffcanvas" aria-labelledby="ItemsListToggle" v-if="showItems"> <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" id="ItemsListOffcanvas" aria-labelledby="ItemsListToggle" v-if="showItems">
<div class="offcanvas-header flex-wrap p-3"> <div class="offcanvas-header justify-content-between flex-wrap p-3">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Products</h5> <h5 class="offcanvas-title" id="offcanvasExampleLabel">Products</h5>
<button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': cart.length > 0, 'btn-outline-secondary': cart.length === 0}" data-bs-dismiss="offcanvas" v-text="cart.length > 0 ? 'Apply' : 'Close'"></button> <button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': cart.length > 0, 'btn-outline-secondary': cart.length === 0}" data-bs-dismiss="offcanvas" v-text="cart.length > 0 ? 'Apply' : 'Close'"></button>
@if (Model.ShowSearch) @if (Model.ShowSearch)

View file

@ -151,7 +151,7 @@
class="bg-tile pb-2 rounded" /> class="bg-tile pb-2 rounded" />
</div> </div>
<div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas"> <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
<div class="offcanvas-header p-3"> <div class="offcanvas-header justify-content-between p-3">
<h5 class="offcanvas-title">Edit Item</h5> <h5 class="offcanvas-title">Edit Item</h5>
<button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': itemChanged, 'btn-outline-secondary': !itemChanged }" v-on:click="hideOffcanvas" v-text="itemChanged ? 'Apply' : 'Close'"></button> <button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': itemChanged, 'btn-outline-secondary': !itemChanged }" v-on:click="hideOffcanvas" v-text="itemChanged ? 'Apply' : 'Close'"></button>
</div> </div>

View file

@ -270,7 +270,7 @@
class="bg-tile pb-2 rounded" /> class="bg-tile pb-2 rounded" />
</div> </div>
<div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas"> <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
<div class="offcanvas-header p-3"> <div class="offcanvas-header justify-content-between p-3">
<h5 class="offcanvas-title">Edit Field</h5> <h5 class="offcanvas-title">Edit Field</h5>
<button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas"> <button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas">
<vc:icon symbol="close" /> <vc:icon symbol="close" />

View file

@ -222,10 +222,11 @@ document.addEventListener('DOMContentLoaded', () => {
return fields return fields
}, },
showOffcanvas() { showOffcanvas() {
if (window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden') if (this.editorOffcanvas && window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
this.editorOffcanvas.show(); this.editorOffcanvas.show();
}, },
hideOffcanvas() { hideOffcanvas() {
if (this.editorOffcanvas)
this.editorOffcanvas.hide(); this.editorOffcanvas.hide();
} }
}, },

View file

@ -298,10 +298,11 @@ document.addEventListener('DOMContentLoaded', () => {
this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]) this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0])
}, },
showOffcanvas() { showOffcanvas() {
if (window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden') if (this.editorOffcanvas && window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
this.editorOffcanvas.show(); this.editorOffcanvas.show();
}, },
hideOffcanvas() { hideOffcanvas() {
if (this.editorOffcanvas)
this.editorOffcanvas.hide(); this.editorOffcanvas.hide();
} }
}, },