forked from NYANDEV/forgejo
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:
parent
654c173b9d
commit
039a60225a
2 changed files with 17 additions and 6 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue