jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update style and images for modal.

Browse source
This commit is contained in:
Bryan Mauger 2022-10-31 14:40:51 -04:00
parent 57e39be1b6
commit 6512de6b7a
1 changed files with 104 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/common-components/modal/modal.vue
View file

@ -1,19 +1,31 @@
<template> <template>
<!-- Modal --> <!-- Modal -->
<div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true"> <div
class="modal fade modal-component"
:id="this.cmsWidgetName"
tabindex="-1"
aria-labelledby="ModalComponentLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div> </div>
<div class="modal-body ps-4 pe-4 pt-5 pb-4"> <div class="modal-body ps-4 pe-4 pt-5 pb-4">
<img :src="this.ModalImage" class="w-100 mb-4" alt="" /> <img :src="this.ModalImage" alt="" />
<h5 class="mb-4" v-html="this.ModalHeadline"></h5> <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p> <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
<p class="mb-0" v-html="this.ModalBodyText"></p> <p class="mb-0" v-html="this.ModalBodyText"></p>
</div> </div>
<div class="modal-footer px-5 py-4"> <div class="modal-footer px-5 py-4">
<button class="btn btn-primary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button> <button
class="btn btn-primary w-100"
data-bs-dismiss="modal"
v-html="this.ModalCloseButtonText"></button>
</div> </div>
</div> </div>
</div> </div>
@ -22,28 +34,28 @@
<script> <script>
export default { export default {
name: 'modal', name: "modal",
props: { props: {
cmsWidgetName: String, cmsWidgetName: String,
}, },
computed: { computed: {
ModalHeadline(){ ModalHeadline() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText"); return this.getCmsContent(this.cmsWidgetName, "HeaderText");
}, },
ModalSubheadertext(){ ModalSubheadertext() {
return this.getCmsContent(this.cmsWidgetName, "SubheaderText"); return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
}, },
ModalBodyText(){ ModalBodyText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText"); return this.getCmsContent(this.cmsWidgetName, "BodyText");
}, },
ModalImage(){ ModalImage() {
return this.getCmsContent(this.cmsWidgetName, "Image"); return this.getCmsContent(this.cmsWidgetName, "Image");
}, },
ModalCloseButtonText(){ ModalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText"); return this.getCmsContent(this.cmsWidgetName, "FooterText");
}
}, },
} },
};
</script> </script>
<style lang="scss"> <style lang="scss">
@ -79,6 +91,10 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
} }
img {
display: flex;
margin: 0 auto 1.5rem auto;
}
} }
} }
&.modal-dialog-centered { &.modal-dialog-centered {
@ -101,7 +117,7 @@ body {
.modal-backdrop { .modal-backdrop {
height: 100%; height: 100%;
&.show { &.show {
opacity: .4; opacity: 0.4;
} }
} }
} }