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

Changed modal so that menu button is keyboard focusable

Browse source
This commit is contained in:
Kroell 2022-11-15 12:23:20 -05:00
parent 18abd042b5
commit f7ef1d44e4
1 changed files with 58 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/common-components/site-header/menu-modal/menu-modal.vue
View file

@ -8,10 +8,23 @@
</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 }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`"> <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 }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
<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)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<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">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5> <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div> </div>
<div class="modal-body d-flex flex-column"> <div class="modal-body d-flex flex-column">
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" /> <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
@ -74,8 +87,8 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0;//Required to prevent 'squish' on iPhone padding: 0;//Required to prevent 'squish' on iPhone
z-index: 1056; z-index: 1050;
.bar1, .bar1,
.bar2, .bar2,
.bar3 { .bar3 {
width: 14px; width: 14px;
@ -106,7 +119,7 @@
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
} }
.modal-fullscreen { .modal-fullscreen {
width: 100vw; width: 100vw;
max-width: 576px; max-width: 576px;
} }
@ -117,7 +130,47 @@
border-top: none; border-top: none;
padding: 2rem; padding: 2rem;
} }
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0;
top: -4.0rem;
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
box-shadow: none;
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
}
}
}
//.modal-backdrop styles are in common-styles.scss //.modal-backdrop styles are in common-styles.scss
} }
} }