Various UI fixes (#25264)

silverwind · web-flow · commit 656d3cc71973 · 2023-06-21T21:59:49.000-04:00
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
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
@@ -1947,10 +1947,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
`@@ -1947,10 +1947,6 @@`
`1947`	`1947`	`line-height: 2em;`
`1948`	`1948`	`}`
`1949`	`1949`
`1950`		`-.repository.settings.collaboration .collaborator.list > .item:not(:last-child) {`
`1951`		`- border-bottom: 1px solid var(--color-secondary);`
`1952`		`-}`
`1953`		`-`
`1954`	`1950`	`.repository.settings.collaboration #repo-collab-form #search-user-box .results {`
`1955`	`1951`	`left: 7px;`
`1956`	`1952`	`}`