From 7934602a4ccaba7f398490ca739988a0b6f5ca2a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 22 Aug 2023 12:57:02 +0800
Subject: [PATCH] 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
---
templates/devtest/flex-list.tmpl | 88 ++++++++++++++++++++++++++++++++
templates/devtest/gitea-ui.tmpl | 63 ++---------------------
web_src/css/base.css | 2 -
web_src/css/shared/flex-list.css | 6 +--
4 files changed, 96 insertions(+), 63 deletions(-)
create mode 100644 templates/devtest/flex-list.tmpl
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
new file mode 100644
index 0000000000..37f3f04004
--- /dev/null
+++ b/templates/devtest/flex-list.tmpl
@@ -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" .}}
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 9e15e3c1bc..342f8c2e9b 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -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" .}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index f2b4d3d98c..78609ab0de 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -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;
}
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 7982241684..ec22fbba9e 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -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 {