fix(ui): make releases filtering responsive (#8399)
Some checks are pending
/ release (push) Waiting to run
testing-integration / test-unit (push) Waiting to run
testing-integration / test-sqlite (push) Waiting to run
testing / backend-checks (push) Waiting to run
testing / frontend-checks (push) Waiting to run
testing / test-unit (push) Blocked by required conditions
testing / test-e2e (push) Blocked by required conditions
testing / test-remote-cacher (redis) (push) Blocked by required conditions
testing / test-remote-cacher (valkey) (push) Blocked by required conditions
testing / test-remote-cacher (garnet) (push) Blocked by required conditions
testing / test-remote-cacher (redict) (push) Blocked by required conditions
testing / test-mysql (push) Blocked by required conditions
testing / test-pgsql (push) Blocked by required conditions
testing / test-sqlite (push) Blocked by required conditions
testing / security-check (push) Blocked by required conditions

* Improve consistency with other list pages (issues, PRs)
* Improve mobile usability
* Refresh the look a bit

---

Bug fix:

Currently on mobile filters get squashed and are not very usable:
https://codeberg.org/attachments/5d6ad65e-6ae5-4819-a3dc-75fb4fe77960

This commit:
https://codeberg.org/attachments/6eb0843e-49fd-4687-ab38-9ba60a6cc6c8

---

Consistency fix:

Use same element order and spacing as in issue list:
https://codeberg.org/attachments/9cdb042d-cdce-4243-a610-a1eabe3f4fc3

On desktop this means full width search bar:
https://codeberg.org/attachments/bdd50c3d-76f3-4ad0-884e-5717f9c86154

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8399
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-07-08 16:58:49 +02:00
parent eb8ed7e5e9
commit f8d6a61157
4 changed files with 20 additions and 15 deletions

View file

@ -2,24 +2,23 @@
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
{{if $canReadReleases}}
<div class="tw-flex">
<div class="tw-flex-1 tw-flex tw-items-center">
<h2 class="ui compact small menu small-menu-items">
<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumReleases "repo.n_release_one" "repo.n_release_few" (ctx.Locale.PrettyNumber .NumReleases)}}</a>
{{if $canReadCode}}
<a class="{{if or .PageIsTagList .PageIsSingleTag}}active {{end}}item" href="{{.RepoLink}}/tags{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (ctx.Locale.PrettyNumber .NumTags)}}</a>
{{end}}
</h2>
<div class="list-header">
<div class="switch">
<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumReleases "repo.n_release_one" "repo.n_release_few" (ctx.Locale.PrettyNumber .NumReleases)}}</a>
{{if $canReadCode}}
<a class="{{if or .PageIsTagList .PageIsSingleTag}}active {{end}}item" href="{{.RepoLink}}/tags{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (ctx.Locale.PrettyNumber .NumTags)}}</a>
{{end}}
</div>
{{if .ShowReleaseSearch}}
<form class="ignore-dirty tw-w-1/5 tw-mr-3" method="get">
<form class="ignore-dirty list-header-search release-list-search" method="get">
{{template "shared/search/combo" dict "Value" .Keyword}}
</form>
{{end}}
<div class="button-row">
<div class="button-sequence release-list-buttons">
{{if .EnableFeed}}
<a class="ui small button tw-h-full" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
{{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
{{svg "octicon-rss" 16}}
<label class="not-mobile">{{ctx.Locale.Tr "rss_feed"}}</label>
</a>
{{end}}
{{if and (not .PageIsTagList) .CanCreateRelease}}

View file

@ -70,7 +70,7 @@ func checkLatestReleaseAndCount(t *testing.T, session *TestSession, repoURL, ver
// Check release count in the counter on the Release/Tag switch, as well as that the tab is highlighted
if count < 10 { // Only check values less than 10, should be enough attempts before this test cracks
// 10 is the pagination limit, but the counter can have more than that
releaseTab := htmlDoc.doc.Find(".repository.releases .ui.compact.menu a.active.item[href$='/releases']")
releaseTab := htmlDoc.doc.Find(".repository.releases .switch a.active.item[href$='/releases']")
assert.Contains(t, releaseTab.Text(), strconv.Itoa(count)+" release") // Could be "1 release" or "4 releases"
}

View file

@ -41,11 +41,11 @@ func TestTagViewWithoutRelease(t *testing.T) {
// Test that the tags sub-menu is active and has a counter
htmlDoc := NewHTMLParser(t, resp.Body)
tagsTab := htmlDoc.Find(".small-menu-items .active.item[href$='/tags']")
tagsTab := htmlDoc.Find(".switch .active.item[href$='/tags']")
assert.Contains(t, tagsTab.Text(), "4 tags")
// Test that the release sub-menu isn't active
releaseLink := htmlDoc.Find(".small-menu-items .item[href$='/releases']")
releaseLink := htmlDoc.Find(".switch .item[href$='/releases']")
assert.False(t, releaseLink.HasClass("active"))
// Test that the title is displayed

View file

@ -110,6 +110,12 @@
.repository.new.release .field button {
margin-bottom: 1em;
}
.release-list-search {
order: 2 !important;
}
.release-list-buttons {
margin-left: auto;
}
}
.repository.new.release .field .attachment_edit {