Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Fixed: Fix modal layout with bootstrap upgrade

Browse Source
This commit is contained in:
Julien Fastré 2022-12-07 12:00:14 +01:00
parent a10aae2100
commit 34c97769a6
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
View File

@ -2,25 +2,27 @@
<transition name="modal"> <transition name="modal">
<div class="modal-mask"> <div class="modal-mask">
<!-- :: styles bootstrap :: --> <!-- :: styles bootstrap :: -->
<div class="modal-dialog" :class="modalDialogClass"> <div class="modal fade show" style="display: block" aria-modal="true" role="dialog">
<div class="modal-dialog" :class="modalDialogClass">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<slot name="header"></slot> <slot name="header"></slot>
<button class="close btn" @click="$emit('close')"> <button class="close btn" @click="$emit('close')">
<i class="fa fa-times" aria-hidden="true"></i></button> <i class="fa fa-times" aria-hidden="true"></i></button>
</div> </div>
<div class="body-head"> <div class="modal-body">
<div class="body-head">
<slot name="body-head"></slot> <slot name="body-head"></slot>
</div> </div>
<div class="modal-body"> <slot name="body"></slot>
<slot name="body"></slot> </div>
</div> <div class="modal-footer" v-if="!hideFooter">
<div class="modal-footer" v-if="!hideFooter"> <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
<button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button> <slot name="footer"></slot>
<slot name="footer"></slot> </div>
</div>
</div> </div>
</div> </div>
</div>
<!-- :: end styles bootstrap :: --> <!-- :: end styles bootstrap :: -->
</div> </div>
</transition> </transition>
@ -33,7 +35,7 @@ import {defineComponent} from "vue";
* [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden * [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
* [+] with slot we can pass content from parent component * [+] with slot we can pass content from parent component
* [+] some classes are passed from parent component * [+] some classes are passed from parent component
* and Bootstrap 4.6 _modal.scss module * and Bootstrap 5 _modal.scss module
* [+] using bootstrap css classes, the modal have a responsive behaviour, * [+] using bootstrap css classes, the modal have a responsive behaviour,
* [+] modal design can be configured using css classes (size, scroll) * [+] modal design can be configured using css classes (size, scroll)
*/ */
@ -56,6 +58,9 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
/**
* This is a mask behind the modal.
*/
.modal-mask { .modal-mask {
position: fixed; position: fixed;
z-index: 9998; z-index: 9998;