mirror of
1
Fork 0

Reduce table padding globally (#25568)

Fomantic's tables have too much padding. Reduce it so we have more
information density in them. Especially the admin tables need this
because they are bursting already because of column count.

## Admin repolist before and after

<img width="909" alt="Screenshot 2023-06-28 at 20 27 55"
src="https://github.com/go-gitea/gitea/assets/115237/954c925c-8db5-47ce-ae51-a2168b857014">
<img width="897" alt="Screenshot 2023-06-28 at 20 36 03"
src="https://github.com/go-gitea/gitea/assets/115237/0bddc09a-9117-48b3-a17e-3d34c58d8d3d">

## Other tables

<img width="1230" alt="Screenshot 2023-06-28 at 20 36 22"
src="https://github.com/go-gitea/gitea/assets/115237/38f555b6-a7ce-416a-9f1f-706eaf18863b">
<img width="1236" alt="Screenshot 2023-06-28 at 20 26 37"
src="https://github.com/go-gitea/gitea/assets/115237/82b2878e-358c-4dc2-a6b4-c66e43cd2dfb">
<img width="1231" alt="Screenshot 2023-06-28 at 20 59 30"
src="https://github.com/go-gitea/gitea/assets/115237/c6a92e55-a3a3-4c80-9a0d-50aebb49886c">

Files table is unaffected because it has custom padding already.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-06-29 06:40:03 +02:00 committed by GitHub
parent c6f1fb1c6d
commit c76b221cca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 0 deletions

View File

@ -898,6 +898,24 @@ a.label,
color: var(--color-text); color: var(--color-text);
} }
/* reduce table padding, needed especially for dense admin tables */
.ui.table > thead > tr > th,
.ui.table > tbody > tr > td,
.ui.table > tr > td {
padding: 6px 3px;
}
/* use more horizontal padding on first and last items for visuals */
.ui.table > thead > tr > th:first-of-type,
.ui.table > tbody > tr > td:first-of-type,
.ui.table > tr > td:first-of-type {
padding-left: 10px;
}
.ui.table > thead > tr > th:last-of-type,
.ui.table > tbody > tr > td:last-of-type,
.ui.table > tr > td:last-of-type {
padding-right: 10px;
}
img.ui.avatar, img.ui.avatar,
.ui.avatar img, .ui.avatar img,
.ui.avatar svg { .ui.avatar svg {