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

@@ -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>

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;
   }
 }