loading up the forgejo repo on tangled to test page performance
Improve some flex layouts (#26649)
Fix #26617
1. Separate the "flex-list" examples into a dedicated template, and add some more examples
2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively
3. Some `flex-wrap: wrap;` are removed
authored by
wxiaoguang
and committed by
GitHub
7934602a
23addde2
+96
-63
+88
templates/devtest/flex-list.tmpl
+88
templates/devtest/flex-list.tmpl
···
1
+
{{template "base/head" .}}
2
+
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
3
+
<div class="page-content devtest ui container">
4
+
<div>
5
+
<h1>Flex List</h1>
6
+
<div class="flex-list">
7
+
<div class="flex-item">
8
+
<div class="flex-item-leading">
9
+
{{svg "octicon-info" 32}}
10
+
</div>
11
+
<div class="flex-item-main">
12
+
<div class="flex-item-title">
13
+
Flex Item
14
+
<span class="ui basic label">
15
+
with label
16
+
</span>
17
+
</div>
18
+
<div class="flex-item-body">
19
+
consists of leading/main/trailing part
20
+
</div>
21
+
<div class="flex-item-body">
22
+
main part contains title and (multiple) body lines
23
+
</div>
24
+
</div>
25
+
<div class="flex-item-trailing">
26
+
<button class="ui tiny red button">
27
+
{{svg "octicon-warning" 14}} CJK文本测试
28
+
</button>
29
+
<button class="ui tiny green button">
30
+
{{svg "octicon-info" 14}} Button
31
+
</button>
32
+
<button class="ui tiny green button">
33
+
Button with long text
34
+
</button>
35
+
</div>
36
+
</div>
37
+
38
+
<div class="flex-item">
39
+
<div class="flex-item-leading">
40
+
{{svg "octicon-info" 32}}
41
+
</div>
42
+
<div class="flex-item-main">
43
+
<div class="flex-item-title">
44
+
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
45
+
</div>
46
+
<div class="flex-item-body">
47
+
consists of leading/main/trailing part
48
+
</div>
49
+
<div class="flex-item-body">
50
+
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
51
+
</div>
52
+
</div>
53
+
<div class="flex-item-trailing">
54
+
<button class="ui tiny red button">
55
+
{{svg "octicon-warning" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
56
+
</button>
57
+
</div>
58
+
</div>
59
+
60
+
<div class="flex-item">
61
+
<div class="flex-item-leading">
62
+
{{svg "octicon-repo" 32}}
63
+
</div>
64
+
<div class="flex-item-main">
65
+
<div class="flex-item-header">
66
+
<div class="flex-item-title">
67
+
<a class="text primary" href="{{$.Link}}">
68
+
gitea-org / gitea
69
+
</a>
70
+
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
71
+
</div>
72
+
<div class="flex-item-trailing">
73
+
<a class="muted" href="{{$.Link}}">
74
+
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
75
+
</a>
76
+
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
77
+
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
78
+
</div>
79
+
</div>
80
+
<div class="flex-item-body">
81
+
when inside header, the trailing part will wrap below the title
82
+
</div>
83
+
</div>
84
+
</div>
85
+
</div>
86
+
</div>
87
+
</div>
88
+
{{template "base/footer" .}}
+5
-58
templates/devtest/gitea-ui.tmpl
+5
-58
templates/devtest/gitea-ui.tmpl
···
130
130
<h2>Text with SVG</h2>
131
131
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
132
132
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
133
+
134
+
<div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
135
+
133
136
<div class="flex-items-block">
134
137
<div class="item">{{svg "octicon-alert"}} flex every line</div>
135
138
<div class="item">{{svg "octicon-alert"}} flex every item</div>
139
+
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
136
140
</div>
137
141
138
142
<h2>Button with SVG</h2>
···
142
146
<button class="ui basic button">labeled button</button>
143
147
<a class="ui basic label">123</a>
144
148
</div>
149
+
<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
145
150
</div>
146
151
147
152
<h2>Input with SVG</h2>
···
253
258
{{template "shared/combomarkdowneditor" .}}
254
259
</div>
255
260
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
256
-
257
-
<div>
258
-
<h1>Flex List</h1>
259
-
<div class="flex-list">
260
-
<div class="flex-item">
261
-
<div class="flex-item-leading">
262
-
{{svg "octicon-info" 32}}
263
-
</div>
264
-
<div class="flex-item-main">
265
-
<div class="flex-item-title">
266
-
Flex Item
267
-
<span class="ui basic label">
268
-
with label
269
-
</span>
270
-
</div>
271
-
<div class="flex-item-body">
272
-
consists of leading/main/trailing part
273
-
</div>
274
-
<div class="flex-item-body">
275
-
main part contains title and (multiple) body lines
276
-
</div>
277
-
</div>
278
-
<div class="flex-item-trailing">
279
-
<button class="ui tiny red button">
280
-
{{svg "octicon-warning" 12}} Button
281
-
</button>
282
-
<button class="ui tiny green button">
283
-
{{svg "octicon-info" 12}} Button
284
-
</button>
285
-
</div>
286
-
</div>
287
-
<div class="flex-item">
288
-
<div class="flex-item-leading">
289
-
{{svg "octicon-repo" 32}}
290
-
</div>
291
-
<div class="flex-item-main">
292
-
<div class="flex-item-header">
293
-
<div class="flex-item-title">
294
-
<a class="text primary" href="{{$.Link}}">
295
-
gitea-org / gitea
296
-
</a>
297
-
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
298
-
</div>
299
-
<div class="flex-item-trailing">
300
-
<a class="muted" href="{{$.Link}}">
301
-
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
302
-
</a>
303
-
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
304
-
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
305
-
</div>
306
-
</div>
307
-
<div class="flex-item-body">
308
-
when inside header, the trailing part will wrap below the title
309
-
</div>
310
-
</div>
311
-
</div>
312
-
</div>
313
-
</div>
314
261
</div>
315
262
{{template "base/footer" .}}
-2
web_src/css/base.css
-2
web_src/css/base.css
···
2311
2311
.flex-text-inline {
2312
2312
display: inline-flex;
2313
2313
align-items: center;
2314
-
flex-wrap: wrap;
2315
2314
gap: .25rem;
2316
2315
vertical-align: middle;
2317
2316
}
···
2339
2338
.flex-text-block {
2340
2339
display: flex;
2341
2340
align-items: center;
2342
-
flex-wrap: wrap;
2343
2341
gap: .25rem;
2344
2342
}