mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Improve notification icon and navbar (#25111)

Browse Source 
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">
pull/25132/head v1.21.0-dev
silverwind 1 year ago committed by GitHub
parent eac1bddb8d
commit b6bcb79987
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 51 additions and 44 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/base/head.tmpl
  2. 8
      templates/base/head_navbar.tmpl
  3. 2
      templates/status/500.tmpl
  4. 70
      web_src/css/base.css
  5. 2
      web_src/css/explore.css
  6. 2
      web_src/css/repo.css
  7. 7
      web_src/css/themes/theme-arc-green.css

2
templates/base/head.tmpl
Unescape 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 -->
{{end}}
{{if false}}

8
templates/base/head_navbar.tmpl
Unescape 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>

2
templates/status/500.tmpl
Unescape 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"}}">

70
web_src/css/base.css
Unescape View File

@ -195,8 +195,8 @@
--color-input-toggle-background: #dedede;
--color-input-border: #dedede;
--color-input-border-hover: #cecece;
--color-navbar: #f8f8f8;
--color-navbar-transparent: #f8f8f800;
--color-header-wrapper: #f8f8f8;
--color-header-wrapper-transparent: #f8f8f800;
--color-light: #00000006;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
@ -223,7 +223,8 @@
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #ffffff;
--color-nav-bg: #ffffff;
--color-nav-hover-bg: #ebebeb;
--color-label-text: #232323;
--color-label-bg: #cacaca5b;
--color-label-hover-bg: #cacacaa0;
@ -946,44 +947,44 @@ img.ui.avatar,
}
}
.following.bar {
margin: 0 !important;
}
.following.bar.light {
background: var(--color-header-bar);
#navbar {
display: flex;
align-items: center;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
width: 100vw;
min-height: 52px;
margin: 0 !important;
}
.following.bar .column .menu {
#navbar .column .menu {
margin-top: 0;
}
.following.bar .fitted .svg {
#navbar .fitted .svg {
margin-right: 0;
vertical-align: middle;
}
.following.bar .searchbox {
#navbar .searchbox {
background-color: var(--color-input-background) !important;
}
.following.bar .text .svg {
#navbar .text .svg {
width: 16px;
text-align: center;
}
.following.bar #navbar {
width: 100vw;
min-height: 52px;
#navbar a.item:hover {
background: var(--color-nav-hover-bg);
}
.following.bar #navbar .dropdown .avatar {
#navbar .dropdown .avatar {
margin-right: 0 !important;
}
@media (max-width: 767px) {
.following.bar #navbar:not(.shown) > *:not(:first-child) {
#navbar:not(.shown) > *:not(:first-child) {
display: none;
}
}
@ -1576,7 +1577,7 @@ img.ui.avatar,
.ui.menu.new-menu {
margin-bottom: 15px;
background: var(--color-navbar);
background: var(--color-header-wrapper);
border-bottom: 1px solid var(--color-secondary) !important;
overflow: auto;
}
@ -1591,7 +1592,7 @@ img.ui.avatar,
.ui.menu.new-menu::after {
position: absolute;
display: block;
background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 100%);
background: linear-gradient(to right, var(--color-header-wrapper-transparent), var(--color-header-wrapper) 100%);
content: '';
right: 0;
height: 39px;
@ -2126,24 +2127,31 @@ a.ui.basic.label:hover {
width: 13px;
height: 13px;
background: var(--color-primary);
border: 2px solid var(--color-header-bar);
border: 2px solid var(--color-nav-bg);
border-radius: 100%;
}
.notification_count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 7px;
top: -9px;
min-width: 1.5em;
text-align: center;
left: 6px;
top: -8px;
min-width: 17px;
min-height: 17px;
background: var(--color-primary);
border: 2px solid var(--color-header-bar);
color: var(--color-header-bar);
padding: 2.75px;
border-radius: 1em;
font-size: 11px;
border: 2px solid var(--color-nav-bg);
color: var(--color-nav-bg);
border-radius: 17px;
padding: 0 3.5px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
line-height: .7;
}
#navbar a.item:hover .notification_count {
border-color: var(--color-nav-hover-bg);
}
.rss-icon {

2
web_src/css/explore.css
Unescape View File

@ -1,6 +1,6 @@
.explore .navbar {
margin-bottom: 15px !important;
background-color: var(--color-navbar) !important;
background-color: var(--color-header-wrapper) !important;
border-width: 1px !important;
}

2
web_src/css/repo.css
Unescape View File

@ -132,7 +132,7 @@
}
.repository .header-wrapper {
background-color: var(--color-navbar);
background-color: var(--color-header-wrapper);
}
.repository .header-wrapper .ui.tabs.divider {

7
web_src/css/themes/theme-arc-green.css
Unescape View File

@ -180,8 +180,8 @@
--color-input-toggle-background: #454a57;
--color-input-border: #454a57;
--color-input-border-hover: #505667;
--color-navbar: #2a2e3a;
--color-navbar-transparent: #2a2e3a00;
--color-header-wrapper: #2a2e3a;
--color-header-wrapper-transparent: #2a2e3a00;
--color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #ffffff28;
@ -207,7 +207,8 @@
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #2e323e;
--color-nav-bg: #2e323e;
--color-nav-hover-bg: #434651;
--color-label-text: #dfe3ec;
--color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0;

Write Preview
Loading…
Cancel
Save