Skip to content

Improve some flex layouts #26649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 22, 2023
Merged

Improve some flex layouts #26649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
07a031d
fix
wxiaoguang Aug 22, 2023
9001757
use flex-basis, add word-break
wxiaoguang Aug 22, 2023
222bd64
Merge branch 'main' into fix-flex-list
wxiaoguang Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions templates/devtest/flex-list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 5 additions & 58 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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" .}}
2 changes: 0 additions & 2 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg {
.flex-text-block {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .25rem;
}
6 changes: 3 additions & 3 deletions web_src/css/shared/flex-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
flex-basis: 60%;
}

.flex-item-header {
Expand All @@ -54,7 +54,6 @@
flex-grow: 0;
flex-wrap: wrap;
justify-content: end;
flex-shrink: 2;
}

.flex-item .flex-item-title {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down