ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: sticky action buttons (#2622)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2622
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
2022-11-04 13:49:28 +00:00
committed by konrad
parent f7728e5384
commit f4bc2b94f0
3 changed files with 59 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,6 +99,9 @@ watchEffect(() => {
</script>
<style lang="scss" scoped>
$modal-margin: 4rem;
$modal-width: 1024px;
.modal-mask {
position: fixed;
z-index: 4000;
@ -147,16 +150,16 @@ watchEffect(() => {
// scrolling-content
// used e.g. for <TaskDetailViewModal>
.scrolling .modal-content {
max-width: 1024px;
max-width: $modal-width;
width: 100%;
margin: 4rem auto;
margin: $modal-margin auto;
max-height: none; // reset bulma
overflow: visible; // reset bulma
@media screen and (min-width: $tablet) {
max-height: none; // reset bulma
margin: 4rem auto; // reset bulma
margin: $modal-margin auto; // reset bulma
width: 100%;
}
@ -189,14 +192,23 @@ watchEffect(() => {
}
.close {
$close-button-min-space: 84px;
$close-button-padding: 26px;
position: fixed;
top: 5px;
right: 26px;
color: var(--white);
right: $close-button-padding;
color: var(--grey-900);
font-size: 2rem;
@media screen and (max-width: $desktop) {
color: var(--grey-900);
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
top: calc(5px + $modal-margin);
right: 50%;
// 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}));
}
// 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);
}
}
</style>