From 1a9998ce916c69a50e9141a86ed8105dabea80ef Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 30 Aug 2023 07:13:30 +0800
Subject: [PATCH] Improve flex list item padding (#26779)

Replace #26761

It's better to keep children elements simple, and let parent containers
layout the necessary padding/margin.

The old `not(:last-child)` and `.flex-item + .flex-item` are not easy to
maintain (for example, what if the developer would like to use a "tiny
height" item?)

The old approach also makes some UI look strange because the first item
doesn't have proper padding-top.

In this PR, we just simply use `.flex-item { padding: ... }`:

* Developers could manually set the item height they want easily
* It's easier to make it work with various containers -- with padding
(`ui segment`) and without padding (`div`)

And added more samples/examples.


![image](https://github.com/go-gitea/gitea/assets/2114189/719ea712-0241-4426-b67f-5723993c4ed7)

Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/devtest/flex-list.tmpl | 23 ++++++++++++++++++++---
 web_src/css/shared/flex-list.css | 15 ++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index f9087a57144..cbc26321393 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -1,8 +1,8 @@
 {{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="page-content devtest">
+	<div class="ui container">
+		<h1 class="gt-border-secondary-bottom">Flex List (standalone)</h1>
 		<div class="flex-list">
 			<div class="flex-item">
 				<div class="flex-item-leading">
@@ -84,6 +84,23 @@
 				</div>
 			</div>
 		</div>
+
+		<div class="divider gt-my-0"></div>
+
+		<h1>Flex List (with "ui segment")</h1>
+		<div class="ui attached segment">
+			<div class="flex-list">
+				<div class="flex-item">item 1</div>
+				<div class="flex-item">item 2</div>
+			</div>
+		</div>
+		<div class="ui attached segment">
+			<h1>Flex List (with "ui segment")</h1>
+			<div class="flex-list">
+				<div class="flex-item">item 1</div>
+				<div class="flex-item">item 2</div>
+			</div>
+		</div>
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index c73f78ebfe0..1489983cfdc 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -6,10 +6,7 @@
   display: flex;
   gap: 8px;
   align-items: flex-start;
-}
-
-.flex-item:not(:last-child) {
-  padding-bottom: 8px;
+  padding: 1em 0;
 }
 
 .flex-item-baseline {
@@ -92,5 +89,13 @@
 
 .flex-list > .flex-item + .flex-item {
   border-top: 1px solid var(--color-secondary);
-  padding-top: 8px;
+}
+
+/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly */
+.ui.segment > .flex-list:first-child > .flex-item:first-child {
+  padding-top: 0;
+}
+
+.ui.segment > .flex-list:last-child > .flex-item:last-child {
+  padding-bottom: 0;
 }