From d04f8742a61aa8eed5677bfee92f191768b80ff8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 22 Nov 2018 18:24:19 +0100
Subject: [PATCH] Fix relative timestamp and alignment in deleted items list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                       | 10 +++++--
 templates/part.board.sidebarView.php | 41 +++++++++++++---------------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 296bceaaa..40fba0d0a 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1288,10 +1288,16 @@ input.input-inline {
 .board-detail__deleted-list__item {
 	display: flex;
 	flex-direction: row;
-	justify-content: space-between;
 
 	* {
-		flex-basis: 20%;
+		flex-basis: 44px;
+	}
+
+	.title {
+		flex-grow: 2;
+	}
+	.live-relative-timestamp {
+		flex-grow: 1;
 	}
 }
 
diff --git a/templates/part.board.sidebarView.php b/templates/part.board.sidebarView.php
index 6ee31d9be..aee24a5a9 100644
--- a/templates/part.board.sidebarView.php
+++ b/templates/part.board.sidebarView.php
@@ -122,33 +122,30 @@
 
     </div>
 
-    <div id="board-detail-deleted-stacks" class="tab deletedStacksTabView" ng-if="params.tab==2">
+	<div id="board-detail-deleted-stacks" class="tab deletedStacksTabView" ng-if="params.tab==2">
 		<h3><?php p($l->t('Deleted stacks')); ?></h3>
-    	<ul class='board-detail__deleted-list'>
-    	   <li class='board-detail__deleted-list__item' ng-repeat="deletedStack in stackservice.deleted">
-           <span class="icon icon-deck"></span>
-           <span>{{deletedStack.title}}</span>
-    			 <span>{{deletedStack.deletedAt | relativeDateFilter }}</span>
-           <a ng-click="stackUndoDelete(deletedStack)">
-             <span class="icon icon-history"></span>
-           </a>
-    	   </li>
-    	</ul>
+		<ul class='board-detail__deleted-list'>
+			<li class='board-detail__deleted-list__item' ng-repeat="deletedStack in stackservice.deleted">
+				<span class="icon icon-deck"></span>
+				<span class="title">{{deletedStack.title}}</span>
+				<span class="live-relative-timestamp" data-timestamp="{{ deletedStack.deletedAt*1000  }}">{{deletedStack.deletedAt | relativeDateFilter }}</span>
+				<a ng-click="stackUndoDelete(deletedStack)"><span class="icon icon-history"></span></a>
+			</li>
+		</ul>
 
 		<h3><?php p($l->t('Deleted cards')); ?></h3>
 
 		<ul class='board-detail__deleted-list'>
-    	   <li class='board-detail__deleted-list__item' ng-repeat="deletedCard in cardservice.deleted">
-            <span class="icon icon-deck"></span>
-    			  <span>{{deletedCard.title}}</span>
-    			  <span>{{stackservice.tryAllThenDeleted(deletedCard.stackId).title}}</span>
-    			  <span>{{deletedCard.deletedAt | relativeDateFilter }}</span>
-        	  <a ng-click="cardOrCardAndStackUndoDelete(deletedCard)">
-              <span class="icon icon-history"></span>
-            </a>
-    	   </li>
-    	</ul>
-    </div>
+			<li class='board-detail__deleted-list__item' ng-repeat="deletedCard in cardservice.deleted">
+				<span class="icon icon-deck"></span>
+				<span class="title">{{deletedCard.title}} ({{stackservice.tryAllThenDeleted(deletedCard.stackId).title}})</span>
+				<span class="live-relative-timestamp" data-timestamp="{{ deletedCard.deletedAt*1000  }}">{{deletedCard.deletedAt | relativeDateFilter }}</span>
+				<a ng-click="cardOrCardAndStackUndoDelete(deletedCard)">
+					<span class="icon icon-history"></span>
+				</a>
+			</li>
+		</ul>
+	</div>
 
 	<div id="board-detail-activity" class="tab activityTabView" ng-if="isTimelineEnabled() && params.tab==4">
 		<activity-component ng-if="boardservice.getCurrent()" type="deck_board" element="boardservice.getCurrent()"></activity-component>