mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Unify usercards margins (#3915) 

These are some slight design changes to how usercards are presented.

- `margin`: removed one of the sides so the margins are the same in both axis
- `margin`: increased from 10px to 15px
Previously it was (Y, X) = (20, 10); now it's (15, 15)
 - `width`: slightly decreased so that the point, where too small screen width causes card relocation to another row, doesn't increase
- `padding`: this change does nothing visually. `padding-bottom` was useless because padding was already set for all sides by another rule `.ui.segment {padding: 1em};`. This change just ensures that padding stays the same for all sides even if `.ui.segment` changes, instead of causing inconsistency
- `margin-bottom`: added as an override to margin caused by `display: flex`. From my research, usually there's `25px` gap between the content and the pagination. It was `39px` here, now it's `25px` too

### Before

![image](/attachments/0ebf6f44-6b27-4d4d-8856-77568291518c)

### After

![image](/attachments/1e0a3d95-ac49-4d10-8e00-86cc041d4338)

I can't show the distance between the content and the pagination, but the change does work when applying via devtools on https://codeberg.org/forgejo/forgejo/stars.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3915
Reviewed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
Reviewed-by: Caesar Schinas <caesar@caesarschinas.com>
This commit is contained in:
0ko 2024-05-27 04:22:48 +00:00
parent 4a9dd87496
commit b2eba34506
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web_src/css/repo.css
View File

@ -2108,13 +2108,14 @@ td .commit-summary {
padding: 0;
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
.user-cards .list .item {
list-style: none;
width: 32%;
margin: 10px 10px 10px 0;
padding-bottom: 14px;
width: 31%;
margin: 15px 15px 0 0;
padding: 14px;
float: left;
}