diff options
author | silverwind <me@silverwind.io> | 2023-02-09 06:42:18 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-09 13:42:18 +0800 |
commit | 90cf07a2c8dc2917d0c02648f0a69e0229cfce21 (patch) | |
tree | 58a362870617790e95fd2de82af13d6a19c49b7f /templates | |
parent | 87261f3fb95da92d74d72d057fc0f1e9819f16a7 (diff) | |
download | gitea-90cf07a2c8dc2917d0c02648f0a69e0229cfce21.tar.gz gitea-90cf07a2c8dc2917d0c02648f0a69e0229cfce21.zip |
Improve notification and stopwatch styles (#22169)
- Add dot-style indicators to notification and time tracker
- Slightly reduce whitespace between right-aligned icons
- Move notification icon to right on mobile
- Switch menu icon to SVG
<img width="270" alt="Screenshot 2022-12-19 at 19 40 32"
src="https://user-images.githubusercontent.com/115237/208496795-ce8734a0-f109-47b7-8eb8-96931e867b23.png">
<img width="607" alt="Screenshot 2022-12-19 at 19 41 04"
src="https://user-images.githubusercontent.com/115237/208496797-2ff68197-f520-4174-927e-ead15addd63e.png">
---------
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base/head_navbar.tmpl | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 90a54608e6..1c995e73e7 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -3,22 +3,24 @@ {{if .IsSigned}} {{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}} {{end}} - <div class="item brand" style="justify-content: space-between;"> + <div class="item brand sb"> <a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> </a> - {{if .IsSigned}} - <a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.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}} + <div class="df ac"> + {{if .IsSigned}} + <a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only mr-4 mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> + <span class="fitted item"> + {{svg "octicon-bell"}} + <span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}"> + {{$notificationUnreadCount}} + </span> </span> - </span> - </a> - {{end}} - <div class="ui basic icon button mobile-only" id="navbar-expand-toggle"> - <i class="sidebar icon"></i> + </a> + {{end}} + <div class="ui icon button mobile-only" id="navbar-expand-toggle"> + {{svg "octicon-three-bars"}} + </div> </div> </div> @@ -78,12 +80,10 @@ {{else if .IsSigned}} <div class="right stackable menu"> {{if EnableTimetracking}} - <a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}"> - <span class="text"> - <span class="fitted item"> - {{svg "octicon-stopwatch"}} - <span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span> - </span> + <a class="active-stopwatch-trigger item ui mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}"> + <span class="fitted relative"> + {{svg "octicon-stopwatch"}} + <span class="header-stopwatch-dot"></span> <span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span> </span> </a> @@ -118,16 +118,16 @@ </div> {{end}} - <a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> - <span class="text"> - <span class="fitted">{{svg "octicon-bell"}}</span> - <span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count"> + <a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> + <span class="fitted item"> + {{svg "octicon-bell"}} + <span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}"> {{$notificationUnreadCount}} </span> </span> </a> - <div class="ui dropdown jump item tooltip" data-content="{{.locale.Tr "create_new"}}"> + <div class="ui dropdown jump item tooltip mx-0" data-content="{{.locale.Tr "create_new"}}"> <span class="text"> <span class="fitted">{{svg "octicon-plus"}}</span> <span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span> @@ -150,7 +150,7 @@ </div><!-- end content create new menu --> </div><!-- end dropdown menu create new --> - <div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}"> + <div class="ui dropdown jump item tooltip mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}"> <span class="text"> {{avatar .SignedUser 24 "tiny"}} <span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span> |