Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7934602

Browse files
wxiaoguangwxiaoguang
authoredAug 22, 2023
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
1 parent 23addde commit 7934602

File tree

4 files changed

+96
-63
lines changed

4 files changed

+96
-63
lines changed
 

‎templates/devtest/flex-list.tmpl

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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" .}}

‎templates/devtest/gitea-ui.tmpl

+5-58
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,13 @@
130130
<h2>Text with SVG</h2>
131131
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
132132
<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+
133136
<div class="flex-items-block">
134137
<div class="item">{{svg "octicon-alert"}} flex every line</div>
135138
<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>
136140
</div>
137141

138142
<h2>Button with SVG</h2>
@@ -142,6 +146,7 @@
142146
<button class="ui basic button">labeled button</button>
143147
<a class="ui basic label">123</a>
144148
</div>
149+
<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
145150
</div>
146151

147152
<h2>Input with SVG</h2>
@@ -253,63 +258,5 @@
253258
{{template "shared/combomarkdowneditor" .}}
254259
</div>
255260
<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>
314261
</div>
315262
{{template "base/footer" .}}

‎web_src/css/base.css

-2
Original file line numberDiff line numberDiff line change
@@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg {
23112311
.flex-text-inline {
23122312
display: inline-flex;
23132313
align-items: center;
2314-
flex-wrap: wrap;
23152314
gap: .25rem;
23162315
vertical-align: middle;
23172316
}
@@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg {
23392338
.flex-text-block {
23402339
display: flex;
23412340
align-items: center;
2342-
flex-wrap: wrap;
23432341
gap: .25rem;
23442342
}

‎web_src/css/shared/flex-list.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
display: flex;
3030
flex-direction: column;
3131
flex-grow: 1;
32-
min-width: 0;
32+
flex-basis: 60%;
3333
}
3434

3535
.flex-item-header {
@@ -54,7 +54,6 @@
5454
flex-grow: 0;
5555
flex-wrap: wrap;
5656
justify-content: end;
57-
flex-shrink: 2;
5857
}
5958

6059
.flex-item .flex-item-title {
@@ -65,8 +64,8 @@
6564
max-width: 100%;
6665
color: var(--color-text);
6766
font-size: 16px;
68-
min-width: 0;
6967
font-weight: var(--font-weight-semibold);
68+
word-break: break-word;
7069
}
7170

7271
.flex-item .flex-item-title a {
@@ -81,6 +80,7 @@
8180
flex-wrap: wrap;
8281
gap: .25rem;
8382
color: var(--color-text-light-2);
83+
word-break: break-word;
8484
}
8585

8686
.flex-item .flex-item-body a {

0 commit comments

Comments
 (0)
Please sign in to comment.