From deba75cad14f47bb42ea55e7d126d3adea7855a6 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sun, 2 Oct 2022 15:54:42 +0200
Subject: [chore] Use shorter timestamps in frontend for replies (#875)

* rename timestampShort -> timestampVague

* add ParseISO8601

* start fiddling with timestamp

* pad/margin a bit more consistently

* remove visibilty icon, change timestamp use

* update timestamp logic

* check + log errors

* properly cut-off long display- and usernames

Co-authored-by: f0x <f0x@cthu.lu>
---
 web/source/css/status.css | 34 +++++++++++++++++++---------------
 web/template/profile.tmpl |  2 +-
 web/template/status.tmpl  |  3 +--
 3 files changed, 21 insertions(+), 18 deletions(-)

(limited to 'web')

diff --git a/web/source/css/status.css b/web/source/css/status.css
index e34b3b091..c057aec4b 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -75,28 +75,27 @@ main {
 			background: $bg;
 		}
 	}
-	
-	.displayname {
-		font-weight: bold;
-		font-size: 1.2rem;
-		line-height: 2rem;
-		margin-top: -0.5rem;
-		align-self: start;
 
+	.displayname, .username {
+		justify-self: start;
+		align-self: start;
+		
+		max-width: 100%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+
+		/* margin-top: -0.5rem; */
+		line-height: 2rem;
 	}
 	
+	.displayname {
+		font-weight: bold;
+		font-size: 1.2rem;
+	}
+
 	.username {
 		color: $link-fg;
-		line-height: 2rem;
-		margin-top: -0.5rem;
-		align-self: start;
-		
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
 
 	input.spoiler:checked ~ .content {
@@ -180,7 +179,7 @@ main {
 	}
 
 	.media {
-		margin-top: 0.6rem;
+		margin-top: 0.5rem;
 		border-radius: $br;
 		grid-column: span 3;
 		display: grid;
@@ -362,6 +361,7 @@ main {
 
 			.text {
 				grid-column: 1 / span 3;
+				padding-top: 0.5rem;
 			}
 
 			.not-expanded {
@@ -372,6 +372,10 @@ main {
 		.info {
 			display: flex;
 		}
+
+		.media {
+			margin-bottom: 0.5rem;
+		}
 	}
 }
 
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 4c348d028..145ff95f4 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -21,7 +21,7 @@
             </div>
         </div>
         <div class="accountstats">
-            <div class="entry">Joined <b>{{.account.CreatedAt | timestampShort}}</b></div>
+            <div class="entry">Joined <b>{{.account.CreatedAt | timestampVague}}</b></div>
             <div class="entry">Followed by <b>{{.account.FollowersCount}}</b></div>
             <div class="entry">Following <b>{{.account.FollowingCount}}</b></div>
             <div class="entry">Posted <b>{{.account.StatusesCount}}</b></div>
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 5136b6ad7..bff1fb692 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -3,7 +3,6 @@
 	<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a>
 	<a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a>
 	<div class="not-expanded">
-		<span class="visibility">{{.Visibility | visibilityIcon}}</span>
 		<span class="date">{{.CreatedAt | timestamp}}</span>
 	</div>
 	<div class="text">
@@ -45,7 +44,7 @@
 	{{end}}
 </div>
 <div class="info">
-	<div id="date">{{.CreatedAt | timestamp}}</div>
+	<div id="date">{{.CreatedAt | timestampPrecise}}</div>
 	<div class="stats">
 		<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div>
 		<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div>
-- 
cgit v1.2.3