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 removedtags/v1.21.0-rc0
@@ -0,0 +1,88 @@ | |||
{{template "base/head" .}} | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> | |||
<div class="page-content devtest ui container"> | |||
<div> | |||
<h1>Flex List</h1> | |||
<div class="flex-list"> | |||
<div class="flex-item"> | |||
<div class="flex-item-leading"> | |||
{{svg "octicon-info" 32}} | |||
</div> | |||
<div class="flex-item-main"> | |||
<div class="flex-item-title"> | |||
Flex Item | |||
<span class="ui basic label"> | |||
with label | |||
</span> | |||
</div> | |||
<div class="flex-item-body"> | |||
consists of leading/main/trailing part | |||
</div> | |||
<div class="flex-item-body"> | |||
main part contains title and (multiple) body lines | |||
</div> | |||
</div> | |||
<div class="flex-item-trailing"> | |||
<button class="ui tiny red button"> | |||
{{svg "octicon-warning" 14}} CJK文本测试 | |||
</button> | |||
<button class="ui tiny green button"> | |||
{{svg "octicon-info" 14}} Button | |||
</button> | |||
<button class="ui tiny green button"> | |||
Button with long text | |||
</button> | |||
</div> | |||
</div> | |||
<div class="flex-item"> | |||
<div class="flex-item-leading"> | |||
{{svg "octicon-info" 32}} | |||
</div> | |||
<div class="flex-item-main"> | |||
<div class="flex-item-title"> | |||
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title | |||
</div> | |||
<div class="flex-item-body"> | |||
consists of leading/main/trailing part | |||
</div> | |||
<div class="flex-item-body"> | |||
Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content | |||
</div> | |||
</div> | |||
<div class="flex-item-trailing"> | |||
<button class="ui tiny red button"> | |||
{{svg "octicon-warning" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal --> | |||
</button> | |||
</div> | |||
</div> | |||
<div class="flex-item"> | |||
<div class="flex-item-leading"> | |||
{{svg "octicon-repo" 32}} | |||
</div> | |||
<div class="flex-item-main"> | |||
<div class="flex-item-header"> | |||
<div class="flex-item-title"> | |||
<a class="text primary" href="{{$.Link}}"> | |||
gitea-org / gitea | |||
</a> | |||
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> | |||
</div> | |||
<div class="flex-item-trailing"> | |||
<a class="muted" href="{{$.Link}}"> | |||
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span> | |||
</a> | |||
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a> | |||
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a> | |||
</div> | |||
</div> | |||
<div class="flex-item-body"> | |||
when inside header, the trailing part will wrap below the title | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
{{template "base/footer" .}} |
@@ -130,9 +130,13 @@ | |||
<h2>Text with SVG</h2> | |||
<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 class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div> | |||
<div class="flex-items-block"> | |||
<div class="item">{{svg "octicon-alert"}} flex every line</div> | |||
<div class="item">{{svg "octicon-alert"}} flex every item</div> | |||
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div> | |||
</div> | |||
<h2>Button with SVG</h2> | |||
@@ -142,6 +146,7 @@ | |||
<button class="ui basic button">labeled button</button> | |||
<a class="ui basic label">123</a> | |||
</div> | |||
<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button> | |||
</div> | |||
<h2>Input with SVG</h2> | |||
@@ -253,63 +258,5 @@ | |||
{{template "shared/combomarkdowneditor" .}} | |||
</div> | |||
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script> | |||
<div> | |||
<h1>Flex List</h1> | |||
<div class="flex-list"> | |||
<div class="flex-item"> | |||
<div class="flex-item-leading"> | |||
{{svg "octicon-info" 32}} | |||
</div> | |||
<div class="flex-item-main"> | |||
<div class="flex-item-title"> | |||
Flex Item | |||
<span class="ui basic label"> | |||
with label | |||
</span> | |||
</div> | |||
<div class="flex-item-body"> | |||
consists of leading/main/trailing part | |||
</div> | |||
<div class="flex-item-body"> | |||
main part contains title and (multiple) body lines | |||
</div> | |||
</div> | |||
<div class="flex-item-trailing"> | |||
<button class="ui tiny red button"> | |||
{{svg "octicon-warning" 12}} Button | |||
</button> | |||
<button class="ui tiny green button"> | |||
{{svg "octicon-info" 12}} Button | |||
</button> | |||
</div> | |||
</div> | |||
<div class="flex-item"> | |||
<div class="flex-item-leading"> | |||
{{svg "octicon-repo" 32}} | |||
</div> | |||
<div class="flex-item-main"> | |||
<div class="flex-item-header"> | |||
<div class="flex-item-title"> | |||
<a class="text primary" href="{{$.Link}}"> | |||
gitea-org / gitea | |||
</a> | |||
<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> | |||
</div> | |||
<div class="flex-item-trailing"> | |||
<a class="muted" href="{{$.Link}}"> | |||
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span> | |||
</a> | |||
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a> | |||
<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a> | |||
</div> | |||
</div> | |||
<div class="flex-item-body"> | |||
when inside header, the trailing part will wrap below the title | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
{{template "base/footer" .}} |
@@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg { | |||
.flex-text-inline { | |||
display: inline-flex; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
gap: .25rem; | |||
vertical-align: middle; | |||
} | |||
@@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg { | |||
.flex-text-block { | |||
display: flex; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
gap: .25rem; | |||
} |
@@ -29,7 +29,7 @@ | |||
display: flex; | |||
flex-direction: column; | |||
flex-grow: 1; | |||
min-width: 0; | |||
flex-basis: 60%; | |||
} | |||
.flex-item-header { | |||
@@ -54,7 +54,6 @@ | |||
flex-grow: 0; | |||
flex-wrap: wrap; | |||
justify-content: end; | |||
flex-shrink: 2; | |||
} | |||
.flex-item .flex-item-title { | |||
@@ -65,8 +64,8 @@ | |||
max-width: 100%; | |||
color: var(--color-text); | |||
font-size: 16px; | |||
min-width: 0; | |||
font-weight: var(--font-weight-semibold); | |||
word-break: break-word; | |||
} | |||
.flex-item .flex-item-title a { | |||
@@ -81,6 +80,7 @@ | |||
flex-wrap: wrap; | |||
gap: .25rem; | |||
color: var(--color-text-light-2); | |||
word-break: break-word; | |||
} | |||
.flex-item .flex-item-body a { |