oss/forgejo
oss/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-20 19:52:04 +00:00
Code Wiki Activity

feat(ui): improve display of repo topics (#9402)

Browse source 
* removed unused class `label-list`
* introduced a new class `repo-topics` to better maintain consistency across two different places - explore and repo overview
    * fixed vertical gap via flex on on explore
    * decreased usage of Tailwind in overview, decreased gaps - usually where topics or more often labels are shown in the UI they are quite dense and it makes sense as they also have padding

Explore - normal (desktop) - no changes

Before: https://codeberg.org/attachments/a4ea53b2-c38c-4dd8-adcc-bc6a3804dfe8
After: https://codeberg.org/attachments/94209a72-8b5f-45d7-b24a-5fa13ced3157

Explore - overflowing (mobile or too many tags) - fixed vertical margin

Before: https://codeberg.org/attachments/bad9531f-d4c7-4043-ac94-e57895c45b67
After: https://codeberg.org/attachments/269c39b8-939b-4dbb-af6a-938c2c2fd820

Repo - normal - decreased gap

Before: https://codeberg.org/attachments/74ce2114-7aea-47ec-883d-4115d81a96b4
After: https://codeberg.org/attachments/551ba599-a87d-4538-82c4-761e0c3098c9

Repo - overflowing - decreased gap while maintaining good gap for the manage button

Before: https://codeberg.org/attachments/a2ab2cd2-3080-475f-875a-8885981a554d
After: https://codeberg.org/attachments/8a33fe42-57e1-4aba-9e7c-da79bfe7d776

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9402
Reviewed-by: Lucas <sclu1034@noreply.codeberg.org>
This commit is contained in:
0ko 2025-09-24 17:45:31 +02:00
parent a0011375b7
commit 21798fa0d0
3 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web_src/css/repo.css
View file

@ -2329,12 +2329,23 @@ tbody.commit-list {
top: -2px;
}
#repo-topics .repo-topic {
.repo-topics {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.repo-topics .repo-topic {
font-weight: var(--font-weight-normal);
cursor: pointer;
margin: 0;
}
.repo-topics .repo-topic:last-of-type {
margin-right: 0.5rem;
}
#new-dependency-drop-list.ui.selection.dropdown {
min-width: 0;
width: 100%;