mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-17 08:15:56 +00:00
Code Issues Projects 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" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user notification"> <div role="main" aria-label="{{.Title}}" class="page-content user notification">
<div class="ui container"> <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"> <div class="switch">
<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item"> <a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
{{ctx.Locale.Tr "notification.subscriptions"}} {{ctx.Locale.Tr "notification.subscriptions"}}
@ -16,23 +16,21 @@
</div> </div>
<div class="ui bottom active tab segment"> <div class="ui bottom active tab segment">
{{if eq .Status 1}} {{if eq .Status 1}}
<div class="tw-flex tw-justify-between"> <div class="tw-flex tw-justify-between tw-flex-wrap tw-gap-y-4 tw-gap-x-2">
<div class="tw-flex"> <div class="switch">
<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}}">
<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}"> {{ctx.Locale.Tr "all"}}
{{ctx.Locale.Tr "all"}} </a>
</a> <a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}">
<a class="{{if eq .State "open"}}active {{end}}item" href="?sort={{$.SortType}}&state=open&issueType={{$.IssueType}}&labels={{$.Labels}}"> {{svg "octicon-issue-opened" 16}}
{{svg "octicon-issue-opened" 16 "tw-mr-2"}} {{ctx.Locale.Tr "repo.issues.open_title"}}
{{ctx.Locale.Tr "repo.issues.open_title"}} </a>
</a> <a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}">
<a class="{{if eq .State "closed"}}active {{end}}item" href="?sort={{$.SortType}}&state=closed&issueType={{$.IssueType}}&labels={{$.Labels}}"> {{svg "octicon-issue-closed" 16}}
{{svg "octicon-issue-closed" 16 "tw-mr-2"}} {{ctx.Locale.Tr "repo.issues.closed_title"}}
{{ctx.Locale.Tr "repo.issues.closed_title"}} </a>
</a>
</div>
</div> </div>
<div class="tw-flex tw-justify-between"> <div class="tw-flex">
<div class="ui right aligned secondary filter menu labels"> <div class="ui right aligned secondary filter menu labels">
<!-- Type --> <!-- Type -->
<div class="ui dropdown type jump item"> <div class="ui dropdown type jump item">