loading up the forgejo repo on tangled to test page performance
Fine tune "dropdown button" icon (#25442)
----
authored by
wxiaoguang
and committed by
GitHub
323c6cba
b8253607
+43
-17
+30
-16
templates/devtest/gitea-ui.tmpl
+30
-16
templates/devtest/gitea-ui.tmpl
···
165
165
<div class="item">item</div>
166
166
</div>
167
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
168
<div class="ui search selection dropdown">
176
169
<span class="text">search ...</span>
177
170
<input name="value" class="search">
···
212
205
213
206
<div>
214
207
<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>
208
+
<span class="text">mini dropdown</span>
209
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
210
+
</div>
211
+
<div class="ui dropdown tiny button">
212
+
<span class="text">tiny dropdown</span>
213
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
214
+
</div>
215
+
<div class="ui button dropdown">
216
+
<span class="text">button dropdown</span>
217
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
220
218
</div>
221
219
<div class="ui dropdown large button">
222
220
<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>
221
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
222
+
</div>
223
+
</div>
224
+
225
+
<div>
226
+
<div class="ui dropdown mini compact button">
227
+
<span class="text">mini compact</span>
228
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
229
+
</div>
230
+
<div class="ui dropdown tiny compact button">
231
+
<span class="text">tiny compact</span>
232
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
233
+
</div>
234
+
<div class="ui button compact dropdown">
235
+
<span class="text">button compact</span>
236
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
237
+
</div>
238
+
<div class="ui dropdown large compact button">
239
+
<span class="text">large compact</span>
240
+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
227
241
</div>
228
242
</div>
229
243
</div>
+2
-1
templates/repo/commit_page.tmpl
+2
-1
templates/repo/commit_page.tmpl
···
26
26
{{.locale.Tr "repo.diff.browse_source"}}
27
27
</a>
28
28
{{if and ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}{{- /* */ -}}
29
-
<div class="ui primary tiny floating dropdown icon button">{{.locale.Tr "repo.commit.operations"}}
29
+
<div class="ui dropdown primary tiny button">
30
+
{{.locale.Tr "repo.commit.operations"}}
30
31
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
31
32
<div class="menu">
32
33
<div class="ui header">{{.locale.Tr "repo.commit.operations"}}</div>
+11
web_src/css/base.css
+11
web_src/css/base.css
···
2192
2192
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
2193
2193
*/
2194
2194
2195
+
.ui.dropdown.mini.button,
2196
+
.ui.dropdown.tiny.button {
2197
+
padding-right: 20px;
2198
+
}
2199
+
.ui.dropdown.button {
2200
+
padding-right: 22px;
2201
+
}
2202
+
.ui.dropdown.large.button {
2203
+
padding-right: 24px;
2204
+
}
2205
+
2195
2206
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
2196
2207
.ui.ui.dropdown > .icon.icon {
2197
2208
position: initial; /* plain dropdown and button dropdown use flex layout for icons */