Update notification layout

5 files changed, 31 insertions, 44 deletions

diff --git a/mastodon/status.go b/mastodon/status.go
index bce283f..5be4f49 100644
--- a/mastodon/status.go
+++ b/mastodon/status.go
@@ -50,7 +50,6 @@ type Status struct {
 
 	// Custom fields
 	Pleroma         StatusPleroma          `json:"pleroma"`
-	HideAccountInfo bool                   `json:"hide_account_info"`
 	ShowReplies     bool                   `json:"show_replies"`
 	ReplyMap        map[string][]ReplyInfo `json:"reply_map"`
 	ReplyNumber     int                    `json:"reply_number"`
diff --git a/service/service.go b/service/service.go
index 0ef8f09..fbf617a 100644
--- a/service/service.go
+++ b/service/service.go
@@ -490,13 +490,6 @@ func (svc *service) ServeNotificationPage(ctx context.Context, c *model.Client,
 	}
 
 	for i := range notifications {
-		if notifications[i].Status != nil {
-			notifications[i].Status.CreatedAt = notifications[i].CreatedAt
-			switch notifications[i].Type {
-			case "reblog", "favourite":
-				notifications[i].Status.HideAccountInfo = true
-			}
-		}
 		if notifications[i].Pleroma != nil && !notifications[i].Pleroma.IsSeen {
 			unreadCount++
 		}
diff --git a/static/style.css b/static/style.css
index 602f2ef..fdbad23 100644
--- a/static/style.css
+++ b/static/style.css
@@ -138,7 +138,7 @@
 }
 
 .retweet-info {
-	margin: 8px 0 4px 24px;	
+	margin: 0 0 2px 24px;	
 }
 
 .retweet-info .status-profile-img {
@@ -176,9 +176,7 @@
 	border-color: #777777;
 }
 
-.notification-follow-container,
-.notification-like-container,
-.notification-retweet-container {
+.notification-follow-container {
 	display: flex;
 }
 
@@ -190,6 +188,10 @@
 	margin-top: 8px;
 }
 
+.notification-time {
+	margin-left: 8px;
+}
+
 .status-reply-to {
 	display: inline-block;
 	vertical-align: center;
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index 7d0e67c..cc7a4a1 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -17,6 +17,9 @@
 				<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
 				<img class="icon" src="{{GetIcon "user-plus" $.Ctx.DarkMode}}" alt="followed" />
 				<span> followed you </span>
+				<span>
+					- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+				</span>
 			</div>
 			<div class="notification-follow-uname">
 				@{{.Account.Acct}}
@@ -28,38 +31,32 @@
 	{{template "status" (WithContext .Status $.Ctx)}}
 
 	{{else if eq .Type "reblog"}}
-	<div class="notification-retweet-container">
-		<div class="status-profile-img-container">
-			<a class="img-link" href="/user/{{.Account.ID}}" >
-				<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
-			</a>
-		</div>
-		<div>
-			<div class="notification-info-text">
-				<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-				<img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
-				<span> retweeted your post </span>
-			</div>
-			{{template "status" (WithContext .Status $.Ctx)}}
-		</div>
+	<div class="retweet-info">
+		<a class="img-link" href="/user/{{.Account.ID}}">
+			<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
+		</a>
+		<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
+		<img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
+		<span> retweeted your post </span>
+		<span>
+			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		</span>
 	</div>
+	{{template "status" (WithContext .Status $.Ctx)}}
 
 	{{else if eq .Type "favourite"}}
-	<div class="notification-like-container">
-		<div class="status-profile-img-container">
-			<a class="img-link" href="/user/{{.Account.ID}}" >
-				<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="profile-avatar" />
-			</a>
-		</div>
-		<div>
-			<div class="notification-info-text">
-				<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
-				<img class="icon" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="liked" />
-				<span> liked your post </span>
-			</div>
-			{{template "status" (WithContext .Status $.Ctx)}}
-		</div>
+	<div class="retweet-info">
+		<a class="img-link" href="/user/{{.Account.ID}}">
+			<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
+		</a>
+		<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>  
+		<img class="icon" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="liked" />
+		<span> liked your post </span>
+		<span>
+			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		</span>
 	</div>
+	{{template "status" (WithContext .Status $.Ctx)}}
 	{{end}}
 </div>
 {{end}}
diff --git a/templates/status.tmpl b/templates/status.tmpl
index fd5339a..a6b28fa 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -14,15 +14,12 @@
 	{{block "status" (WithContext . $.Ctx)}}
 	{{with $s := .Data}}
 	<div class="status-container status-{{.ID}}" data-id="{{.ID}}">
-		{{if not .HideAccountInfo}}
 		<div class="status-profile-img-container">
 			<a class="img-link" href="/user/{{.Account.ID}}">
 				<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
 			</a>
 		</div>
-		{{end}}
 		<div class="status"> 
-			{{if not .HideAccountInfo}}
 			<div class="status-name">
 				<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> 
 				<a href="/user/{{.Account.ID}}" >
@@ -43,7 +40,6 @@
 					<img class="icon" src="{{GetIcon "link" $.Ctx.DarkMode}}" alt="source" />
 				</a>
 			</div>
-			{{end}}
 			<div class="status-reply-container">
 				{{if .InReplyToID}}
 				<div class="status-reply-to">