From 039a60225a4b71e0e880db3dfd7b640fa02f5e66 Mon Sep 17 00:00:00 2001
From: zeripath <art27@cantab.net>
Date: Thu, 7 Jul 2022 16:48:03 +0100
Subject: [PATCH] Make notification bell more prominent on mobile (#20108,
#20236, #20251) (#20269)
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>
---
templates/base/head_navbar.tmpl | 19 +++++++++++++++----
web_src/less/_base.less | 4 ++--
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index fab1d2d0b1..e367575bca 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -1,8 +1,22 @@
<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;">
<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">
</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">
<i class="sidebar icon"></i>
</div>
@@ -100,12 +114,9 @@
</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="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">
{{$notificationUnreadCount}}
</span>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 78f32956ef..638801e392 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1329,7 +1329,7 @@ footer {
@media @mediaMdAndUp {
.mobile-only,
.ui.button.mobile-only {
- display: none;
+ display: none !important;
}
// has the same behaviour of sr-only, hiding the content for
@@ -1341,7 +1341,7 @@ footer {
@media @mediaSm {
.not-mobile {
- display: none;
+ display: none !important;
}
}