Update notification layout

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"`

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++
 		}

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-follow-container {
-.notification-like-container,
-.notification-retweet-container {
 	display: flex;
 }
 
@@ -190,6 +188,10 @@
 	margin-top: 8px;
 }
 
+.notification-time {
+	margin-left: 8px;
+}
+
 .status-reply-to {
 	display: inline-block;
 	vertical-align: center;

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="retweet-info">
-		<div class="status-profile-img-container">
+		<a class="img-link" href="/user/{{.Account.ID}}">
-			<a class="img-link" href="/user/{{.Account.ID}}" >
+			<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
-				<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>
+		<span>
+			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		</span>
 	</div>
 	{{template "status" (WithContext .Status $.Ctx)}}
-		</div>
-	</div>
 
 	{{else if eq .Type "favourite"}}
-	<div class="notification-like-container">
+	<div class="retweet-info">
-		<div class="status-profile-img-container">
+		<a class="img-link" href="/user/{{.Account.ID}}">
-			<a class="img-link" href="/user/{{.Account.ID}}" >
+			<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
-				<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>
+		<span>
+			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+		</span>
 	</div>
 	{{template "status" (WithContext .Status $.Ctx)}}
-		</div>
-	</div>
 	{{end}}
 </div>
 {{end}}

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">