ami/tl-vikunja
1
0
Fork 0
Code

fix(modal): make sure modal and its content scrolls properly on mobile

Browse Source 
Related to https://github.com/go-vikunja/vikunja/issues/309

(cherry picked from commit f53b93d98ae35e904dd24944722a0388421cca5e)
This commit is contained in:
kolaente 2024-09-12 16:22:04 +02:00
parent f1451abebe
commit 2b15bb5154
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/misc/Modal.vue
View File

@ -20,6 +20,12 @@
class="modal-container" class="modal-container"
@mousedown.self.prevent.stop="$emit('close')" @mousedown.self.prevent.stop="$emit('close')"
> >
<BaseButton
class="close"
@click="$emit('close')"
>
<Icon icon="times" />
</BaseButton>
<div <div
class="modal-content" class="modal-content"
:class="{ :class="{
@ -27,13 +33,6 @@
'is-wide': wide 'is-wide': wide
}" }"
> >
<BaseButton
class="close"
@click="$emit('close')"
>
<Icon icon="times" />
</BaseButton>
<slot> <slot>
<div class="header"> <div class="header">
<slot name="header" /> <slot name="header" />
@ -137,8 +136,8 @@ $modal-width: 1024px;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
margin: 0; margin: 0;
top: 25%; position: static;
transform: translate(-50%, -25%); transform: none;
} }
.header { .header {
@ -197,7 +196,7 @@ $modal-width: 1024px;
position: fixed; position: fixed;
top: .5rem; top: .5rem;
right: $close-button-padding; right: $close-button-padding;
color: var(--grey-900); color: var(--white);
font-size: 2rem; font-size: 2rem;
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) { @media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
@ -206,18 +205,13 @@ $modal-width: 1024px;
// we align the close button to the modal until there is enough space outside for it // we align the close button to the modal until there is enough space outside for it
transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding})); transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
} }
// we can only use light color when there is enough space for the close button next to the modal
@media screen and (min-width: calc(#{$desktop } + #{$close-button-min-space})) {
color: var(--white);
}
@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) { @media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
top: .75rem; top: .75rem;
} }
} }
@media print { @media print, screen and (max-width: $tablet) {
.modal-mask { .modal-mask {
position: static; position: static;
overflow: visible !important; overflow: visible !important;
@ -226,6 +220,7 @@ $modal-width: 1024px;
.modal-container { .modal-container {
height: auto; height: auto;
overflow: visible; overflow: visible;
min-height: 100vh;
} }
.modal-content { .modal-content {
@ -236,6 +231,14 @@ $modal-width: 1024px;
display: none; display: none;
} }
:deep(.card) {
border: none !important;
border-radius: 0 !important;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
} }
</style> </style>
@ -245,7 +248,7 @@ $modal-width: 1024px;
color: var(--grey-900); color: var(--grey-900);
} }
@media print { @media print, screen and (max-width: $tablet) {
body:has(.modal-mask) { body:has(.modal-mask) {
height: auto; height: auto;
overflow: visible; overflow: visible;