diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-30 07:13:30 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-29 23:13:30 +0000 |
| commit | 1a9998ce916c69a50e9141a86ed8105dabea80ef (patch) | |
| tree | ae0589dcd9593272b04e873af77c03362d84fd6a | |
| parent | 4f5a2117c37f1bf89d1686f407dff600a8783a97 (diff) | |
| download | gitea-1a9998ce916c69a50e9141a86ed8105dabea80ef.tar.gz gitea-1a9998ce916c69a50e9141a86ed8105dabea80ef.zip | |
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.
Co-authored-by: Giteabot <teabot@gitea.io>
| -rw-r--r-- | templates/devtest/flex-list.tmpl | 23 | ||||
| -rw-r--r-- | 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 f9087a5714..cbc2632139 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 c73f78ebfe..1489983cfd 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; } |