1
1
mirror of https://github.com/go-gitea/gitea synced 2025-07-22 18:28:37 +00:00

Improve notification icon and navbar (#25111)

Improvements to the notification icon and `<nav>`:

- Add a opaque color for header hover and use it, allowing the border to
be the right color on hover (sadly, not otherwise possible with CSS, not
even `color-mix`).
- Increase font size by 1px
- Use flexbox for slightly better text centering
- Reduce padding of user and add repo button, add margin on right side
of user menu
- Remove the `following bar` wrapper on navbar

<img width="176" alt="Screenshot 2023-06-07 at 00 07 08"
src="https://github.com/go-gitea/gitea/assets/115237/23cdc3d6-7f63-49df-bec3-f2e75e32a304">
<img width="63" alt="Screenshot 2023-06-07 at 00 07 14"
src="https://github.com/go-gitea/gitea/assets/115237/fae602c2-4467-4d50-b1ec-56317843f9a2">
<img width="84" alt="Screenshot 2023-06-07 at 00 07 36"
src="https://github.com/go-gitea/gitea/assets/115237/c48141b8-0b3c-48cc-846a-3a272524dbdb">
<img width="329" alt="Screenshot 2023-06-07 at 00 25 10"
src="https://github.com/go-gitea/gitea/assets/115237/cda612f1-426e-466b-a351-fc992bfd18fd">
<img width="186" alt="Screenshot 2023-06-07 at 00 35 45"
src="https://github.com/go-gitea/gitea/assets/115237/04484a2e-9bbf-493c-aa26-8e936da008fa">
<img width="797" alt="Screenshot 2023-06-07 at 16 57 40"
src="https://github.com/go-gitea/gitea/assets/115237/e7ccb672-5807-4cb6-b306-b18ae0c7e321">
This commit is contained in:
silverwind
2023-06-08 00:21:57 +02:00
committed by GitHub
parent eac1bddb8d
commit b6bcb79987
7 changed files with 51 additions and 44 deletions

View File

@@ -73,9 +73,7 @@
{{template "custom/body_inner_pre" .}}
{{if not .PageIsInstall}}
<div class="ui top secondary stackable main menu following bar light">
{{template "base/head_navbar" .}}
</div><!-- end bar -->
{{template "base/head_navbar" .}}
{{end}}
{{if false}}

View File

@@ -1,4 +1,4 @@
<nav class="ui container" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
@@ -78,7 +78,7 @@
</div><!-- end dropdown avatar menu -->
</div>
{{else if .IsSigned}}
<div class="right stackable menu">
<div class="right stackable menu gt-mr-4">
{{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
<span class="fitted gt-relative">
@@ -125,7 +125,7 @@
</span>
</a>
<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "create_new"}}">
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-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>
@@ -148,7 +148,7 @@
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item gt-mx-0" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>

View File

@@ -15,7 +15,7 @@
</head>
<body>
<div class="full height">
<nav class="ui secondary menu following bar light">
<nav class="ui container secondary stackable main menu" id="navbar">
<div class="ui container gt-df">
<div class="item brand gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">