From f32982bb7910086731c2a2c7337de3c701c5330a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sun, 18 Jul 2021 12:13:56 +0200
Subject: [PATCH] Right align deleted at column in trash bin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/AppNavigation/Trashbin.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index 16db87021..f336c728d 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -48,14 +48,14 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 							<div class="table__header">
 								{{ t('tasks', 'Name') }}
 							</div>
-							<div class="table__header deletedAt">
+							<div class="table__header table__header--deletedAt">
 								{{ t('tasks', 'Deleted') }}
 							</div>
 							<div class="table__header">
 								&nbsp;
 							</div>
 							<template v-for="item in items" class="row">
-								<div :key="`${item.url}desc`">
+								<div :key="`${item.url}desc`" class="table__body">
 									<div
 										class="icon-bullet"
 										:style="{ 'background-color': item.color }" />
@@ -68,10 +68,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 										</div>
 									</div>
 								</div>
-								<div :key="`${item.url}date`" class="deletedAt">
+								<div :key="`${item.url}date`" class="table__body table__body--deletedAt">
 									<Moment class="timestamp" :timestamp="item.deletedAt" />
 								</div>
-								<div :key="`${item.url}action`">
+								<div :key="`${item.url}action`" class="table__body">
 									<button @click="restore(item)">
 										{{ t('tasks','Restore') }}
 									</button>
@@ -284,6 +284,13 @@ export default {
 		z-index: 1;
 	}
 
+	&__header,
+	&__body {
+		&--deletedAt {
+			justify-content: right;
+		}
+	}
+
 	& > div {
 		display: flex;
 		align-items: center;
@@ -306,10 +313,6 @@ export default {
 	}
 }
 
-.deletedAt {
-	text-align: right;
-}
-
 .footer {
 	color: var(--color-text-lighter);
 	text-align: center;