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
</button>
<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>
</header>
<div class="offcanvas-body py-0">

View file

@ -81,7 +81,7 @@
<vc:icon symbol="nav-mobile-menu"/>
</button>
<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>
<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)

View file

@ -151,7 +151,7 @@
class="bg-tile pb-2 rounded" />
</div>
<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>
<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>

View file

@ -270,7 +270,7 @@
class="bg-tile pb-2 rounded" />
</div>
<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>
<button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas">
<vc:icon symbol="close" />

View file

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

View file

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