Skip to content

Commit e00a355

Browse files
silverwindzeripathtechknowlogick
authored
Dropdowns, Labels fixes and more CSS tweaks (#13733)
* Dropdowns and Labels fixes - Rework dropdown, menu and label styles - Improve issue sidebar milestone and label sections - Fix archived repo and private org badge - Move more colors to CSS vars - Move issue number to end of title on issue page * more dropdown fixes * fix basic blue labels - fixes #13731 * improve class setting on svg Co-authored-by: zeripath <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent da4bb6f commit e00a355

17 files changed

+412
-516
lines changed

‎templates/explore/repo_list.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
<a class="name" href="{{.Link}}">
99
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
1010
</a>
11-
{{if .IsArchived}}<span class="ui compact label">{{$.i18n.Tr "repo.desc.archived"}}</span>{{end}}
11+
{{if .IsArchived}}
12+
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
13+
{{end}}
1214
{{if .IsTemplate}}
1315
{{if .IsPrivate}}
1416
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>

‎templates/org/home.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{template "base/head" .}}
2-
<div class="organization profile">
2+
<div class="organization profile mt-5">
33
{{/* overflow: auto is the clearfix - this avoids the image going beyond
44
the container where it is supposed to stay inside. */}}
55
<div class="ui container" style="overflow: auto">
@@ -8,8 +8,8 @@
88
<div class="ui header">
99
{{.Org.DisplayName}}
1010
<span class="org-visibility">
11-
{{if .Org.Visibility.IsLimited}}<div class="ui large orange horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
12-
{{if .Org.Visibility.IsPrivate}}<div class="ui large red horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
11+
{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
12+
{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
1313
</span>
1414
{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear"}}</a>{{end}}
1515
</div>

‎templates/repo/header.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
{{end}}
2929
{{end}}
3030
{{end}}
31-
{{if .IsArchived}}<span class="ui compact label">{{$.i18n.Tr "repo.desc.archived"}}</span>{{end}}
31+
{{if .IsArchived}}
32+
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
33+
{{end}}
3234
{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}}
3335
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
3436
{{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}}

‎templates/repo/home.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
</div>
2424
{{end}}
2525
</div>
26-
<div class="ui" id="repo-topics">
27-
{{range .Topics}}<a class="ui repo-topic small label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
28-
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
26+
<div class="mt-3" id="repo-topics">
27+
{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
28+
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
2929
</div>
3030
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
31-
<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
31+
<div class="ui repo-topic-edit grid form" id="topic_edit" style="display:none">
3232
<div class="fourteen wide column">
3333
<div class="field">
3434
<div class="ui fluid multiple search selection dropdown">

‎templates/repo/issue/milestone_issues.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
{{if not .Repository.IsArchived}}
1515
<div class="column right aligned">
1616
{{if or .CanWriteIssues .CanWritePulls}}
17-
<a class="ui grey button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
17+
<a class="ui button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
1818
{{end}}
19-
<a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
19+
<a class="ui primary button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
2020
</div>
2121
{{end}}
2222
</div>

‎templates/repo/issue/new_form.tmpl

Lines changed: 69 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -99,21 +99,25 @@
9999
{{if .OpenMilestones}}
100100
<div class="divider"></div>
101101
<div class="header">
102-
{{svg "octicon-milestone"}}
103102
{{.i18n.Tr "repo.issues.new.open_milestone"}}
104103
</div>
105104
{{range .OpenMilestones}}
106-
<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
105+
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
106+
{{svg "octicon-milestone" 16 "mr-2"}}
107+
{{.Name}}
108+
</a>
107109
{{end}}
108110
{{end}}
109111
{{if .ClosedMilestones}}
110112
<div class="divider"></div>
111113
<div class="header">
112-
{{svg "octicon-milestone"}}
113114
{{.i18n.Tr "repo.issues.new.closed_milestone"}}
114115
</div>
115116
{{range .ClosedMilestones}}
116-
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
117+
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
118+
{{svg "octicon-milestone" 16 "mr-2"}}
119+
{{.Name}}
120+
</a>
117121
{{end}}
118122
{{end}}
119123
{{end}}
@@ -123,7 +127,10 @@
123127
<span class="no-select item {{if .Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
124128
<div class="selected">
125129
{{if .Milestone}}
126-
<a class="item" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}"> {{.Milestone.Name}}</a>
130+
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
131+
{{svg "octicon-milestone" 18 "mr-3"}}
132+
{{.Milestone.Name}}
133+
</a>
127134
{{end}}
128135
</div>
129136
</div>
@@ -133,61 +140,66 @@
133140

134141
<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
135142
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
136-
<span class="text">
137-
<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
138-
{{if .HasIssuesOrPullsWritePermission}}
139-
{{svg "octicon-gear"}}
140-
{{end}}
141-
</span>
142-
<div class="menu">
143-
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
144-
{{if or .OpenProjects .ClosedProjects}}
145-
<div class="ui icon search input">
146-
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
147-
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
148-
</div>
149-
{{end}}
150-
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
151-
{{if and (not .OpenProjects) (not .ClosedProjects)}}
152-
<div class="header" style="text-transform: none;font-size:14px;">
153-
{{.i18n.Tr "repo.issues.new.no_items"}}
154-
</div>
155-
{{else}}
156-
{{if .OpenProjects}}
157-
<div class="divider"></div>
158-
<div class="header">
159-
{{svg "octicon-project"}}
160-
{{.i18n.Tr "repo.issues.new.open_projects"}}
161-
</div>
162-
{{range .OpenProjects}}
163-
<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</div>
164-
{{end}}
165-
{{end}}
166-
{{if .ClosedProjects}}
167-
<div class="divider"></div>
168-
<div class="header">
169-
{{svg "octicon-project"}}
170-
{{.i18n.Tr "repo.issues.new.closed_projects"}}
171-
</div>
172-
{{range .ClosedProjects}}
173-
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</a>
174-
{{end}}
175-
{{end}}
176-
{{end}}
177-
</div>
143+
<span class="text">
144+
<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
145+
{{if .HasIssuesOrPullsWritePermission}}
146+
{{svg "octicon-gear"}}
147+
{{end}}
148+
</span>
149+
<div class="menu">
150+
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
151+
{{if or .OpenProjects .ClosedProjects}}
152+
<div class="ui icon search input">
153+
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
154+
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
155+
</div>
156+
{{end}}
157+
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
158+
{{if and (not .OpenProjects) (not .ClosedProjects)}}
159+
<div class="header" style="text-transform: none;font-size:14px;">
160+
{{.i18n.Tr "repo.issues.new.no_items"}}
161+
</div>
162+
{{else}}
163+
{{if .OpenProjects}}
164+
<div class="divider"></div>
165+
<div class="header">
166+
{{.i18n.Tr "repo.issues.new.open_projects"}}
167+
</div>
168+
{{range .OpenProjects}}
169+
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
170+
{{svg "octicon-project" 18 "mr-3"}}
171+
{{.Title}}
172+
</a>
173+
{{end}}
174+
{{end}}
175+
{{if .ClosedProjects}}
176+
<div class="divider"></div>
177+
<div class="header">
178+
{{.i18n.Tr "repo.issues.new.closed_projects"}}
179+
</div>
180+
{{range .ClosedProjects}}
181+
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
182+
{{svg "octicon-project" 18 "mr-3"}}
183+
{{.Title}}
184+
</a>
185+
{{end}}
186+
{{end}}
187+
{{end}}
188+
</div>
178189
</div>
179190
<div class="ui select-project list">
180-
<span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
181-
<div class="selected">
182-
{{if .Project}}
183-
<a class="item" href="{{.RepoLink}}/projects/{{.Project.ID}}">{{.Project.Title}}</a>
184-
{{end}}
185-
</div>
191+
<span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
192+
<div class="selected">
193+
{{if .Project}}
194+
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
195+
{{svg "octicon-project" 18 "mr-3"}}
196+
{{.Project.Title}}
197+
</a>
198+
{{end}}
199+
</div>
186200
</div>
187201
{{end}}
188-
189202
<div class="ui divider"></div>
190-
191203
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
192204
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
193205
<span class="text">
@@ -204,7 +216,7 @@
204216
</div>
205217
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
206218
{{range .Assignees}}
207-
<a class="item" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
219+
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
208220
<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
209221
<span class="text">
210222
<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
@@ -218,7 +230,7 @@
218230
{{.i18n.Tr "repo.issues.new.no_assignees"}}
219231
</span>
220232
{{range .Assignees}}
221-
<a style="padding: 5px;color:rgba(0, 0, 0, 0.87);" class="hide item" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
233+
<a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
222234
<img class="ui avatar image" src="{{.RelAvatarLink}}" style="vertical-align: middle;">&nbsp;{{.GetDisplayName}}
223235
</a>
224236
{{end}}

‎templates/repo/issue/view_content/sidebar.tmpl

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
{{range .PullReviewers}}
5656
<div class="item mb-2">
5757
{{if .User}}
58-
<a href="{{.User.HomeLink}}">
59-
<img class="ui avatar image mr-2" src="{{.User.RelAvatarLink}}">
58+
<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
59+
<img class="ui avatar image mr-3" src="{{.User.RelAvatarLink}}">
6060
{{.User.GetDisplayName}}
6161
</a>
6262
{{else if .Team}}
@@ -153,21 +153,25 @@
153153
{{if .OpenMilestones}}
154154
<div class="divider"></div>
155155
<div class="header">
156-
{{svg "octicon-milestone"}}
157156
{{.i18n.Tr "repo.issues.new.open_milestone"}}
158157
</div>
159158
{{range .OpenMilestones}}
160-
<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
159+
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
160+
{{svg "octicon-milestone" 16 "mr-2"}}
161+
{{.Name}}
162+
</a>
161163
{{end}}
162164
{{end}}
163165
{{if .ClosedMilestones}}
164166
<div class="divider"></div>
165167
<div class="header">
166-
{{svg "octicon-milestone"}}
167168
{{.i18n.Tr "repo.issues.new.closed_milestone"}}
168169
</div>
169170
{{range .ClosedMilestones}}
170-
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
171+
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
172+
{{svg "octicon-milestone" 16 "mr-2"}}
173+
{{.Name}}
174+
</a>
171175
{{end}}
172176
{{end}}
173177
{{end}}
@@ -177,14 +181,17 @@
177181
<span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
178182
<div class="selected">
179183
{{if .Issue.Milestone}}
180-
<a class="item" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}"> {{.Issue.Milestone.Name}}</a>
184+
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
185+
{{svg "octicon-milestone" 18 "mr-3"}}
186+
{{.Issue.Milestone.Name}}
187+
</a>
181188
{{end}}
182189
</div>
183190
</div>
184191

185192
{{if .IsProjectsEnabled}}
186193
<div class="ui divider"></div>
187-
194+
188195
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
189196
<span class="text">
190197
<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
@@ -195,21 +202,25 @@
195202
{{if .OpenProjects}}
196203
<div class="divider"></div>
197204
<div class="header">
198-
{{svg "octicon-project"}}
199205
{{.i18n.Tr "repo.issues.new.open_projects"}}
200206
</div>
201207
{{range .OpenProjects}}
202-
<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</div>
208+
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
209+
{{svg "octicon-project" 18 "mr-3"}}
210+
{{.Title}}
211+
</a>
203212
{{end}}
204213
{{end}}
205214
{{if .ClosedProjects}}
206215
<div class="divider"></div>
207216
<div class="header">
208-
{{svg "octicon-project"}}
209217
{{.i18n.Tr "repo.issues.new.closed_projects"}}
210218
</div>
211219
{{range .ClosedProjects}}
212-
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</a>
220+
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
221+
{{svg "octicon-project" 18 "mr-3"}}
222+
{{.Title}}
223+
</a>
213224
{{end}}
214225
{{end}}
215226
</div>
@@ -218,7 +229,10 @@
218229
<span class="no-select item {{if .Issue.ProjectID}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
219230
<div class="selected">
220231
{{if .Issue.ProjectID}}
221-
<a class="item" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">{{svg "octicon-project"}} {{.Issue.Project.Title}}</a>
232+
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">
233+
{{svg "octicon-project" 18 "mr-3"}}
234+
{{.Issue.Project.Title}}
235+
</a>
222236
{{end}}
223237
</div>
224238
</div>
@@ -264,9 +278,9 @@
264278
<span class="no-select item {{if .Issue.Assignees}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_assignees"}}</span>
265279
<div class="selected">
266280
{{range .Issue.Assignees}}
267-
<div class="item" style="margin-bottom: 10px;">
268-
<a href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
269-
<img class="ui avatar image mr-2" src="{{.RelAvatarLink}}">
281+
<div class="item">
282+
<a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
283+
<img class="ui avatar image mr-3" src="{{.RelAvatarLink}}">
270284
{{.GetDisplayName}}
271285
</a>
272286
</div>

0 commit comments

Comments
 (0)