From 6fc87e1515c509cabd71e9de7464f21140539554 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 2 Jun 2022 23:00:21 +0200
Subject: [PATCH] feat: add print styles

---
 src/components/home/TheNavigation.vue         |   2 +-
 src/components/home/contentAuth.vue           |  29 +++--
 src/components/input/editor.vue               |   6 +-
 src/components/tasks/partials/comments.vue    |   6 +-
 .../tasks/partials/relatedTasks.vue           |   2 +-
 src/styles/custom-properties/colors.scss      | 112 +++++++++---------
 src/styles/theme/_index.scss                  |   3 +-
 src/styles/theme/helpers.scss                 |   5 +
 src/styles/theme/theme.scss                   |   4 +
 src/views/tasks/TaskDetailView.vue            |  10 +-
 10 files changed, 101 insertions(+), 78 deletions(-)
 create mode 100644 src/styles/theme/helpers.scss

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 6658da25a1..e3aa002f77 100644
--- a/src/components/home/TheNavigation.vue
+++ b/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"/>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 7bc2096de6..a0b3204cf8 100644
--- a/src/components/home/contentAuth.vue
+++ b/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,12 +256,14 @@ store.dispatch('labels/loadAllLabels')
 			min-height: calc(100vh - 4rem);
 		}
 
-		&.is-menu-enabled {
-			margin-left: $navbar-width;
+		@media screen {
+			&.is-menu-enabled {
+				margin-left: $navbar-width;
 
-			@media screen and (max-width: $tablet) {
-				min-width: 100%;
-				margin-left: 0;
+				@media screen and (max-width: $tablet) {
+					min-width: 100%;
+					margin-left: 0;
+				}
 			}
 		}
 
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index a6a7811de6..d7a24943eb 100644
--- a/src/components/input/editor.vue
+++ b/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>
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index d11f66ea53..17174ff4ca 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/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"
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 5ae04a076a..5129eeadc2 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/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"
diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index fbd6468e65..c63780d233 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/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
@@ -191,10 +191,10 @@
   // Overrides of Bulma defaults
   --scheme-main: var(--white);
   --grey-darker: var(--grey-700);
-  --grey-dark:  var(--grey-800);
-  --grey:  var(--grey-500);
-  --grey-light:  var(--grey-300);
-  --grey-lighter:  var(--grey-200);
+  --grey-dark: var(--grey-800);
+  --grey: var(--grey-500);
+  --grey-light: var(--grey-300);
+  --grey-lighter: var(--grey-200);
   --grey-lightest: var(--grey-100);
   --input-border-color: var(--grey-200);
 
@@ -218,21 +218,21 @@
   --warning-a: 1;
   --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
 
-	// $success / $green is #00db60
+  // $success / $green is #00db60
   --success-h: 146.3deg;
   --success-s: 100%;
   --success-l: 42.9%;
   --success-a: 1;
   --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
 
-	// $danger / $red is #ff4136
+  // $danger / $red is #ff4136
   --danger-h: 3.3deg;
   --danger-s: 100%;
   --danger-l: 60.6%;
   --danger-a: 1;
   --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
 
-	// var(--primary) / $blue is #1973ff
+  // var(--primary) / $blue is #1973ff
   --primary-h: 217deg;
   --primary-s: 98%;
   --primary-l: 53%;
@@ -255,56 +255,58 @@
   --card-border-color: var(--grey-200);
   --logo-text-color: hsl(180, 1%, 15%);
 
-  &.dark {
-    // Light mode colours reversed for dark mode
-    --grey-900-hsl: 210, 20%, 98%;
-    --grey-900: hsl(var(--grey-900-hsl));
-    --grey-800: hsl(220, 14.3%, 95.9%);
-    --grey-700: hsl(220, 13%, 91%);
-    --grey-600: hsl(216, 12.2%, 83.9%);
-    --grey-500-hsl: 217.9, 10.6%, 64.9%;
-    --grey-500: hsl(var(--grey-500-hsl));
-    --grey-400: hsl(220, 8.9%, 46.1%);
-    --grey-300: hsl(215, 13.8%, 34.1%);
-    --grey-200: hsl(216.9, 19.1%, 26.7%);
-    --grey-100-hsl: 215, 27.9%, 16.9%;
-    --grey-100: hsl(var(--grey-100-hsl));
-    --grey-50-hsl: 220.9, 39.3%, 11%;
-    --grey-50: hsl(var(--grey-50-hsl));
+  @media screen {
+    &.dark {
+      // Light mode colours reversed for dark mode
+      --grey-900-hsl: 210, 20%, 98%;
+      --grey-900: hsl(var(--grey-900-hsl));
+      --grey-800: hsl(220, 14.3%, 95.9%);
+      --grey-700: hsl(220, 13%, 91%);
+      --grey-600: hsl(216, 12.2%, 83.9%);
+      --grey-500-hsl: 217.9, 10.6%, 64.9%;
+      --grey-500: hsl(var(--grey-500-hsl));
+      --grey-400: hsl(220, 8.9%, 46.1%);
+      --grey-300: hsl(215, 13.8%, 34.1%);
+      --grey-200: hsl(216.9, 19.1%, 26.7%);
+      --grey-100-hsl: 215, 27.9%, 16.9%;
+      --grey-100: hsl(var(--grey-100-hsl));
+      --grey-50-hsl: 220.9, 39.3%, 11%;
+      --grey-50: hsl(var(--grey-50-hsl));
 
-    // Dark grey looks better than black
-    --white: var(--grey-50);
-    --black-l: 100%;
+      // Dark grey looks better than black
+      --white: var(--grey-50);
+      --black-l: 100%;
 
-    // Text renders better in grey than black
-    --text: var(--grey-800);
-    --text-invert: #000;
-    --text-light: var(--grey-300);
-    --text-strong: var(--grey-900);
+      // Text renders better in grey than black
+      --text: var(--grey-800);
+      --text-invert: #000;
+      --text-light: var(--grey-300);
+      --text-strong: var(--grey-900);
 
-    // Elements that rely on Bulma defaults in light mode but
-    // need to be overriden in dark mode
-    --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
-    --tag-color: var(--grey-800);
-    --table-row-hover-background-color: var(--grey-100);
-    --dropdown-item-hover-background-color: var(--grey-100);
-    --dropdown-item-hover-color: var(--text);
-    --button-text-hover-background-color: var(--grey-200);
-    --button-hover-color: var(--grey-600);
+      // Elements that rely on Bulma defaults in light mode but
+      // need to be overriden in dark mode
+      --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
+      --tag-color: var(--grey-800);
+      --table-row-hover-background-color: var(--grey-100);
+      --dropdown-item-hover-background-color: var(--grey-100);
+      --dropdown-item-hover-color: var(--text);
+      --button-text-hover-background-color: var(--grey-200);
+      --button-hover-color: var(--grey-600);
 
-    // Custom color variables we need to override
-    --card-border-color: hsla(var(--grey-100-hsl), 0.3);
-    --logo-text-color: var(--grey-700);
-    
-    // Slightly different primary color to make sure it has a sufficent contrast ratio
-    --primary-h: 217deg;
-    --primary-s: 98%;
-    --primary-l: 58%;
-    
-    --scheme-main-bis: var(--grey-100);
-    --scheme-main-ter: var(--grey-100);
-    --scheme-invert: var(--grey-900);
-    --scheme-invert-bis: var(--grey-900);
-    --scheme-invert-ter: var(--grey-800);
+      // Custom color variables we need to override
+      --card-border-color: hsla(var(--grey-100-hsl), 0.3);
+      --logo-text-color: var(--grey-700);
+
+      // Slightly different primary color to make sure it has a sufficent contrast ratio
+      --primary-h: 217deg;
+      --primary-s: 98%;
+      --primary-l: 58%;
+
+      --scheme-main-bis: var(--grey-100);
+      --scheme-main-ter: var(--grey-100);
+      --scheme-invert: var(--grey-900);
+      --scheme-invert-bis: var(--grey-900);
+      --scheme-invert-ter: var(--grey-800);
+    }
   }
 }
\ No newline at end of file
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index b3eb47e0ae..bc86c7bfe9 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -7,4 +7,5 @@
 @import "form";
 @import "link-share";
 @import "loading";
-@import "flatpickr";
\ No newline at end of file
+@import "flatpickr";
+@import 'helpers';
\ No newline at end of file
diff --git a/src/styles/theme/helpers.scss b/src/styles/theme/helpers.scss
new file mode 100644
index 0000000000..5e96dfba1c
--- /dev/null
+++ b/src/styles/theme/helpers.scss
@@ -0,0 +1,5 @@
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 403f6dea99..cb5bf8e995 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -26,6 +26,10 @@
 body {
   background: var(--site-background);
   min-height: 100vh;
+ 
+  @media print {
+    background: #fff;
+  }
 }
 
 h1,
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index a91cc6cf0f..38c5ccd327 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/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>
\ No newline at end of file