loading up the forgejo repo on tangled to test page performance
Use flex to align SVG and text (#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>
```
---------
Co-authored-by: Giteabot <teabot@gitea.io>
authored by
wxiaoguang
Giteabot
and committed by
GitHub
46c17c80
4c290e92
+247
-131
+100
templates/devtest/gitea-ui.tmpl
+100
templates/devtest/gitea-ui.tmpl
···
129
129
</div>
130
130
131
131
<div>
132
+
<h1>SVG alignment</h1>
133
+
134
+
<h2>Text with SVG</h2>
135
+
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
136
+
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
137
+
<div class="flex-items-block">
138
+
<div class="item">{{svg "octicon-alert"}} flex every line</div>
139
+
<div class="item">{{svg "octicon-alert"}} flex every item</div>
140
+
</div>
141
+
142
+
<h2>Button with SVG</h2>
143
+
<div>
144
+
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
145
+
<div class="ui labeled button">
146
+
<button class="ui basic button">labeled button</button>
147
+
<a class="ui basic label">123</a>
148
+
</div>
149
+
</div>
150
+
151
+
<h2>Input with SVG</h2>
152
+
<div>
153
+
<div class="ui icon search input">
154
+
<i class="icon">{{svg "octicon-search"}}</i>
155
+
<input type="text" placeholder="place holder">
156
+
</div>
157
+
</div>
158
+
159
+
<h2>Dropdown with SVG</h2>
160
+
<div>
161
+
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
162
+
<span class="text">simple</span>
163
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
164
+
<div class="menu">
165
+
<div class="item">item</div>
166
+
</div>
167
+
</div>
168
+
<div class="ui button dropdown">
169
+
<span class="text">button dropdown</span>
170
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
171
+
<div class="menu">
172
+
<div class="item">item</div>
173
+
</div>
174
+
</div>
175
+
<div class="ui search selection dropdown">
176
+
<span class="text">search ...</span>
177
+
<input name="value" class="search">
178
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
179
+
{{svg "octicon-x" 14 "remove icon"}}
180
+
<div class="menu">
181
+
<div class="item">item</div>
182
+
</div>
183
+
</div>
184
+
<div class="ui multiple selection dropdown">
185
+
<input class="hidden" value="1">
186
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
187
+
{{svg "octicon-x" 14 "remove icon"}}
188
+
<div class="default text">empty multiple dropdown</div>
189
+
<div class="menu">
190
+
<div class="item">item</div>
191
+
</div>
192
+
</div>
193
+
<div class="ui multiple clearable search selection dropdown">
194
+
<input type="hidden" value="1">
195
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
196
+
{{svg "octicon-x" 14 "remove icon"}}
197
+
<div class="default text">clearable search dropdown</div>
198
+
<div class="menu">
199
+
<div class="item" data-value="1">item</div>
200
+
</div>
201
+
</div>
202
+
<div class="ui buttons">
203
+
<button class="ui button">Button with Dropdown</button>
204
+
<div class="ui dropdown button icon">
205
+
{{svg "octicon-triangle-down"}}
206
+
<div class="menu">
207
+
<div class="item">item</div>
208
+
</div>
209
+
</div>
210
+
</div>
211
+
</div>
212
+
213
+
<div>
214
+
<div class="ui dropdown mini button">
215
+
<span class="text">small dropdown</span>
216
+
{{svg "octicon-triangle-down" 12 "dropdown icon"}}
217
+
<div class="menu">
218
+
<div class="item">item</div>
219
+
</div>
220
+
</div>
221
+
<div class="ui dropdown large button">
222
+
<span class="text">large dropdown</span>
223
+
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
224
+
<div class="menu">
225
+
<div class="item">item</div>
226
+
</div>
227
+
</div>
228
+
</div>
229
+
</div>
230
+
231
+
<div>
132
232
<h1>ComboMarkdownEditor</h1>
133
233
<div>ps: no JS code attached, so just a layout</div>
134
234
{{template "shared/combomarkdowneditor" .}}
+1
-3
templates/repo/commits_list_small.tmpl
+1
-3
templates/repo/commits_list_small.tmpl
···
6
6
<div class="singular-commit" id="{{$tag}}">
7
7
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
8
8
{{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>
12
10
{{else}}
13
11
{{avatarByEmail $.root.Context .Author.Email .Author.Name}}
14
12
{{end}}
+2
-2
templates/repo/diff/compare.tmpl
+2
-2
templates/repo/diff/compare.tmpl
···
44
44
</div>
45
45
<div class="menu">
46
46
<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>
48
48
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
49
49
</div>
50
50
<div class="header">
···
113
113
</div>
114
114
<div class="menu">
115
115
<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>
117
117
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
118
118
</div>
119
119
<div class="header">
+1
-1
templates/repo/issue/branch_selector_field.tmpl
+1
-1
templates/repo/issue/branch_selector_field.tmpl
···
12
12
</div>
13
13
<div class="menu">
14
14
<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>
16
16
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
17
17
</div>
18
18
<div class="header">
+48
-50
templates/repo/issue/view_content/pull.tmpl
+48
-50
templates/repo/issue/view_content/pull.tmpl
···
22
22
<div class="content">
23
23
{{template "repo/pulls/status" .}}
24
24
{{$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">
26
26
{{if .Issue.PullRequest.HasMerged}}
27
27
{{if .IsPullBranchDeletable}}
28
28
<div class="item item-section text gt-f1">
29
29
<div class="item-section-left">
30
30
<h3 class="gt-mb-3">
31
-
{{$.locale.Tr "repo.pulls.merged_success"}}
31
+
{{$.locale.Tr "repo.pulls.merged_success"}}
32
32
</h3>
33
33
<div class="merge-section-info">
34
34
{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
···
58
58
{{end}}
59
59
</div>
60
60
{{else if .IsPullFilesConflicted}}
61
-
<div class="item text">
61
+
<div class="item">
62
62
{{svg "octicon-x"}}
63
63
{{$.locale.Tr "repo.pulls.files_conflicted"}}
64
-
<ul>
65
-
{{range .ConflictedFiles}}
66
-
<li>{{.}}</li>
67
-
{{end}}
68
-
</ul>
69
64
</div>
65
+
<ul>
66
+
{{range .ConflictedFiles}}
67
+
<li>{{.}}</li>
68
+
{{end}}
69
+
</ul>
70
70
{{else if .IsPullRequestBroken}}
71
71
<div class="item">
72
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
72
+
{{svg "octicon-x"}}
73
73
{{$.locale.Tr "repo.pulls.data_broken"}}
74
74
</div>
75
75
{{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"}}
79
79
{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
80
80
</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}}
88
86
</div>
89
87
{{template "repo/issue/view_content/update_branch_by_merge" $}}
90
88
{{else if .Issue.PullRequest.IsChecking}}
91
89
<div class="item">
92
-
<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
90
+
{{svg "octicon-sync"}}
93
91
{{$.locale.Tr "repo.pulls.is_checking"}}
94
92
</div>
95
93
{{else if .Issue.PullRequest.IsAncestor}}
96
94
<div class="item">
97
-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
95
+
{{svg "octicon-alert"}}
98
96
{{$.locale.Tr "repo.pulls.is_ancestor"}}
99
97
</div>
100
98
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
101
99
{{if .IsBlockedByApprovals}}
102
100
<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}}
105
103
</div>
106
104
{{else if .IsBlockedByRejection}}
107
105
<div class="item">
108
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
106
+
{{svg "octicon-x"}}
109
107
{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
110
108
</div>
111
109
{{else if .IsBlockedByOfficialReviewRequests}}
112
110
<div class="item">
113
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
111
+
{{svg "octicon-x"}}
114
112
{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
115
113
</div>
116
114
{{else if .IsBlockedByOutdatedBranch}}
117
115
<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"}}
120
118
</div>
121
119
{{else if .IsBlockedByChangedProtectedFiles}}
122
120
<div class="item">
123
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
121
+
{{svg "octicon-x"}}
124
122
{{$.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>
130
123
</div>
124
+
<ul>
125
+
{{range .ChangedProtectedFiles}}
126
+
<li>{{.}}</li>
127
+
{{end}}
128
+
</ul>
131
129
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
132
130
<div class="item">
133
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
131
+
{{svg "octicon-x"}}
134
132
{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
135
133
</div>
136
134
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
137
135
<div class="item">
138
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
136
+
{{svg "octicon-x"}}
139
137
{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
140
138
</div>
141
139
{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
142
140
<div class="item">
143
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
141
+
{{svg "octicon-x"}}
144
142
{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
145
143
</div>
146
144
<div class="item">
147
-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
145
+
{{svg "octicon-unlock"}}
148
146
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
149
147
</div>
150
148
{{end}}
···
158
156
{{if $canMergeNow}}
159
157
{{if $notAllOverridableChecksOk}}
160
158
<div class="item">
161
-
<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
159
+
{{svg "octicon-dot-fill"}}
162
160
{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
163
161
</div>
164
162
{{else}}
165
163
<div class="item">
166
-
<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
164
+
{{svg "octicon-check"}}
167
165
{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
168
166
</div>
169
167
{{end}}
170
168
{{if .WillSign}}
171
169
<div class="item">
172
-
<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
170
+
{{svg "octicon-lock" 16 "text green"}}
173
171
{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
174
172
</div>
175
173
{{else if .IsSigned}}
176
174
<div class="item">
177
-
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
175
+
{{svg "octicon-unlock"}}
178
176
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
179
177
</div>
180
178
{{end}}
···
184
182
<div class="ui divider"></div>
185
183
186
184
<div class="item">
187
-
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
185
+
{{svg "octicon-alert"}}
188
186
{{$.locale.Tr "repo.pulls.is_empty"}}
189
187
</div>
190
188
{{end}}
···
315
313
</div>
316
314
{{else if .IsBlockedByOutdatedBranch}}
317
315
<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"}}
320
318
</div>
321
319
{{else if .IsBlockedByChangedProtectedFiles}}
322
320
<div class="item text red">
323
-
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
321
+
{{svg "octicon-x"}}
324
322
{{$.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>
330
323
</div>
324
+
<ul>
325
+
{{range .ChangedProtectedFiles}}
326
+
<li>{{.}}</li>
327
+
{{end}}
328
+
</ul>
331
329
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
332
330
<div class="item text red">
333
331
{{svg "octicon-x"}}
+4
-5
templates/repo/issue/view_content/update_branch_by_merge.tmpl
+4
-5
templates/repo/issue/view_content/update_branch_by_merge.tmpl
···
1
1
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
2
2
<div class="ui divider"></div>
3
3
<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"}}
6
6
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
7
7
</div>
8
8
<div class="item-section-right">
···
14
14
{{$.locale.Tr "repo.pulls.update_branch"}}
15
15
</span>
16
16
</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"}}
20
19
<div class="menu">
21
20
<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
22
21
<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>
+1
-1
templates/repo/issue/view_title.tmpl
+1
-1
templates/repo/issue/view_title.tmpl
···
84
84
</div>
85
85
<div class="menu">
86
86
<div class="ui icon search input">
87
-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
87
+
<i class="icon">{{svg "octicon-filter" 16}}</i>
88
88
<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
89
89
</div>
90
90
<div class="scrolling menu" id="branch-select">
+1
-1
templates/repo/release_tag_header.tmpl
+1
-1
templates/repo/release_tag_header.tmpl
···
3
3
4
4
{{if $canReadReleases}}
5
5
<div class="gt-df">
6
-
<div class="gt-f1">
6
+
<div class="gt-f1 gt-df gt-ac">
7
7
<h2 class="ui compact small menu header small-menu-items">
8
8
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
9
9
{{if $canReadCode}}
+1
-1
templates/repo/wiki/view.tmpl
+1
-1
templates/repo/wiki/view.tmpl
···
15
15
</div>
16
16
<div class="menu">
17
17
<div class="ui icon search input">
18
-
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
18
+
<i class="icon">{{svg "octicon-filter" 16}}</i>
19
19
<input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}...">
20
20
</div>
21
21
<div class="scrolling menu">
+75
-33
web_src/css/base.css
+75
-33
web_src/css/base.css
···
1031
1031
background: var(--color-active);
1032
1032
}
1033
1033
1034
-
.ui.form .field > .selection.dropdown > .dropdown.icon {
1035
-
height: auto;
1036
-
}
1037
-
1038
1034
.ui.loading.segment::before,
1039
1035
.ui.loading.form::before {
1040
1036
background: none;
···
2124
2120
margin-left: 0.25rem;
2125
2121
}
2126
2122
2127
-
.ui.dropdown .svg.dropdown.icon,
2128
-
.ui.dropdown .svg.remove.icon,
2129
-
.svg.dropdown.icon {
2130
-
margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
2131
-
margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
2132
-
height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
2133
-
}
2134
-
2135
-
.ui.selection.dropdown > .svg.search.icon,
2136
-
.ui.selection.dropdown > .svg.delete.icon,
2137
-
.ui.selection.dropdown > .svg.dropdown.icon {
2138
-
top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
2139
-
}
2140
-
2141
-
.ui.selection.dropdown > .svg.remove.icon {
2142
-
top: .5px;
2143
-
right: 32px;
2144
-
width: auto;
2145
-
}
2146
-
2147
-
.ui.selection.dropdown > .svg.remove.icon:hover {
2148
-
opacity: 1;
2149
-
}
2150
-
2151
-
.ui.dropdown.no-text > .dropdown.icon {
2152
-
margin-left: 0 !important;
2153
-
margin-right: 0 !important;
2154
-
}
2155
-
2156
2123
.ui.dropdown .menu .item {
2157
2124
border-radius: 0;
2158
2125
}
···
2304
2271
width: 15px;
2305
2272
height: 15px;
2306
2273
}
2274
+
2275
+
.ui.dropdown {
2276
+
line-height: 1em; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
2277
+
}
2278
+
2279
+
/* dropdown has some kinds of icons:
2280
+
- "> .dropdown.icon": the arrow for opening the dropdown
2281
+
- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
2282
+
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
2283
+
*/
2284
+
2285
+
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
2286
+
.ui.ui.dropdown > .icon.icon {
2287
+
position: initial; /* plain dropdown and button dropdown use flex layout for icons */
2288
+
padding: 0;
2289
+
margin: 0;
2290
+
height: auto;
2291
+
}
2292
+
2293
+
.ui.ui.dropdown > .icon.icon:hover {
2294
+
opacity: 1;
2295
+
}
2296
+
2297
+
.ui.ui.button.dropdown > .icon.icon,
2298
+
.ui.ui.selection.dropdown > .icon.icon {
2299
+
position: absolute; /* selection dropdown uses absolute layout for icons */
2300
+
top: 50%;
2301
+
transform: translateY(-50%);
2302
+
}
2303
+
2304
+
.ui.ui.dropdown > .dropdown.icon {
2305
+
right: 0.5em;
2306
+
}
2307
+
2308
+
.ui.ui.dropdown > .remove.icon {
2309
+
right: 2em;
2310
+
}
2311
+
2312
+
.ui.ui.button,
2313
+
.ui.ui.dropdown,
2314
+
.flex-items-inline > .item,
2315
+
.flex-text-inline {
2316
+
display: inline-flex;
2317
+
align-items: center;
2318
+
flex-wrap: wrap;
2319
+
gap: .25rem;
2320
+
vertical-align: middle;
2321
+
}
2322
+
2323
+
.ui.ui.button {
2324
+
justify-content: center;
2325
+
}
2326
+
2327
+
.ui.dropdown .ui.label .svg {
2328
+
vertical-align: middle;
2329
+
}
2330
+
2331
+
.ui.ui.labeled.button {
2332
+
gap: 0;
2333
+
align-items: stretch;
2334
+
}
2335
+
2336
+
.ui.ui.icon.input .icon {
2337
+
display: flex;
2338
+
align-items: center;
2339
+
justify-content: center;
2340
+
}
2341
+
2342
+
.flex-items-block > .item,
2343
+
.flex-text-block {
2344
+
display: flex;
2345
+
align-items: center;
2346
+
flex-wrap: wrap;
2347
+
gap: .25rem;
2348
+
}
+6
-23
web_src/css/repo.css
+6
-23
web_src/css/repo.css
···
20
20
margin-top: 2px;
21
21
}
22
22
23
-
.repository .repo-header .repo-buttons .svg {
24
-
margin: 0 0.42857143em 0 -0.21428571em;
25
-
}
26
-
27
-
.repository .repo-header .button {
28
-
margin-top: 2px;
29
-
margin-bottom: 2px;
30
-
}
31
-
32
23
.repository .tabs .navbar {
33
24
justify-content: initial;
34
25
}
···
848
839
.repository.view.issue .comment-list .timeline-item.commits-list {
849
840
padding-left: 15px;
850
841
padding-top: 0;
842
+
}
843
+
844
+
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
845
+
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
846
+
margin-right: 0.25em;
851
847
}
852
848
853
849
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
···
2537
2533
margin-left: 0.25rem;
2538
2534
}
2539
2535
2540
-
.content-history-menu .octicon-triangle-down {
2541
-
position: relative;
2542
-
top: 1.5px;
2543
-
}
2544
-
2545
2536
.comment-body {
2546
2537
background: var(--color-box-body);
2547
2538
border: none !important;
···
2874
2865
flex-direction: row;
2875
2866
flex-wrap: wrap;
2876
2867
word-break: keep-all;
2868
+
gap: 0.25em;
2877
2869
}
2878
2870
2879
2871
@media (max-width: 767.98px) {
···
2895
2887
2896
2888
.repo-buttons button[disabled] ~ .label:hover {
2897
2889
color: var(--color-primary-dark-1);
2898
-
}
2899
-
2900
-
.repo-buttons .ui.labeled.button {
2901
-
cursor: initial;
2902
-
}
2903
-
2904
-
.repo-buttons .ui.labeled.button > .label {
2905
-
border-left: 0 !important;
2906
-
margin: 0 !important;
2907
2890
}
2908
2891
2909
2892
.repo-buttons .ui.labeled.button.disabled {
+1
-1
web_src/js/components/DashboardRepoList.vue
+1
-1
web_src/js/components/DashboardRepoList.vue
···
19
19
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
20
20
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
21
21
<div class="ui dropdown icon button" :title="textFilter">
22
-
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
22
+
<svg-icon name="octicon-filter" :size="16"/>
23
23
<div class="menu">
24
24
<a class="item" @click="toggleArchivedFilter()">
25
25
<div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">
+1
-1
web_src/js/components/PullRequestMergeForm.vue
+1
-1
web_src/js/components/PullRequestMergeForm.vue
···
72
72
</template>
73
73
</span>
74
74
</button>
75
-
<div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
75
+
<div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
76
76
<svg-icon name="octicon-triangle-down" :size="14"/>
77
77
<div class="menu" :class="{'show':showMergeStyleMenu}">
78
78
<template v-for="msd in mergeForm.mergeStyles">
+1
-1
web_src/js/components/RepoBranchTagSelector.vue
+1
-1
web_src/js/components/RepoBranchTagSelector.vue
···
13
13
</button>
14
14
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
15
15
<div class="ui icon search input">
16
-
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
16
+
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
17
17
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
18
18
</div>
19
19
<template v-if="showBranchesInDropdown">
+2
-2
web_src/js/features/repo-issue-content.js
+2
-2
web_src/js/features/repo-issue-content.js
···
75
75
function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
76
76
const $headerLeft = $item.find('.comment-header-left');
77
77
const menuHtml = `
78
-
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
79
-
• <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
78
+
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
79
+
• ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
80
80
<div class="menu">
81
81
</div>
82
82
</div>`;