MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-07 12:53:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Avoid scrollable page behind the modal dialog

Browse Source
This commit is contained in:
Alain Nussbaumer
2024-09-09 21:03:59 +02:00
parent c377ae3a64
commit 8f627f1df0
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web-src/src/components/ModalDialog.vue
View File

@@ -8,7 +8,7 @@
<p v-if="title" class="title is-4" v-text="title" /> <p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" /> <slot name="modal-content" />
</div> </div>
<footer class="card-footer is-clipped"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')"> <a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" /> <mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action" /> <span class="is-size-7" v-text="close_action" />
@@ -51,8 +51,16 @@ export default {
show: Boolean, show: Boolean,
title: { required: true, type: String } title: { required: true, type: String }
}, },
emits: ['delete', 'close', 'ok'] emits: ['delete', 'close', 'ok'],
watch: {
show() {
const { classList } = document.querySelector('html')
if (this.show) {
classList.add('is-clipped')
} else {
classList.remove('is-clipped')
}
}
}
} }
</script> </script>
<style></style>