Improve issue sidebar UI (#32587)

1. remove duplicate dividers 2. align reviewer items 3. merge & remove unused CSS styles Before: <details> ![image](https://github.com/user-attachments/assets/1b3121ee-b5fa-4fe9-b0f2-344d96dc5fbc) ![image](https://github.com/user-attachments/assets/ba8b97e6-114d-488c-adee-48f6c7a3b580) </details> After: <details> ![image](https://github.com/user-attachments/assets/978eab3e-a5d7-4b68-90ce-079b61994d25) ![image](https://github.com/user-attachments/assets/a8b58a27-dd05-4c8d-be60-816439ce77c6) ![image](https://github.com/user-attachments/assets/b7e6a16c-bf98-4465-a805-9f4a642d366e) </details>
go-gitea · Nov 21, 2024 · 07373f1 · 07373f1
1 parent efb55cd
commit 07373f1
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 16 deletions.
diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
@@ -27,7 +27,7 @@
 						{{$previousExclusiveScope = $exclusiveScope}}
 						{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
 					{{end}}
-					<div class="divider"></div>
+					{{if and $data.RepoLabels $data.OrgLabels}}<div class="divider"></div>{{end}}
 					{{$previousExclusiveScope = "_no_scope"}}
 					{{range $data.OrgLabels}}
 						{{$exclusiveScope := .ExclusiveScope}}

diff --git a/templates/repo/issue/sidebar/milestone_list.tmpl b/templates/repo/issue/sidebar/milestone_list.tmpl
@@ -22,16 +22,15 @@
 				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
 				<div class="scrolling menu">
 					{{if $data.OpenMilestones}}
-						<div class="divider"></div>
 						<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_milestone"}}</div>
 						{{range $data.OpenMilestones}}
 							<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">
 								{{svg "octicon-milestone" 18}} {{.Name}}
 							</a>
 						{{end}}
 					{{end}}
+					{{if and $data.OpenMilestones $data.ClosedMilestones}}<div class="divider"></div>{{end}}
 					{{if $data.ClosedMilestones}}
-						<div class="divider"></div>
 						<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_milestone"}}</div>
 						{{range $data.ClosedMilestones}}
 							<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">

diff --git a/templates/repo/issue/sidebar/project_list.tmpl b/templates/repo/issue/sidebar/project_list.tmpl
@@ -20,16 +20,15 @@
 			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
 			<div class="scrolling menu">
 				{{if $data.OpenProjects}}
-					<div class="divider"></div>
 					<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
 					{{range $data.OpenProjects}}
 						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
 							{{svg .IconName 18}} {{.Title}}
 						</a>
 					{{end}}
 				{{end}}
+				{{if and $data.OpenProjects $data.ClosedProjects}}<div class="divider"></div>{{end}}
 				{{if $data.ClosedProjects}}
-					<div class="divider"></div>
 					<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}</div>
 					{{range $data.ClosedProjects}}
 						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">

diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -17,7 +17,7 @@
 					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_reviewers"}}">
 				</div>
 			{{end}}
-			<div class="scrolling menu">
+			<div class="scrolling menu flex-items-menu">
 				{{range $data.Reviewers}}
 					{{if .User}}
 						<a class="item muted {{if .Requested}}checked{{end}}" href="{{.User.HomeLink}}" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"

diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -1397,6 +1397,10 @@ table th[data-sortt-desc] .svg {
   gap: .5rem;
   min-width: 0;
 }
+.ui.dropdown .menu.flex-items-menu > .item img,
+.ui.dropdown .menu.flex-items-menu > .item svg {
+  margin: 0; /* use gap, but not margin */
+}
 
 .ui.dropdown.ellipsis-items-nowrap > .text {
   overflow: hidden;

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -53,11 +53,6 @@
 .issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark {
   visibility: hidden;
 }
-/* ideally, we should move these styles to ".ui.dropdown .menu.flex-items-menu > .item ...", could be done later */
-.issue-sidebar-combo .ui.dropdown .menu > .item > img,
-.issue-sidebar-combo .ui.dropdown .menu > .item > svg {
-  margin: 0;
-}
 
 .issue-content-right .dropdown > .menu {
   max-width: 270px;
@@ -79,11 +74,6 @@
   }
 }
 
-.repository .issue-content-right .filter.menu {
-  max-height: 500px;
-  overflow-x: auto;
-}
-
 .repository .filter.menu.labels .label-filter .menu .info {
   display: inline-block;
   padding: 0.5rem 0;