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

Merge pull request #1361 from Safelite/CSR-1593-modal-sidebar-functionality

Browse source 
CSR-1593 modal desktop sidebar slide-in development.
This commit is contained in:
bmauger 2023-09-26 16:48:48 -04:00 committed by GitHub
commit 4f9f0e21aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/digital-components/modal/modal.vue
View file

@ -148,12 +148,25 @@ export default {
} }
&.modal-component { &.modal-component {
.modal-dialog { .modal-dialog {
max-width: 576px; max-width: 767px;
margin: 0 auto; margin: 0 auto;
@include media-breakpoint-up(md) {
width: 376px;
position: absolute;
top: 0;
right: 0;
transform: translate(100%, 0);
}
.modal-content { .modal-content {
margin: 0 auto; margin: 1.5rem auto 0 auto;
box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25); box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
border-radius: 1.5rem 1.5rem 0 0; border-radius: 1.5rem 1.5rem 0 0;
@include media-breakpoint-up(md) {
box-shadow: none;
border-radius: 0;
height: 100vh;
margin: 0 auto;
}
.modal-body { .modal-body {
.modal-sub-body { .modal-sub-body {
color: $gray-600; color: $gray-600;
@ -166,6 +179,9 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@include media-breakpoint-up(md) {
overflow: scroll;
}
} }
} }
&.modal-dialog-centered { &.modal-dialog-centered {
@ -184,6 +200,11 @@ export default {
&.show .modal-dialog { &.show .modal-dialog {
transform: translateY(0); transform: translateY(0);
} }
@include media-breakpoint-up(md) {
&.fade {
transition: opacity 0.25s linear;
}
}
} }
body { body {
.modal-backdrop { .modal-backdrop {

3
src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
View file

@ -516,9 +516,6 @@ export default {
<style lang="scss"> <style lang="scss">
.time-slots-modal.modal.modal-component { .time-slots-modal.modal.modal-component {
> .modal-dialog > .modal-content {
margin-top: 24px;
}
.modal-header { .modal-header {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;

8
src/styles/common-styles.scss
View file

@ -41,14 +41,6 @@ body {
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
} }
//Footer modal backdrop adjustments for positioning
.modal-backdrop {
left: 50%;
transform: translateX(-50%);
max-width: 576px;
height: calc(100% - 72px);
}
} }
//Disable scroll of main container when modal is open //Disable scroll of main container when modal is open
.modal-open { .modal-open {