oss/forgejo
oss/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-15 19:42: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

4
templates/explore/repo_list.tmpl
View file

@ -11,7 +11,7 @@
<a class="text primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
{{end}}
<a class="text primary name" href="{{.Link}}">{{.Name}}</a>
<span class="label-list">
<span>
{{if .IsArchived}}
<span class="ui label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
{{end}}
@ -56,7 +56,7 @@
<div class="flex-item-body">{{$description}}</div>
{{end}}
{{if .Topics}}
<div class="label-list">
<div class="repo-topics">
{{range .Topics}}
{{if ne . ""}}<a class="ui label" href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1">{{.}}</a>{{end}}
{{end}}

11
templates/repo/home.tmpl
View file

@ -11,10 +11,13 @@
{{if .Repository.Website}}<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
</div>
</div>
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
{{/* it should match the code in issue-home.js */}}
{{range .Topics}}<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
<div class="repo-topics tw-my-2" id="repo-topics">
{{range .Topics}}
<a class="repo-topic ui large label" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
{{end}}
</div>
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}

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%;