From 8e2c76a33eec573afab0b754d0707f84e2cca962 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 30 May 2023 19:50:37 +0200
Subject: [PATCH] feat: optimize print view for project views

---
 src/components/home/TheNavigation.vue     |  3 ++-
 src/components/misc/card.vue              | 29 +++++++++++++----------
 src/components/project/ProjectWrapper.vue | 17 ++++++++++++-
 src/views/project/ProjectList.vue         |  2 +-
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 36be81c0..2621adc4 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -8,7 +8,8 @@
 		<MenuButton class="menu-button" />
 
 		<div v-if="currentProject?.id" class="project-title-wrapper">
-			<h1 class="project-title">{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
+			<h1 class="project-title">
+				{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
 			</h1>
 
 			<BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button">
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 0d96916d..49a6a6c6 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -24,12 +24,12 @@
 			}"
 		>
 			<div :class="{'content': hasContent}">
-				<slot />
+				<slot/>
 			</div>
 		</div>
 
 		<footer v-if="$slots.footer" class="card-footer">
-			<slot name="footer" />
+			<slot name="footer"/>
 		</footer>
 	</div>
 </template>
@@ -76,22 +76,27 @@ defineEmits(['close'])
 
 <style lang="scss" scoped>
 .card {
-  background-color: var(--white);
-  border-radius: $radius;
-  margin-bottom: 1rem;
-  border: 1px solid var(--card-border-color);
-  box-shadow: var(--shadow-sm);
+	background-color: var(--white);
+	border-radius: $radius;
+	margin-bottom: 1rem;
+	border: 1px solid var(--card-border-color);
+	box-shadow: var(--shadow-sm);
+
+	@media print {
+		box-shadow: none;
+		border: none;
+	}
 }
 
 .card-header {
-  box-shadow: none;
-  border-bottom: 1px solid var(--card-border-color);
-  border-radius: $radius $radius 0 0;
+	box-shadow: none;
+	border-bottom: 1px solid var(--card-border-color);
+	border-radius: $radius $radius 0 0;
 }
 
 .card-footer {
-  background-color: var(--grey-50);
-  border-top: 0;
+	background-color: var(--grey-50);
+	border-top: 0;
 	padding: var(--modal-card-head-padding);
 	display: flex;
 	justify-content: flex-end;
diff --git a/src/components/project/ProjectWrapper.vue b/src/components/project/ProjectWrapper.vue
index 95457d53..f8d230d0 100644
--- a/src/components/project/ProjectWrapper.vue
+++ b/src/components/project/ProjectWrapper.vue
@@ -3,7 +3,11 @@
 		:class="{ 'is-loading': projectService.loading, 'is-archived': currentProject?.isArchived}"
 		class="loader-container"
 	>
-		<div class="switch-view-container">
+		<h1 class="project-title-print">
+			{{ getProjectTitle(currentProject) }}
+		</h1>
+		
+		<div class="switch-view-container d-print-none">
 			<div class="switch-view">
 				<BaseButton
 					v-shortcut="'g l'"
@@ -197,4 +201,15 @@ watch(
 .is-archived .notification.is-warning {
   margin-bottom: 1rem;
 }
+
+.project-title-print {
+	display: none;
+	font-size: 1.75rem;
+	text-align: center;
+	margin-bottom: .5rem;
+	
+	@media print {
+		display: block;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/views/project/ProjectList.vue b/src/views/project/ProjectList.vue
index 9182c083..1cce8e51 100644
--- a/src/views/project/ProjectList.vue
+++ b/src/views/project/ProjectList.vue
@@ -55,7 +55,7 @@
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<add-task
 				v-if="!project.isArchived && canWrite"
-				class="list-view__add-task"
+				class="list-view__add-task d-print-none"
 				ref="addTaskRef"
 				:default-position="firstNewPosition"
 				@taskAdded="updateTaskList"