tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-10-31 11:28:24 +00:00
Code Releases Activity

Improve flex list item padding (#26779)

Browse Source 
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>
This commit is contained in:
wxiaoguang
2023-08-30 07:13:30 +08:00
committed by GitHub
parent 4f5a2117c3
commit 1a9998ce91
2 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web_src/css/shared/flex-list.css
View File

@@ -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;
}