feat: add print styles

src/components/home/TheNavigation.vue

@@ -2,7 +2,7 @@
 	<header
 		:class="{'has-background': background}"
 		aria-label="main navigation"
-		class="navbar main-theme is-fixed-top"
+		class="navbar main-theme is-fixed-top d-print-none"
 	>
 		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>

src/components/home/contentAuth.vue

@@ -3,7 +3,7 @@
 		<BaseButton
 			v-if="menuActive"
 			@click="$store.commit('menuActive', false)"
-			class="menu-hide-button"
+			class="menu-hide-button d-print-none"
 		>
 			<icon icon="times"/>
 		</BaseButton>
@@ -14,9 +14,9 @@
 		>
 			<div
 				:class="{'is-visible': background}"
-				class="app-container-background background-fade-in"
+				class="app-container-background background-fade-in d-print-none"
 				:style="{'background-image': background && `url(${background})`}"></div>
-			<navigation/>
+			<navigation class="d-print-none"/>
 			<main
 				:class="[
 					{ 'is-menu-enabled': menuActive },
@@ -27,12 +27,11 @@
 				<BaseButton
 					v-if="menuActive"
 					@click="$store.commit('menuActive', false)"
-					class="mobile-overlay"
+					class="mobile-overlay d-print-none"
 				/>
 
 				<quick-actions/>
 
-
 				<router-view :route="routeWithModal" v-slot="{ Component }">
 					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
 						<component :is="Component"/>
@@ -51,7 +50,7 @@
 				</transition>
 
 				<a
-					class="keyboard-shortcuts-button"
+					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
@@ -238,9 +237,13 @@ store.dispatch('labels/loadAllLabels')
 	}
 
 	.app-content {
-		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
 		z-index: 10;
 		position: relative;
+		padding-top: 1rem;
+
+		@media screen {
+			padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+		}
 
 		// Used to make sure the spinner is always in the middle while loading
 		> .loader-container {
@@ -253,6 +256,7 @@ store.dispatch('labels/loadAllLabels')
 			min-height: calc(100vh - 4rem);
 		}
 
+		@media screen {
 			&.is-menu-enabled {
 				margin-left: $navbar-width;
 
@@ -261,6 +265,7 @@ store.dispatch('labels/loadAllLabels')
 					margin-left: 0;
 				}
 			}
+		}
 
 		.card {
 			background: var(--white);

src/components/input/editor.vue

@@ -16,11 +16,11 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>.
+				<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
 			</template>
 		</p>
 
-		<ul class="actions" v-if="bottomActions.length > 0">
+		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
 				<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
 				<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
@@ -30,7 +30,7 @@
 			</li>
 		</ul>
 		<template v-else-if="isEditEnabled && showSave">
-			<ul v-if="showEditButton" class="actions">
+			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
 					<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
 				</li>

src/components/tasks/partials/comments.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="content details" v-if="enabled">
-		<h3 v-if="canWrite || comments.length > 0">
+		<h3 v-if="canWrite || comments.length > 0" :class="{'d-print-none': comments.length === 0}">
 			<span class="icon is-grey">
 				<icon :icon="['far', 'comments']"/>
 			</span>
@@ -29,7 +29,7 @@
 						<img
 							:src="c.author.getAvatarUrl(20)"
 							alt=""
-							class="image is-avatar"
+							class="image is-avatar d-print-none"
 							height="20"
 							width="20"
 						/>
@@ -82,7 +82,7 @@
 					/>
 				</div>
 			</div>
-			<div class="media comment" v-if="canWrite">
+			<div class="media comment d-print-none" v-if="canWrite">
 				<figure class="media-left is-hidden-mobile">
 					<img
 						:src="userAvatar"

src/components/tasks/partials/relatedTasks.vue

@@ -3,7 +3,7 @@
 		<x-button
 			v-if="editEnabled && Object.keys(relatedTasks).length > 0"
 			@click="showNewRelationForm = !showNewRelationForm"
-			class="is-pulled-right add-task-relation-button"
+			class="is-pulled-right add-task-relation-button d-print-none"
 			:class="{'is-active': showNewRelationForm}"
 			v-tooltip="$t('task.relation.add')"
 			variant="secondary"

src/styles/custom-properties/colors.scss

@@ -170,7 +170,7 @@
   //--grey-lighter: #dbdbdb;
   --white-ter: whitesmoke;
   --white-bis: #fafafa;
-// END core Bulma color variables
+  // END core Bulma color variables
 
 
   // Vikunja specific variables
@@ -255,6 +255,7 @@
   --card-border-color: var(--grey-200);
   --logo-text-color: hsl(180, 1%, 15%);
 
+  @media screen {
     &.dark {
       // Light mode colours reversed for dark mode
       --grey-900-hsl: 210, 20%, 98%;
@@ -307,4 +308,5 @@
       --scheme-invert-bis: var(--grey-900);
       --scheme-invert-ter: var(--grey-800);
     }
+  }
 }

src/styles/theme/_index.scss

@@ -8,3 +8,4 @@
 @import "link-share";
 @import "loading";
 @import "flatpickr";
+@import 'helpers';

src/styles/theme/helpers.scss

@@ -0,0 +1,5 @@
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}

src/styles/theme/theme.scss

@@ -26,6 +26,10 @@
 body {
   background: var(--site-background);
   min-height: 100vh;
+ 
+  @media print {
+    background: #fff;
+  }
 }
 
 h1,

src/views/tasks/TaskDetailView.vue

@@ -14,7 +14,7 @@
 			<!-- Content and buttons -->
 			<div class="columns mt-2">
 				<!-- Content -->
-				<div :class="{'is-two-thirds': canWrite}" class="column">
+				<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
 					<div class="columns details">
 						<div class="column assignees" v-if="activeFields.assignees">
 							<!-- Assignees -->
@@ -246,7 +246,7 @@
 					<!-- Comments -->
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
-				<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
+				<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || shouldShowClosePopup">
 					<BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
 						<icon icon="arrow-left"/>
 						{{ $t('task.detail.closePopup') }}
@@ -955,4 +955,10 @@ $flash-background-duration: 750ms;
 }
 
 @include modal-transition();
+
+.detail-content {
+  @media print {
+	width: 100% !important;
+  }
+}
 </style>