From 499d417de5a19c907504155d839b79f1a4e0d9c1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 20 Dec 2024 13:22:41 +0800 Subject: [PATCH 1/4] fix --- templates/base/head_navbar.tmpl | 26 ++++++------- web_src/css/modules/navbar.css | 69 +++++++++++++++------------------ 2 files changed, 44 insertions(+), 51 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 951ee590d1cc7..f447429f03f4f 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -11,9 +11,9 @@ -
+
{{if and .IsSigned EnableTimetracking .ActiveStopwatch}} - +
{{svg "octicon-stopwatch"}} @@ -21,14 +21,14 @@ {{end}} {{if .IsSigned}} - +
{{svg "octicon-bell"}} {{$notificationUnreadCount}}
{{end}} - +
@@ -64,9 +64,9 @@
{{if and .IsSigned .MustChangePassword}}
- + {{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}} - {{.SignedUser.Name}} + {{.SignedUser.Name}} {{svg "octicon-triangle-down"}}
@@ -83,7 +83,7 @@
{{else if .IsSigned}} {{if and EnableTimetracking .ActiveStopwatch}} - +
{{svg "octicon-stopwatch"}} @@ -91,14 +91,14 @@ {{end}} - +
{{svg "octicon-bell"}} {{$notificationUnreadCount}}
-
+
{{svg "octicon-plus"}} {{svg "octicon-triangle-down"}} @@ -121,12 +121,13 @@
-
- +
+ {{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}} - {{.SignedUser.Name}} + {{.SignedUser.Name}} {{svg "octicon-triangle-down"}} + {{if .IsAdmin}}admin{{end}}
{{ctx.Locale.Tr "signed_in_as"}} {{.SignedUser.Name}} @@ -157,7 +158,6 @@ {{if .IsAdmin}}
- {{svg "octicon-server"}} {{ctx.Locale.Tr "admin_panel"}} diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 556da2df3b051..95d49d63f4f37 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -4,51 +4,34 @@ justify-content: space-between; background: var(--color-nav-bg); border-bottom: 1px solid var(--color-secondary); - margin: 0 !important; padding: 0 10px; } -#navbar, #navbar .navbar-left, #navbar .navbar-right { - min-height: 49px; /* +1px border-bottom */ -} - -#navbar .navbar-left, -#navbar .navbar-right { - margin: 0; display: flex; align-items: center; gap: 5px; -} - -#navbar-logo { - margin: 0; + min-height: 49px; /* +1px border-bottom */ } .navbar-left > .item, -.navbar-right > .item { +.navbar-right > .item, +.navbar-mobile-right > .item { + flex: 0 0 auto; + display: flex; + align-items: center; color: var(--color-nav-text); position: relative; text-decoration: none; - line-height: var(--line-height-default); - flex: 0 0 auto; - font-weight: var(--font-weight-normal); - align-items: center; - padding: .78571429em .92857143em; - border-radius: .28571429rem; -} - -#navbar .item { min-height: 36px; min-width: 36px; - padding-top: 3px; - padding-bottom: 3px; - display: flex; + padding: 3px 13px; + border-radius: 4px; } -#navbar .dropdown .item { - justify-content: stretch; +#navbar .item.active { + background: var(--color-active); } #navbar a.item:hover, @@ -56,9 +39,8 @@ background: var(--color-nav-hover-bg); } -#navbar .secondary.menu > .item > .svg, -#navbar .right.menu > .item > .svg { - margin-right: 0; +#navbar .item.ui.dropdown { + padding-right: 5px; } @media (max-width: 767.98px) { @@ -80,12 +62,12 @@ } #navbar .navbar-mobile-right { display: flex; - margin: 0 0 0 auto !important; - width: auto !important; + margin: 0 0 0 auto; + width: auto; } #navbar .navbar-mobile-right > .item { display: flex; - width: auto !important; + width: auto; } /* show items if the navbar is open */ #navbar.navbar-menu-open { @@ -96,13 +78,12 @@ flex-direction: column; } #navbar.navbar-menu-open .navbar-left { - display: flex; flex-wrap: wrap; } - #navbar.navbar-menu-open .item { + #navbar.navbar-menu-open .navbar-left > .item, + #navbar.navbar-menu-open .navbar-right > .item { display: flex; width: 100%; - margin: 0; } #navbar.navbar-menu-open .navbar-left #navbar-logo { justify-content: flex-start; @@ -111,14 +92,26 @@ #navbar.navbar-menu-open .navbar-left .navbar-mobile-right { justify-content: flex-end; width: 50%; - min-height: 48px; + min-height: 49px; } #navbar #mobile-stopwatch-icon, #navbar #mobile-notifications-icon { - margin-right: 6px !important; + margin-right: 6px; } } +#navbar .ui.dropdown .navbar-profile-admin { + display: block; + position: absolute; + font-size: 10px; + color: var(--color-white); + background: var(--color-red); + padding: 2px 4px; + border-radius: 10px; + top: -3px; + left: 22px; +} + #navbar a.item:hover .notification_count, #navbar a.item:hover .header-stopwatch-dot { border-color: var(--color-nav-hover-bg); From 2191fe3f3ad72c2714f5cdf2973e584388c29441 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 20 Dec 2024 14:21:35 +0800 Subject: [PATCH 2/4] use primary color --- web_src/css/modules/navbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 95d49d63f4f37..cfe49c33c358a 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -105,7 +105,7 @@ position: absolute; font-size: 10px; color: var(--color-white); - background: var(--color-red); + background: var(--color-primary); padding: 2px 4px; border-radius: 10px; top: -3px; From 3f0285446b405566c3c5d7a00ce2f2b683a19c53 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 20 Dec 2024 21:28:19 +0800 Subject: [PATCH 3/4] Update templates/base/head_navbar.tmpl --- templates/base/head_navbar.tmpl | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index f447429f03f4f..ed7a8d6f2433e 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -127,6 +127,7 @@ {{.SignedUser.Name}} {{svg "octicon-triangle-down"}} + {{/* do not localize it, here it needs the fixed length (width) to make UI comfortable */}} {{if .IsAdmin}}admin{{end}}
From 4d4b9ba305cbc831269964cccaee3f2f26cf2a62 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 21 Dec 2024 00:10:55 +0800 Subject: [PATCH 4/4] match notification ball --- web_src/css/modules/navbar.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index cfe49c33c358a..b5bc95b058b30 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -104,12 +104,13 @@ display: block; position: absolute; font-size: 10px; - color: var(--color-white); + font-weight: var(--font-weight-bold); + color: var(--color-nav-bg); background: var(--color-primary); padding: 2px 4px; border-radius: 10px; - top: -3px; - left: 22px; + top: -1px; + left: 18px; } #navbar a.item:hover .notification_count,