git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki Activity

feat(ui): improve subscriptions screen filters (#9192)

Browse source 
Refreshed the screen at `/notifications/subscriptions` a little.

General improvements:
- Use the new switch style

Notable mobile usability improvements:
- Add a minimum gap between the Subscriptions/Watching switch and the Notifications button
- Add a minimum h gap between the All/Open/Closed switch and the dropdown filters
- Let the second row overflow instead of breaking the viewport

Preview:
- https://codeberg.org/attachments/1e5d2d2e-9f36-4117-a2bc-dd237aba0091
- https://codeberg.org/attachments/8c337739-3c8a-424a-ada8-20718800fe3b
- https://codeberg.org/attachments/d72027a1-5fe1-440c-9112-3a7fe7020b39

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9192
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-09-07 05:52:19 +02:00
commit 2cf5eb65a3
1 changed files with 15 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

32
templates/user/notification/notification_subscriptions.tmpl
View file

@ -1,7 +1,7 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user notification">
<div class="ui container">
<div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
<div class="tw-flex tw-items-center tw-justify-between tw-mb-4 tw-gap-2">
<div class="switch">
<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
{{ctx.Locale.Tr "notification.subscriptions"}}
@ -16,23 +16,21 @@
</div>
<div class="ui bottom active tab segment">
{{if eq .Status 1}}
<div class="tw-flex tw-justify-between">
<div class="tw-flex">
<div class="small-menu-items ui compact tiny menu">
<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{ctx.Locale.Tr "all"}}
</a>
<a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
{{ctx.Locale.Tr "repo.issues.open_title"}}
</a>
<a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a>
</div>
<div class="tw-flex tw-justify-between tw-flex-wrap tw-gap-y-4 tw-gap-x-2">
<div class="switch">
<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{ctx.Locale.Tr "all"}}
</a>
<a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{svg "octicon-issue-opened" 16}}
{{ctx.Locale.Tr "repo.issues.open_title"}}
</a>
<a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{svg "octicon-issue-closed" 16}}
{{ctx.Locale.Tr "repo.issues.closed_title"}}
</a>
</div>
<div class="tw-flex tw-justify-between">
<div class="tw-flex">
<div class="ui right aligned secondary filter menu labels">
<!-- Type -->
<div class="ui dropdown type jump item">