[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

@@ -75,28 +75,27 @@ main {
 			background: $bg;
 		}
 	}
+
+	.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;
-		line-height: 2rem;
-		margin-top: -0.5rem;
-		align-self: start;
-
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 	}
-	
+
 	.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;
+		}
 	}
 }
 

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>

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>