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

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index 37f3f04004b9c738860c84deb4fbe1f614da7e07..f9087a571444646dabd541bcb2c215e74d66c25e 100644 (file)
--- 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 aad44f57dff4e763ff3e3823e9e4ad1e3e680c6d..6bfd8b12be710a117c7a7f31e9b1de471c0f4002 100644 (file)
--- 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 1eb480845b0d4dccfad72510356101233101175e..402eb7b34b43122fbd588db283c59be4f664ebe6 100644 (file)
--- 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 ec22fbba9e21ca1dd53061ee0fba29fa17cb2453..c73f78ebfe035f97988bb49911e04d3eac0a015d 100644 (file)
--- 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 {