From e4b2bdfbc0a28dcb4272de923b547a19131abd22 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 23 Aug 2023 12:23:30 +0800
Subject: [PATCH] More improvements for the "flex list" and the dashboard list
 (#26675)

Follow #26649 and #25790 and add one more example (text truncate) in the devtest page
---
 templates/devtest/flex-list.tmpl    |  1 +
 templates/user/dashboard/feeds.tmpl | 34 +++++++++++++----------------
 web_src/css/dashboard.css           |  4 ----
 web_src/css/shared/flex-list.css    |  4 +++-
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index 37f3f04004b..f9087a57144 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -48,6 +48,7 @@
 					</div>
 					<div class="flex-item-body">
 						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
+						<span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
 					</div>
 				</div>
 				<div class="flex-item-trailing">
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index aad44f57dff..6bfd8b12be7 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -80,25 +80,21 @@
 					{{end}}
 				</div>
 				{{if or (eq .GetOpType 5) (eq .GetOpType 18)}}
-					<div class="gt-pl-5">
-						{{$push := ActionContent2Commits .}}
-						{{$repoLink := .GetRepoLink}}
-						{{range $push.Commits}}
-							{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
-							<div class="flex-item">
-								<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
-								<a class="commit-id" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
-								<span class="text truncate light grey">
-									{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
-								</span>
-							</div>
-						{{end}}
-						{{if and (gt $push.Len 1) $push.CompareURL}}
-							<div class="flex-item">
-								<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a>
-							</div>
-						{{end}}
-					</div>
+					{{$push := ActionContent2Commits .}}
+					{{$repoLink := .GetRepoLink}}
+					{{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}}
+					{{if and (gt $push.Len 1) $push.CompareURL}}
+						<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a>
+					{{end}}
 				{{else if eq .GetOpType 6}}
 					<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span>
 				{{else if eq .GetOpType 7}}
diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index 1eb480845b0..402eb7b34b4 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -96,10 +96,6 @@
   }
 }
 
-.feeds .commit-id {
-  font-family: var(--fonts-monospace);
-}
-
 .feeds code {
   padding: 2px 4px;
   border-radius: 3px;
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index ec22fbba9e2..c73f78ebfe0 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -29,7 +29,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  flex-basis: 60%;
+  flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
+  min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
 .flex-item-header {
@@ -66,6 +67,7 @@
   font-size: 16px;
   font-weight: var(--font-weight-semibold);
   word-break: break-word;
+  min-width: 0;
 }
 
 .flex-item .flex-item-title a {