sandevistan/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Pull Requests Activity

fix(task): make sure the modal close button is not overlapped with the title field (#3256)

Browse Source 
Resolves vikunja/frontend#3252
Reviewed-on: vikunja/frontend#3256
Co-authored-by: kolaente <k@knt.li>
Co-committed-by: kolaente <k@knt.li>
This commit is contained in:
kolaente 2023-10-22 17:40:50 +00:00 committed by konrad
parent c1149273f9
commit 0b294de132
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/misc/modal.vue
View File

@ -195,10 +195,9 @@ $modal-width: 1024px;
}
.close {
$close-button-min-space: 84px;
$close-button-padding: 26px;
position: fixed;
top: 5px;
top: .5rem;
right: $close-button-padding;
color: var(--grey-900);
font-size: 2rem;
@ -213,6 +212,10 @@ $modal-width: 1024px;
@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}) {
top: .75rem;
}
}
</style>

6
src/components/tasks/partials/heading.vue
View File

@ -113,7 +113,7 @@ async function save(title: string) {
<style lang="scss" scoped>
.heading {
display: flex;
justify-content: space-between;
justify-content: flex-start;
text-transform: none;
align-items: center;
@ -134,6 +134,10 @@ async function save(title: string) {
@media screen and (max-width: $tablet) {
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
}
@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
width: calc(100% - 6.5rem);
}
}
.title.task-id {

2
src/styles/common-imports.scss
View File

@ -37,3 +37,5 @@ $navbar-padding: 2rem;
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
$close-button-min-space: 84px;