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 {