ami/tl-vikunja
1
0
Fork 0
Code

fix(task): make print styles work when printing task detail view from kanban

Browse Source 
Resolves https://community.vikunja.io/t/feature-request-export-a-task-as-pdf/2735/6

(cherry picked from commit cc1b4bbd1b22c346590685bd5272a8635cdc7715)
This commit is contained in:
kolaente 2024-09-12 11:02:12 +02:00
parent eb6663e1f5
commit b5eaa51560
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/home/AddToHomeScreen.vue
View File

@ -69,6 +69,10 @@ const shouldShowMessage = computed(() => {
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
display: none; display: none;
} }
@media print {
display: none;
}
&.has-update-available { &.has-update-available {
bottom: 5rem; bottom: 5rem;

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

@ -154,12 +154,15 @@ $modal-width: 1024px;
// scrolling-content // scrolling-content
// used e.g. for <TaskDetailViewModal> // used e.g. for <TaskDetailViewModal>
.scrolling .modal-content { .scrolling .modal-content {
max-width: $modal-width;
width: 100%; width: 100%;
margin: $modal-margin auto; margin: $modal-margin auto;
max-height: none; // reset bulma max-height: none; // reset bulma
overflow: visible; // reset bulma overflow: visible; // reset bulma
@media not print {
max-width: $modal-width;
}
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
max-height: none; // reset bulma max-height: none; // reset bulma
@ -167,7 +170,7 @@ $modal-width: 1024px;
width: 100%; width: 100%;
} }
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop), print {
margin: 0; margin: 0;
} }
} }
@ -211,6 +214,28 @@ $modal-width: 1024px;
@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 {
.modal-mask {
position: static;
overflow: visible !important;
}
.modal-container {
height: auto;
overflow: visible;
}
.modal-content {
position: static;
}
.close {
display: none;
}
} }
</style> </style>
@ -219,4 +244,15 @@ $modal-width: 1024px;
.dark .close { .dark .close {
color: var(--grey-900); color: var(--grey-900);
} }
</style>
@media print {
body:has(.modal-mask) {
height: auto;
overflow: visible;
#app {
display: none;
}
}
}
</style>