Actions list enhancements (#25601)

Various small enhancements to the actions list. Before and after:

<img width="1264" alt="Screenshot 2023-06-30 at 00 11 40"
src="https://github.com/go-gitea/gitea/assets/115237/bb4162ee-cdcf-4a73-b05e-f9521562edbb">
<img width="1264" alt="Screenshot 2023-06-30 at 00 09 51"
src="https://github.com/go-gitea/gitea/assets/115237/52a70ea9-4bb3-406e-904b-0fdaafde9582">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

9 files changed, 50 insertions, 35 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 6d0f29eddb..f10d6620ff 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -3463,7 +3463,7 @@ runners.reset_registration_token_success = Runner registration token reset succe
 
 runs.all_workflows = All Workflows
 runs.commit = Commit
-runs.pushed_by = Pushed by
+runs.pushed_by = pushed by
 runs.invalid_workflow_helper = Workflow config file is invalid. Please check your config file: %s
 runs.no_matching_runner_helper = No matching runner: %s
 runs.actor = Actor
diff --git a/templates/package/shared/list.tmpl b/templates/package/shared/list.tmpl
index 3d14eda3ef..6ac930e5c7 100644
--- a/templates/package/shared/list.tmpl
+++ b/templates/package/shared/list.tmpl
@@ -16,12 +16,12 @@
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
 		{{range .PackageDescriptors}}
 			<li class="item gt-df gt-py-3">
-				<div class="issue-item-main gt-f1 gt-fc gt-df">
+				<div class="issue-item-main">
 					<div class="issue-item-top-row">
 						<a class="title" href="{{.FullWebLink}}">{{.Package.Name}}</a>
 						<span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span>
 					</div>
-					<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
+					<div class="desc issue-item-bottom-row">
 						{{$timeStr := TimeSinceUnix .Version.CreatedUnix $.locale}}
 						{{$hasRepositoryAccess := false}}
 						{{if .Repository}}
diff --git a/templates/package/shared/versionlist.tmpl b/templates/package/shared/versionlist.tmpl
index 23cd0bfcc0..9fc53d806c 100644
--- a/templates/package/shared/versionlist.tmpl
+++ b/templates/package/shared/versionlist.tmpl
@@ -22,11 +22,11 @@
 	<div class="ui {{if .PackageDescriptors}}issue list{{end}}">
 		{{range .PackageDescriptors}}
 			<li class="item gt-df gt-py-3">
-				<div class="issue-item-main gt-f1 gt-fc gt-df">
+				<div class="issue-item-main">
 					<div class="issue-item-top-row">
 						<a class="title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a>
 					</div>
-					<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
+					<div class="desc issue-item-bottom-row">
 						{{$.locale.Tr "packages.published_by" (TimeSinceUnix .Version.CreatedUnix $.locale) .Creator.HomeLink (.Creator.GetDisplayName | Escape) | Safe}}
 					</div>
 				</div>
diff --git a/templates/repo/actions/list.tmpl b/templates/repo/actions/list.tmpl
index 46cbb34670..f4f0aa9d6d 100644
--- a/templates/repo/actions/list.tmpl
+++ b/templates/repo/actions/list.tmpl
@@ -6,7 +6,6 @@
 			<div class="four wide column">
 				<div class="ui fluid vertical menu">
 					<a class="item{{if not $.CurWorkflow}} active{{end}}" href="{{$.Link}}?actor={{$.CurActor}}&status={{$.CurStatus}}">{{.locale.Tr "actions.runs.all_workflows"}}</a>
-					<div class="divider"></div>
 					{{range .workflows}}
 						<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="{{$.Link}}?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
 							{{if .ErrMsg}}
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
index bfd5aabe55..ce664eb458 100644
--- a/templates/repo/actions/runs_list.tmpl
+++ b/templates/repo/actions/runs_list.tmpl
@@ -6,31 +6,34 @@
 	</div>
 	{{end}}
 	{{range .Runs}}
-		<li class="item gt-df gt-py-4">
+		<li class="item gt-df gt-py-3">
 			<div class="issue-item-left issue-item-icon gt-df gt-items-start">
 				{{template "repo/actions/status" (dict "status" .Status.String "locale" $.locale)}}
 			</div>
-			<div class="issue-item-main action-item-main gt-f1 gt-fc gt-df gt-mr-3">
-				<div class="issue-item-top-row gt-mb-2">
+			<div class="issue-item-main action-item-main">
+				<div class="issue-item-top-row">
 					<a class="index gt-no-underline title action-item-title" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{- .Title -}}
 					</a>
 				</div>
-				<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw">
-					<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>: {{$.locale.Tr "actions.runs.commit"}}
-					<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>{{$.locale.Tr "actions.runs.pushed_by"}} {{.TriggerUser.GetDisplayName}}
-					<span class="ui label">
-						{{if .RefLink}}
-							<a href="{{.RefLink}}">{{.PrettyRef}}</a>
-						{{else}}
-							{{.PrettyRef}}
-						{{end}}
-					</span>
+				<div class="desc issue-item-bottom-row">
+					<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>
+					: {{$.locale.Tr "actions.runs.commit"}}
+					<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>
+					{{$.locale.Tr "actions.runs.pushed_by"}}
+					<a href="{{.TriggerUser.HomeLink}}">{{.TriggerUser.GetDisplayName}}</a>
 				</div>
 			</div>
-			<div class="issue-item-right">
-				<div>{{TimeSinceUnix .Updated $.locale}}</div>
-				<div>{{.Duration}}</div>
+			<div class="action-item-center">
+				{{if .RefLink}}
+					<a class="ui label gt-px-2 gt-mx-0" href="{{.RefLink}}">{{.PrettyRef}}</a>
+				{{else}}
+					<span class="ui label gt-px-2 gt-mx-0">{{.PrettyRef}}</span>
+				{{end}}
+			</div>
+			<div class="action-item-right">
+				<div>{{svg "octicon-calendar" 16 "gt-mr-2"}}{{TimeSinceUnix .Updated $.locale}}</div>
+				<div>{{svg "octicon-stopwatch" 16 "gt-mr-2"}}{{.Duration}}</div>
 			</div>
 		</li>
 	{{end}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 192911d13a..6d61b9fa99 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -10,7 +10,7 @@
 					{{template "shared/issueicon" .}}
 				</div>
 			</div>
-			<div class="issue-item-main gt-f1 gt-fc gt-df">
+			<div class="issue-item-main">
 				<div class="issue-item-top-row">
 					<a class="title gt-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
 					{{if .IsPull}}
@@ -24,7 +24,7 @@
 						{{end}}
 					</span>
 				</div>
-				<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
+				<div class="desc issue-item-bottom-row">
 					<a class="index gt-ml-0 gt-mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{if eq $.listType "dashboard"}}
 							{{.Repo.FullName}}#{{.Index}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index ca400f270b..542fb1fd74 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1633,6 +1633,7 @@ i.icon.centerlock {
 
 .ui.label {
   padding: 0.3em 0.5em;
+  transition: none;
 }
 
 .ui.label,
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index b20fd1a80e..7f9e49831a 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -17,15 +17,24 @@
 }
 
 .issue.list > .item .issue-item-main {
-  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.issue.list > .item .action-item-main {
-  width: 80%;
+.issue.list > .item .action-item-center {
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 12px;
 }
 
-.issue.list > .item .issue-item-right {
-  width: 15%;
+.issue.list > .item .action-item-right {
+  flex: 0 0 15%;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  color: var(--color-text-light);
 }
 
 .issue.list > .item .issue-item-top-row {
@@ -52,6 +61,10 @@
 
 .issue.list > .item .issue-item-bottom-row {
   font-size: 13px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: .125rem 0;
 }
 
 .issue.list > .item .title {
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index c247967161..f244720fe0 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -20,12 +20,12 @@
       </div>
       <div class="action-commit-summary">
         {{ run.commit.localeCommit }}
-        <a :href="run.commit.link">{{ run.commit.shortSHA }}</a>
+        <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
+        {{ run.commit.localePushedBy }}
+        <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
         <span class="ui label" v-if="run.commit.shortSHA">
           <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
         </span>
-        {{ run.commit.localePushedBy }}
-        <a :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
       </div>
     </div>
     <div class="action-view-body">
@@ -507,7 +507,6 @@ export function initRepositoryActionView() {
 
 .action-view-header {
   margin-top: 8px;
-  margin-bottom: 4px;
 }
 
 .action-info-summary {
@@ -522,14 +521,14 @@ export function initRepositoryActionView() {
 
 .action-info-summary-title-text {
   font-size: 20px;
-  margin: 0 0 0 5px;
+  margin: 0 0 0 8px;
   flex: 1;
 }
 
 .action-commit-summary {
   display: flex;
   gap: 5px;
-  margin: 5px 0 0 25px;
+  margin: 0 0 0 28px;
 }
 
 .action-view-left, .action-view-right {