oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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>

authored by

wxiaoguang
Giteabot and committed by
GitHub 1a9998ce 4f5a2117

+30 -8
+20 -3
templates/devtest/flex-list.tmpl
··· 1 1 {{template "base/head" .}} 2 2 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> 3 - <div class="page-content devtest ui container"> 4 - <div> 5 - <h1>Flex List</h1> 3 + <div class="page-content devtest"> 4 + <div class="ui container"> 5 + <h1 class="gt-border-secondary-bottom">Flex List (standalone)</h1> 6 6 <div class="flex-list"> 7 7 <div class="flex-item"> 8 8 <div class="flex-item-leading"> ··· 82 82 when inside header, the trailing part will wrap below the title 83 83 </div> 84 84 </div> 85 + </div> 86 + </div> 87 + 88 + <div class="divider gt-my-0"></div> 89 + 90 + <h1>Flex List (with "ui segment")</h1> 91 + <div class="ui attached segment"> 92 + <div class="flex-list"> 93 + <div class="flex-item">item 1</div> 94 + <div class="flex-item">item 2</div> 95 + </div> 96 + </div> 97 + <div class="ui attached segment"> 98 + <h1>Flex List (with "ui segment")</h1> 99 + <div class="flex-list"> 100 + <div class="flex-item">item 1</div> 101 + <div class="flex-item">item 2</div> 85 102 </div> 86 103 </div> 87 104 </div>
+10 -5
web_src/css/shared/flex-list.css
··· 6 6 display: flex; 7 7 gap: 8px; 8 8 align-items: flex-start; 9 - } 10 - 11 - .flex-item:not(:last-child) { 12 - padding-bottom: 8px; 9 + padding: 1em 0; 13 10 } 14 11 15 12 .flex-item-baseline { ··· 92 89 93 90 .flex-list > .flex-item + .flex-item { 94 91 border-top: 1px solid var(--color-secondary); 95 - padding-top: 8px; 92 + } 93 + 94 + /* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly */ 95 + .ui.segment > .flex-list:first-child > .flex-item:first-child { 96 + padding-top: 0; 97 + } 98 + 99 + .ui.segment > .flex-list:last-child > .flex-item:last-child { 100 + padding-bottom: 0; 96 101 }