Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
wxiaoguang 2024-11-21 11:31:54 +08:00 committed by GitHub
parent efb55cd8ef
commit 07373f1d5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 8 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/issue/sidebar/label_list.tmpl
View File

@ -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}}

3
templates/repo/issue/sidebar/milestone_list.tmpl
View File

@ -22,7 +22,6 @@
<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}}">
@ -30,8 +29,8 @@
</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}}">

3
templates/repo/issue/sidebar/project_list.tmpl
View File

@ -20,7 +20,6 @@
<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}}">
@ -28,8 +27,8 @@
</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}}">

2
templates/repo/issue/sidebar/reviewer_list.tmpl
View File

@ -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}}"

4
web_src/css/base.css
View File

@ -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;

10
web_src/css/repo.css
View File

@ -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;