Skip to content

Make notification bell more prominent on mobile #20108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jul 4, 2022
Merged

Make notification bell more prominent on mobile #20108

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8accfa6
Adjust template for #20069 smallbell
tyroneyeh Jun 23, 2022
368fb00
Adjust notification Unread Count variable to global and count bell po…
tyroneyeh Jun 23, 2022
ebf1081
Adjust bell icon style
tyroneyeh Jun 24, 2022
9849c91
Adjust smallbell to middle
tyroneyeh Jun 24, 2022
7ae1afd
Avoid using inline styles
tyroneyeh Jun 24, 2022
20d9195
move notificationUnreadCount to a general code block, reduce changed …
wxiaoguang Jun 25, 2022
18f6e8e
Merge branch 'main' into 20069_smallbell_for_mobile
wxiaoguang Jun 25, 2022
124e478
Merge branch 'main' into 20069_smallbell_for_mobile
lunny Jun 27, 2022
6fc1ede
Solved conflicts
tyroneyeh Jul 4, 2022
5f700d5
Merge branch 'main' into 20069_smallbell_for_mobile
tyroneyeh Jul 4, 2022
eb4f475
Merge branch 'main' into 20069_smallbell_for_mobile
6543 Jul 4, 2022
7c76da6
Merge branch 'main' into 20069_smallbell_for_mobile
6543 Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions templates/base/head_navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
<div class="ui container" id="navbar">
<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>
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
<i class="sidebar icon"></i>
</div>
<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">
<span class="fitted item">{{svg "octicon-bell"}}</span>
{{$notificationUnreadCount := 0}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
{{$notificationUnreadCount}}
</span>
</span>
</a>
{{end}}
</div>

{{if and .IsSigned .MustChangePassword}}
Expand Down Expand Up @@ -100,10 +112,9 @@
</div>
</div>

<a href="{{AppSubUrl}}/notifications" class="item tooltip" data-content='{{.i18n.Tr "notifications"}}'>
<a href="{{AppSubUrl}}/notifications" class="tooltip not-mobile" style="align-self:center;color:var(--color-text);margin-bottom:2px" 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">
Expand Down