oss/forgejo
oss/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-08-01 17:38:33 +00:00
Code Wiki 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](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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
templates/devtest/flex-list.tmpl
View file

@ -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" .}}