Skip to content

Commit ed091d6

Browse files
wxiaoguangGiteaBot
wxiaoguang
and
GiteaBot
committed
Use flex to align SVG and text (go-gitea#25163)
The code can be as simple as: ```html <div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div> <div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div> <div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div> ``` ![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465) --------- Co-authored-by: Giteabot <[email protected]>
1 parent bfd3eb9 commit ed091d6

File tree

17 files changed

+247
-131
lines changed

17 files changed

+247
-131
lines changed

‎templates/devtest/gitea-ui.tmpl‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,106 @@
117117
<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
118118
</div>
119119

120+
<div>
121+
<h1>SVG alignment</h1>
122+
123+
<h2>Text with SVG</h2>
124+
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
125+
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
126+
<div class="flex-items-block">
127+
<div class="item">{{svg "octicon-alert"}} flex every line</div>
128+
<div class="item">{{svg "octicon-alert"}} flex every item</div>
129+
</div>
130+
131+
<h2>Button with SVG</h2>
132+
<div>
133+
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
134+
<div class="ui labeled button">
135+
<button class="ui basic button">labeled button</button>
136+
<a class="ui basic label">123</a>
137+
</div>
138+
</div>
139+
140+
<h2>Input with SVG</h2>
141+
<div>
142+
<div class="ui icon search input">
143+
<i class="icon">{{svg "octicon-search"}}</i>
144+
<input type="text" placeholder="place holder">
145+
</div>
146+
</div>
147+
148+
<h2>Dropdown with SVG</h2>
149+
<div>
150+
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
151+
<span class="text">simple</span>
152+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
153+
<div class="menu">
154+
<div class="item">item</div>
155+
</div>
156+
</div>
157+
<div class="ui button dropdown">
158+
<span class="text">button dropdown</span>
159+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
160+
<div class="menu">
161+
<div class="item">item</div>
162+
</div>
163+
</div>
164+
<div class="ui search selection dropdown">
165+
<span class="text">search ...</span>
166+
<input name="value" class="search">
167+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
168+
{{svg "octicon-x" 14 "remove icon"}}
169+
<div class="menu">
170+
<div class="item">item</div>
171+
</div>
172+
</div>
173+
<div class="ui multiple selection dropdown">
174+
<input class="hidden" value="1">
175+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
176+
{{svg "octicon-x" 14 "remove icon"}}
177+
<div class="default text">empty multiple dropdown</div>
178+
<div class="menu">
179+
<div class="item">item</div>
180+
</div>
181+
</div>
182+
<div class="ui multiple clearable search selection dropdown">
183+
<input type="hidden" value="1">
184+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
185+
{{svg "octicon-x" 14 "remove icon"}}
186+
<div class="default text">clearable search dropdown</div>
187+
<div class="menu">
188+
<div class="item" data-value="1">item</div>
189+
</div>
190+
</div>
191+
<div class="ui buttons">
192+
<button class="ui button">Button with Dropdown</button>
193+
<div class="ui dropdown button icon">
194+
{{svg "octicon-triangle-down"}}
195+
<div class="menu">
196+
<div class="item">item</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
202+
<div>
203+
<div class="ui dropdown mini button">
204+
<span class="text">small dropdown</span>
205+
{{svg "octicon-triangle-down" 12 "dropdown icon"}}
206+
<div class="menu">
207+
<div class="item">item</div>
208+
</div>
209+
</div>
210+
<div class="ui dropdown large button">
211+
<span class="text">large dropdown</span>
212+
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
213+
<div class="menu">
214+
<div class="item">item</div>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
120220
<div>
121221
<h1>ComboMarkdownEditor</h1>
122222
<div>ps: no JS code attached, so just a layout</div>

‎templates/repo/commits_list_small.tmpl‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
<div class="singular-commit" id="{{$tag}}">
77
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
88
{{if .User}}
9-
<a href="{{.User.HomeLink}}">
10-
{{avatar $.root.Context .User}}
11-
</a>
9+
<a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a>
1210
{{else}}
1311
{{avatarByEmail $.root.Context .Author.Email .Author.Name}}
1412
{{end}}

‎templates/repo/diff/compare.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</div>
4545
<div class="menu">
4646
<div class="ui icon search input">
47-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
47+
<i class="icon">{{svg "octicon-filter" 16}}</i>
4848
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
4949
</div>
5050
<div class="header">
@@ -113,7 +113,7 @@
113113
</div>
114114
<div class="menu">
115115
<div class="ui icon search input">
116-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
116+
<i class="icon">{{svg "octicon-filter" 16}}</i>
117117
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
118118
</div>
119119
<div class="header">

‎templates/repo/issue/branch_selector_field.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
<div class="menu">
1414
<div class="ui icon search input">
15-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
15+
<i class="icon">{{svg "octicon-filter" 16}}</i>
1616
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
1717
</div>
1818
<div class="header">

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

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
<div class="content">
2323
{{template "repo/pulls/status" .}}
2424
{{$showGeneralMergeForm := false}}
25-
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
25+
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
2626
{{if .Issue.PullRequest.HasMerged}}
2727
{{if .IsPullBranchDeletable}}
2828
<div class="item item-section text gt-f1">
2929
<div class="item-section-left">
3030
<h3 class="gt-mb-3">
31-
{{$.locale.Tr "repo.pulls.merged_success"}}
31+
{{$.locale.Tr "repo.pulls.merged_success"}}
3232
</h3>
3333
<div class="merge-section-info">
3434
{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
@@ -58,93 +58,91 @@
5858
{{end}}
5959
</div>
6060
{{else if .IsPullFilesConflicted}}
61-
<div class="item text">
61+
<div class="item">
6262
{{svg "octicon-x"}}
6363
{{$.locale.Tr "repo.pulls.files_conflicted"}}
64-
<ul>
65-
{{range .ConflictedFiles}}
66-
<li>{{.}}</li>
67-
{{end}}
68-
</ul>
6964
</div>
65+
<ul>
66+
{{range .ConflictedFiles}}
67+
<li>{{.}}</li>
68+
{{end}}
69+
</ul>
7070
{{else if .IsPullRequestBroken}}
7171
<div class="item">
72-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
72+
{{svg "octicon-x"}}
7373
{{$.locale.Tr "repo.pulls.data_broken"}}
7474
</div>
7575
{{else if .IsPullWorkInProgress}}
76-
<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
77-
<div>
78-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
76+
<div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
77+
<div class="item-section-left flex-text-inline gt-f1">
78+
{{svg "octicon-x"}}
7979
{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
8080
</div>
81-
<div>
82-
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
83-
<button class="ui compact button">
84-
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
85-
</button>
86-
{{end}}
87-
</div>
81+
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
82+
<button class="ui compact button">
83+
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
84+
</button>
85+
{{end}}
8886
</div>
8987
{{template "repo/issue/view_content/update_branch_by_merge" $}}
9088
{{else if .Issue.PullRequest.IsChecking}}
9189
<div class="item">
92-
<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
90+
{{svg "octicon-sync"}}
9391
{{$.locale.Tr "repo.pulls.is_checking"}}
9492
</div>
9593
{{else if .Issue.PullRequest.IsAncestor}}
9694
<div class="item">
97-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
95+
{{svg "octicon-alert"}}
9896
{{$.locale.Tr "repo.pulls.is_ancestor"}}
9997
</div>
10098
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
10199
{{if .IsBlockedByApprovals}}
102100
<div class="item">
103-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
104-
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
101+
{{svg "octicon-x"}}
102+
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
105103
</div>
106104
{{else if .IsBlockedByRejection}}
107105
<div class="item">
108-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
106+
{{svg "octicon-x"}}
109107
{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
110108
</div>
111109
{{else if .IsBlockedByOfficialReviewRequests}}
112110
<div class="item">
113-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
111+
{{svg "octicon-x"}}
114112
{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
115113
</div>
116114
{{else if .IsBlockedByOutdatedBranch}}
117115
<div class="item">
118-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
119-
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
116+
{{svg "octicon-x"}}
117+
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
120118
</div>
121119
{{else if .IsBlockedByChangedProtectedFiles}}
122120
<div class="item">
123-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
121+
{{svg "octicon-x"}}
124122
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
125-
<ul>
126-
{{range .ChangedProtectedFiles}}
127-
<li>{{.}}</li>
128-
{{end}}
129-
</ul>
130123
</div>
124+
<ul>
125+
{{range .ChangedProtectedFiles}}
126+
<li>{{.}}</li>
127+
{{end}}
128+
</ul>
131129
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
132130
<div class="item">
133-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
131+
{{svg "octicon-x"}}
134132
{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
135133
</div>
136134
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
137135
<div class="item">
138-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
136+
{{svg "octicon-x"}}
139137
{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
140138
</div>
141139
{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
142140
<div class="item">
143-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
141+
{{svg "octicon-x"}}
144142
{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
145143
</div>
146144
<div class="item">
147-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
145+
{{svg "octicon-unlock"}}
148146
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
149147
</div>
150148
{{end}}
@@ -158,23 +156,23 @@
158156
{{if $canMergeNow}}
159157
{{if $notAllOverridableChecksOk}}
160158
<div class="item">
161-
<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
159+
{{svg "octicon-dot-fill"}}
162160
{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
163161
</div>
164162
{{else}}
165163
<div class="item">
166-
<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
164+
{{svg "octicon-check"}}
167165
{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
168166
</div>
169167
{{end}}
170168
{{if .WillSign}}
171169
<div class="item">
172-
<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
170+
{{svg "octicon-lock" 16 "text green"}}
173171
{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
174172
</div>
175173
{{else if .IsSigned}}
176174
<div class="item">
177-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
175+
{{svg "octicon-unlock"}}
178176
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
179177
</div>
180178
{{end}}
@@ -184,7 +182,7 @@
184182
<div class="ui divider"></div>
185183

186184
<div class="item">
187-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
185+
{{svg "octicon-alert"}}
188186
{{$.locale.Tr "repo.pulls.is_empty"}}
189187
</div>
190188
{{end}}
@@ -315,19 +313,19 @@
315313
</div>
316314
{{else if .IsBlockedByOutdatedBranch}}
317315
<div class="item text red">
318-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
319-
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
316+
{{svg "octicon-x"}}
317+
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
320318
</div>
321319
{{else if .IsBlockedByChangedProtectedFiles}}
322320
<div class="item text red">
323-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
321+
{{svg "octicon-x"}}
324322
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
325-
<ul>
326-
{{range .ChangedProtectedFiles}}
327-
<li>{{.}}</li>
328-
{{end}}
329-
</ul>
330323
</div>
324+
<ul>
325+
{{range .ChangedProtectedFiles}}
326+
<li>{{.}}</li>
327+
{{end}}
328+
</ul>
331329
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
332330
<div class="item text red">
333331
{{svg "octicon-x"}}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@
273273
<form method="POST" action="{{.Issue.Link}}/watch">
274274
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
275275
{{$.CsrfTokenHtml}}
276-
<button class="fluid ui button gt-df gt-jc">
276+
<button class="fluid ui button">
277277
{{if $.IssueWatch.IsWatching}}
278278
{{svg "octicon-mute" 16 "gt-mr-3"}}
279279
{{.locale.Tr "repo.issues.unsubscribe"}}
@@ -558,7 +558,7 @@
558558
{{if or .PinEnabled .Issue.IsPinned}}
559559
<form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
560560
{{$.CsrfTokenHtml}}
561-
<button class="fluid ui button gt-df gt-jc {{if not $.NewPinAllowed}}disabled{{end}}">
561+
<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
562562
{{if not .Issue.IsPinned}}
563563
{{svg "octicon-pin" 16 "gt-mr-3"}}
564564
{{.locale.Tr "pin"}}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
22
<div class="ui divider"></div>
33
<div class="item item-section">
4-
<div class="item-section-left">
5-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
4+
<div class="item-section-left flex-text-inline">
5+
{{svg "octicon-alert"}}
66
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
77
</div>
88
<div class="item-section-right">
@@ -14,9 +14,8 @@
1414
{{$.locale.Tr "repo.pulls.update_branch"}}
1515
</span>
1616
</button>
17-
18-
<div class="ui dropdown icon button no-text">
19-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
17+
<div class="ui dropdown icon button">
18+
{{svg "octicon-triangle-down"}}
2019
<div class="menu">
2120
<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
2221
<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>

0 commit comments

Comments
 (0)