Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
wxiaoguang 2023-08-22 12:57:02 +08:00 committed by GitHub
parent 23addde28e
commit 7934602a4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
templates/devtest/flex-list.tmpl Normal file
View File

@ -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" .}}

63
templates/devtest/gitea-ui.tmpl
View File

@ -130,9 +130,13 @@
<h2>Text with SVG</h2> <h2>Text with SVG</h2>
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div> <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><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="flex-items-block">
<div class="item">{{svg "octicon-alert"}} flex every line</div> <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 every item</div>
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
</div> </div>
<h2>Button with SVG</h2> <h2>Button with SVG</h2>
@ -142,6 +146,7 @@
<button class="ui basic button">labeled button</button> <button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a> <a class="ui basic label">123</a>
</div> </div>
<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
</div> </div>
<h2>Input with SVG</h2> <h2>Input with SVG</h2>
@ -253,63 +258,5 @@
{{template "shared/combomarkdowneditor" .}} {{template "shared/combomarkdowneditor" .}}
</div> </div>
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script> <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> </div>
{{template "base/footer" .}} {{template "base/footer" .}}

2
web_src/css/base.css
View File

@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg {
.flex-text-inline { .flex-text-inline {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: .25rem; gap: .25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg {
.flex-text-block { .flex-text-block {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: .25rem; gap: .25rem;
} }

6
web_src/css/shared/flex-list.css
View File

@ -29,7 +29,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
min-width: 0; flex-basis: 60%;
} }
.flex-item-header { .flex-item-header {
@ -54,7 +54,6 @@
flex-grow: 0; flex-grow: 0;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: end; justify-content: end;
flex-shrink: 2;
} }
.flex-item .flex-item-title { .flex-item .flex-item-title {
@ -65,8 +64,8 @@
max-width: 100%; max-width: 100%;
color: var(--color-text); color: var(--color-text);
font-size: 16px; font-size: 16px;
min-width: 0;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
word-break: break-word;
} }
.flex-item .flex-item-title a { .flex-item .flex-item-title a {
@ -81,6 +80,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: .25rem; gap: .25rem;
color: var(--color-text-light-2); color: var(--color-text-light-2);
word-break: break-word;
} }
.flex-item .flex-item-body a { .flex-item .flex-item-body a {