magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-12-02 23:06:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make notification bell more prominent on mobile (#20108, #20236, #20251) (#20269)

Browse source 
Backport #20108
Backport #20236
Backport #20251

Make notification bell more prominent on mobile

Co-authored-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: Tyrone Yeh <siryeh@gmail.com>
Signed-off-by: Andrew Thornton <art27@cantab.net>
This commit is contained in:
zeripath 2022-07-07 16:48:03 +01:00 committed by GitHub
parent 654c173b9d
commit 039a60225a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
templates/base/head_navbar.tmpl
View file

@ -1,8 +1,22 @@
<div class="ui container" id="navbar"> <div class="ui container" id="navbar">
{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
{{end}}
<div class="item brand" style="justify-content: space-between;"> <div class="item brand" style="justify-content: space-between;">
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}"> <a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}">
<img class="ui mini image" width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.i18n.Tr "logo"}}" aria-hidden="true"> <img class="ui mini image" width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.i18n.Tr "logo"}}" aria-hidden="true">
</a> </a>
{{if .IsSigned}}
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.i18n.Tr "notifications"}}'>
<span class="text black">
<span class="fitted">{{svg "octicon-bell"}}</span>
<span class="ui red label mini{{if not $notificationUnreadCount}} hidden{{end}} notification_count">
{{$notificationUnreadCount}}
</span>
</span>
</a>
{{end}}
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle"> <div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
<i class="sidebar icon"></i> <i class="sidebar icon"></i>
</div> </div>
@ -100,12 +114,9 @@
</div> </div>
</div> </div>
<a href="{{AppSubUrl}}/notifications" class="item tooltip" data-content='{{.i18n.Tr "notifications"}}'> <a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content='{{.i18n.Tr "notifications"}}'>
<span class="text"> <span class="text">
<span class="fitted">{{svg "octicon-bell"}}</span> <span class="fitted">{{svg "octicon-bell"}}</span>
<span class="sr-mobile-only">{{.i18n.Tr "notifications"}}</span>
{{$notificationUnreadCount := 0}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count"> <span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
{{$notificationUnreadCount}} {{$notificationUnreadCount}}
</span> </span>

4
web_src/less/_base.less
View file

@ -1329,7 +1329,7 @@ footer {
@media @mediaMdAndUp { @media @mediaMdAndUp {
.mobile-only, .mobile-only,
.ui.button.mobile-only { .ui.button.mobile-only {
display: none; display: none !important;
} }
// has the same behaviour of sr-only, hiding the content for // has the same behaviour of sr-only, hiding the content for
@ -1341,7 +1341,7 @@ footer {
@media @mediaSm { @media @mediaSm {
.not-mobile { .not-mobile {
display: none; display: none !important;
} }
} }