Various UI fixes (#25264) (#25431)

GiteaBot · silverwind · web-flow · commit ea00ed320d97 · 2023-06-22T10:19:38.000Z
Backport #25264 by @silverwind Numerous small UI fixes: - Fix double border in collaborator list - Fix system notice table background - Mute links in repo and org lists - Downsize projects edit buttons - Improve milestones and project list rendering - Condense milestone list entry to a single line of "metas" - Mute ".." button in repo files list <img width="899" alt="Screenshot 2023-06-14 at 21 19 23" src="https://github.com/go-gitea/gitea/assets/115237/40d70006-5f76-49ad-b43c-4343ec3311e1"> <img width="905" alt="Screenshot 2023-06-14 at 21 18 29" src="https://github.com/go-gitea/gitea/assets/115237/46ef39ea-ab26-452d-89b0-a55d0cfacfdb"> <img width="270" alt="Screenshot 2023-06-14 at 21 14 09" src="https://github.com/go-gitea/gitea/assets/115237/aa16e833-a03b-4231-bc7c-159a6a6bee19"> <img width="409" alt="Screenshot 2023-06-14 at 21 12 13" src="https://github.com/go-gitea/gitea/assets/115237/b5242d41-f87a-4837-b0cf-9cc4c1f43daf"> <img width="286" alt="Screenshot 2023-06-14 at 21 10 03" src="https://github.com/go-gitea/gitea/assets/115237/d0c36e47-651b-4d34-ad95-3d59474a7c3e"> <img width="928" alt="Screenshot 2023-06-14 at 21 05 24" src="https://github.com/go-gitea/gitea/assets/115237/fc3b713e-d252-40f5-b6ba-6e5a741ab500"> <img width="217" alt="Screenshot 2023-06-14 at 21 02 01" src="https://github.com/go-gitea/gitea/assets/115237/c4c33376-18d6-4820-aff5-f508f6d351a0"> <img width="79" alt="Screenshot 2023-06-14 at 20 42 43" src="https://github.com/go-gitea/gitea/assets/115237/034b5950-c0bf-473b-a2f7-0c27a0259f29"> <img width="607" alt="Screenshot 2023-06-14 at 21 00 42" src="https://github.com/go-gitea/gitea/assets/115237/fba2d3fd-bd3e-4daf-8b2f-530a1c99c8bc"> Co-authored-by: silverwind <me@silverwind.io>
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
@@ -3,7 +3,7 @@
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
-		<table class="ui attached basic select selectable table unstackable g-table-auto-ellipsis">
+		<table class="ui attached segment select selectable striped table unstackable g-table-auto-ellipsis">
 			<thead>
 				<tr>
 					<th></th>
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
@@ -45,7 +45,7 @@
 			</div>
 			{{if $.CanWriteProjects}}
 				<div class="column right aligned">
-					<div class="ui compact right small menu">
+					<div class="ui compact right mini menu">
 						<a class="item" href="{{$.Link}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -33,10 +33,14 @@
 					{{if .IsClosed}}
 						{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
 					{{else}}
-						{{svg "octicon-calendar"}}
+
 						{{if .Milestone.DeadlineString}}
-							<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .Milestone.DeadlineString}}</span>
+							<span{{if .IsOverdue}} class="text red"{{end}}>
+								{{svg "octicon-calendar"}}
+								{{DateTime "short" .Milestone.DeadlineString}}
+							</span>
 						{{else}}
+							{{svg "octicon-calendar"}}
 							{{$.locale.Tr "repo.milestones.no_due_date"}}
 						{{end}}
 					{{end}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -94,12 +94,13 @@
 									{{svg "octicon-clock" 14}}
 									{{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
 								{{else}}
-									{{svg "octicon-calendar" 14}}
 									{{if .DeadlineString}}
-										<span {{if .IsOverdue}}class="overdue"{{end}}>
+										<span{{if .IsOverdue}} class="text red"{{end}}>
+											{{svg "octicon-calendar" 14}}
 											{{DateTime "short" .DeadlineString}}
 										</span>
 									{{else}}
+										{{svg "octicon-calendar" 14}}
 										{{$.locale.Tr "repo.milestones.no_due_date"}}
 									{{end}}
 								{{end}}
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
@@ -49,7 +49,7 @@
 			</div>
 			{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
 				<div class="column right aligned">
-					<div class="ui compact right small menu">
+					<div class="ui compact right mini menu">
 						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
@@ -40,7 +40,7 @@
 	<tbody>
 		{{if .HasParentPath}}
 			<tr class="has-parent">
-				<td colspan="3">{{svg "octicon-reply"}}<a href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a></td>
+				<td colspan="3">{{svg "octicon-reply"}}<a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a></td>
 			</tr>
 		{{end}}
 		{{range $item := .Files}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
@@ -84,7 +84,7 @@
 					{{end}}
 					{{if ne .DeadlineUnix 0}}
 						<span class="due-date" data-tooltip-content="{{$.locale.Tr "repo.issues.due_date"}}">
-							<span{{if .IsOverdue}} class="overdue"{{end}}>
+							<span{{if .IsOverdue}} class="text red"{{end}}>
 								{{svg "octicon-calendar" 14 "gt-mr-2"}}
 								{{DateTime "short" .DeadlineUnix}}
 							</span>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
@@ -115,12 +115,13 @@
 											{{svg "octicon-clock" 14}}
 											{{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
 										{{else}}
-											{{svg "octicon-calendar" 14}}
 											{{if .DeadlineString}}
-												<span {{if .IsOverdue}}class="overdue"{{end}}>
+												<span{{if .IsOverdue}} class="text red"{{end}}>
+													{{svg "octicon-calendar" 14}}
 													{{DateTime "short" .DeadlineString}}
 												</span>
 											{{else}}
+												{{svg "octicon-calendar" 14}}
 												{{$.locale.Tr "repo.milestones.no_due_date"}}
 											{{end}}
 										{{end}}
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl
@@ -23,9 +23,9 @@
 								</button>
 							</form>
 						</div>
-						{{avatar $.Context . 28 "mini"}}
-						<div class="content">
-								<a href="{{.HomeLink}}">{{.Name}}</a>
+						<div class="content gt-df gt-ac gt-gap-3">
+							{{avatar $.Context . 28 "mini"}}
+							<a class="muted" href="{{.HomeLink}}">{{.Name}}</a>
 						</div>
 					</div>
 					{{end}}
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
@@ -23,8 +23,8 @@
 										{{else}}
 											<span class="icon">{{svg "octicon-repo"}}</span>
 										{{end}}
-										<a class="name" href="{{$repo.Link}}">{{$repo.OwnerName}}/{{$repo.Name}}</a>
-										<span>{{FileSize $repo.Size}}</span>
+										<a class="muted name" href="{{$repo.Link}}">{{$repo.OwnerName}}/{{$repo.Name}}</a>
+										<span class="text light-3">{{FileSize $repo.Size}}</span>
 										{{if $repo.IsFork}}
 											{{$.locale.Tr "repo.forked_from"}}
 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -869,6 +869,13 @@ a.label,
   border-color: var(--color-secondary);
 }
 
+.ui.table > tfoot > tr > th,
+.ui.table > tfoot > tr > td {
+  border-color: var(--color-secondary);
+  background: var(--color-box-body);
+  color: var(--color-text);
+}
+
 img.ui.avatar,
 .ui.avatar img,
 .ui.avatar svg {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -1952,10 +1952,6 @@
   line-height: 2em;
 }
 
-.repository.settings.collaboration .collaborator.list > .item:not(:last-child) {
-  border-bottom: 1px solid var(--color-secondary);
-}
-
 .repository.settings.collaboration #repo-collab-form #search-user-box .results {
   left: 7px;
 }
diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
@@ -135,10 +135,6 @@
   margin-right: -4px;
 }
 
-.issue.list > .item .desc .overdue {
-  color: var(--color-red);
-}
-
 .issue.list .branches {
   display: inline-flex;
   padding: 0 4px;
diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css
@@ -44,10 +44,6 @@
   gap: 8px;
 }
 
-.milestone-toolbar .group .overdue {
-  color: var(--color-red);
-}
-
 .milestone-toolbar .group > a {
   font-size: 15px;
   color: var(--color-text-light-2);

Original file line number	Diff line number	Diff line change
`@@ -1952,10 +1952,6 @@`
`1952`	`1952`	`line-height: 2em;`
`1953`	`1953`	`}`
`1954`	`1954`
`1955`		`-.repository.settings.collaboration .collaborator.list > .item:not(:last-child) {`
`1956`		`- border-bottom: 1px solid var(--color-secondary);`
`1957`		`-}`
`1958`		`-`
`1959`	`1955`	`.repository.settings.collaboration #repo-collab-form #search-user-box .results {`
`1960`	`1956`	`left: 7px;`
`1961`	`1957`	`}`