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

Set modal button position to be absolute while relative to parent rather than the page. This prevents the button from scrolling down with the page since the header was unstuck. Also correct white space issues on welcome page.

Browse source
This commit is contained in:
Jason Wheeler 2023-06-19 15:19:41 -04:00
parent 43e3c80f7f
commit ac976b54fb
3 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<div class="menu-modal-container"> <div class="menu-modal-container">
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)"> <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" aria-label="Hamburger Menu (modal window)" @click="toggle()">
<div class="bar1"></div> <div class="bar1"></div>
<div class="bar2"></div> <div class="bar2"></div>
<div class="bar3"></div> <div class="bar3"></div>
</button> </button>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }"> <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen"> <div class="modal-dialog modal-fullscreen">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header visually-hidden"> <div class="modal-header visually-hidden">
@ -53,6 +53,8 @@
<script> <script>
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import { Modal } from "bootstrap";
export default { export default {
name: 'menuModal', name: 'menuModal',
data() { data() {
@ -62,17 +64,25 @@ export default {
}; };
}, },
methods: { methods: {
show() { toggle() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56; if(this.isActive){
this.isActive = true; //hide modal
document.querySelector('.fade-on-route-transition').scrollTo({ this.isActive = false;
top: 0, behavior: 'instant' const modal = Modal.getInstance(document.getElementById("footerModal"));
}); modal?.hide();
}, }
hide() { else
var self = this; {
self.isActive = false; //show modal
}, this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
this.isActive = true;
const modal = Modal.getOrCreateInstance(document.getElementById("footerModal"));
modal?.show();
document.querySelector('.fade-on-route-transition').scrollTo({
top: 0, behavior: 'instant'
});
}
}
}, },
components: { components: {
textLink, textLink,
@ -127,6 +137,7 @@ export default {
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
z-index: 2;
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
.ccpa-icon { .ccpa-icon {

1
src/iss-components/site-header/site-header.vue
View file

@ -96,6 +96,7 @@ export default({
<style lang="scss" scoped> <style lang="scss" scoped>
.site-header { .site-header {
height: 56px; height: 56px;
position: relative;
} }
.alert { .alert {
left: 0; left: 0;

2
src/layouts/welcome-page/welcome-page.vue
View file

@ -2,7 +2,7 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles welcome"> <div class="page-container-grouped-styles welcome">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" class="mt-5"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
<div class="container-fluid px-5"> <div class="container-fluid px-5">
<div class="row mt-5"> <div class="row mt-5">