From 48c28690b2c8634f2c2e76eb5e8397e70681936c Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 10 Oct 2021 11:44:35 +0200
Subject: [PATCH] show absolute dates when printing

relates to #3250

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/cards/badges/DueDate.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index c2a998d1b..805edad3c 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -23,7 +23,7 @@
 <template>
 	<div v-if="card" class="duedate">
 		<transition name="zoom">
-			<div v-if="card.duedate" :class="dueIcon">
+			<div v-if="card.duedate" :class="dueIcon" :title="absoluteDate">
 				<span>{{ relativeDate }}</span>
 			</div>
 		</transition>
@@ -62,14 +62,14 @@ export default {
 			}
 			return moment(this.card.duedate).fromNow()
 		},
-		dueDateTooltip() {
-			return moment(this.card.duedate).format('LLLL')
+		absoluteDate() {
+			return moment(this.card.duedate).format('L')
 		},
 	},
 }
 </script>
 
-<style lang="scss" coped>
+<style lang="scss" scoped>
 	.icon.due {
 		background-position: 4px center;
 		border-radius: 3px;
@@ -105,6 +105,7 @@ export default {
 			padding: 3px 4px;
 		}
 
+		&::before,
 		span {
 			margin-left: 20px;
 			white-space: nowrap;
@@ -112,4 +113,18 @@ export default {
 			overflow: hidden;
 		}
 	}
+
+	@media print {
+		.icon.due {
+			background-color: transparent !important;
+
+			span {
+				display: none;
+			}
+
+			&::before {
+				content: attr(title);
+			}
+		}
+	}
 </style>