From 83f571628d186d8b865707c3c7b22de8bd530c4c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 30 Sep 2023 17:48:34 +0200
Subject: [PATCH] Feed UI Improvements (#27356)

Various improvements related to feeds:

- Fix markdown rendering
- Increase font size from 13px to default 14px via `flex-item`
- Add style to hashes
- Move the timestamp to title line. I realize it's not optimal for
translation, we may need to change all these translations

Before:
<img width="768" alt="Screenshot 2023-09-29 at 22 52 58"
src="https://github.com/go-gitea/gitea/assets/115237/edda8b84-23cf-4a43-90ad-a892798f4e6c">

After:
<img width="781" alt="Screenshot 2023-09-29 at 22 58 09"
src="https://github.com/go-gitea/gitea/assets/115237/7097474d-efcf-4f22-a2ab-834a4e25c4e8">
---
 templates/user/dashboard/feeds.tmpl | 26 ++++++++++++++------------
 web_src/css/shared/flex-list.css    |  1 -
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index eb1b503a1f..876a245fe9 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -78,20 +78,23 @@
 						{{$reviewer := index .GetIssueInfos 1}}
 						{{ctx.Locale.Tr "action.review_dismissed" ((printf "%s/pulls/%s" (.GetRepoLink ctx) $index) |Escape) $index ((.ShortRepoPath ctx)|Escape) $reviewer | Str2html}}
 					{{end}}
+					{{TimeSince .GetCreate ctx.Locale}}
 				</div>
 				{{if .GetOpType.InActions "commit_repo" "mirror_sync_push"}}
 					{{$push := ActionContent2Commits .}}
 					{{$repoLink := (.GetRepoLink ctx)}}
-					{{range $push.Commits}}
-						{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
-						<div class="flex-text-block">
-							<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
-							<a class="gt-mono" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
-							<span class="text truncate light grey">
-								{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
-							</span>
-						</div>
-					{{end}}
+					<div class="gt-df gt-fc gt-gap-2">
+						{{range $push.Commits}}
+							{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
+							<div class="flex-text-block">
+								<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
+								<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
+								<span class="text truncate">
+									{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
+								</span>
+							</div>
+						{{end}}
+					</div>
 					{{if and (gt $push.Len 1) $push.CompareURL}}
 						<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{ctx.Locale.Tr "action.compare_commits" $push.Len}} »</a>
 					{{end}}
@@ -103,7 +106,7 @@
 					<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | RenderEmoji $.Context | RenderCodeBlock}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if gt (len $comment) 0}}
-						<div class="flex-item-body">{{$comment | RenderEmoji $.Context | RenderCodeBlock}}</div>
+						<div class="markup gt-font-14">{{RenderMarkdownToHtml ctx $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
 					<div class="flex-item-body">{{index .GetIssueInfos 1}}</div>
@@ -113,7 +116,6 @@
 				<div class="flex-item-body">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
 				<div class="flex-item-body">{{index .GetIssueInfos 2 | RenderEmoji $.Context}}</div>
 				{{end}}
-				<div class="flex-item-body">{{TimeSince .GetCreate ctx.Locale}}</div>
 			</div>
 			<div class="flex-item-trailing">
 				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "text grey gt-mr-2"}}
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index a7cfc8f163..93d8c9b49c 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -69,7 +69,6 @@
 }
 
 .flex-item .flex-item-body {
-  font-size: 13px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;