diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl index 20b66b2ec3791..79212d82a5e98 100644 --- a/templates/user/dashboard/navbar.tmpl +++ b/templates/user/dashboard/navbar.tmpl @@ -77,7 +77,7 @@ {{end}} {{if .ContextUser.IsOrganization}} -
+
{{svg "octicon-rss"}} {{.locale.Tr "activities"}} diff --git a/web_src/css/base.css b/web_src/css/base.css index d655670468f45..e4eea22d2a263 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -961,47 +961,67 @@ img.ui.avatar, margin: 0 !important; } -#navbar .fitted .svg { - margin-right: 0; - vertical-align: middle; -} - -#navbar .text .svg { - width: 16px; - text-align: center; -} - #navbar a.item:hover { background: var(--color-nav-hover-bg); } -#navbar .dropdown .avatar { - margin-right: 0 !important; +#navbar .navbar-mobile-right { + margin-left: auto; } @media (max-width: 767.98px) { - #navbar { - align-items: stretch; + /* hide all items */ + #navbar .item { + display: none; } - #navbar.navbar-menu-open { - padding-bottom: 8px; + /* show the first navbar item (logo and its mobile right items) */ + #navbar > .item:first-child, + #navbar .navbar-mobile-right > .item { + display: flex; } - #navbar.navbar-menu-open .item.brand { - padding-bottom: 2px; + /* show items if the navbar is open */ + #navbar.navbar-menu-open .item { + display: flex; } - #navbar:not(.navbar-menu-open) > *:not(.item.brand) { +} + +@media (min-width: 767.98px) { + #navbar .navbar-mobile-right, + #navbar .mobile-only { display: none; } } -.right.stackable.menu { - /* responsive fix: this makes sure that the right menu when the page */ - /* is on mobile view will have elements stacked on top of each other. */ - /* no, stackable won't work on right menus. */ - margin-left: auto; +#navbar .navbar-mobile-right .item { + width: auto !important; +} + +#navbar a.item .notification_count { display: flex; - align-items: inherit; - flex-direction: inherit; + align-items: center; + justify-content: center; + position: absolute; + left: 20px; + top: 0; + min-width: 17px; + min-height: 17px; + background: var(--color-primary); + 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); +} + +#navbar a.item:hover .notification_count { + border-color: var(--color-nav-hover-bg); +} + +#navbar .right.menu { + width: 100%; + justify-content: flex-end; } .ui.pagination.menu .active.item { @@ -1530,27 +1550,6 @@ img.ui.avatar, text-align: center; } -/* Conditional display */ -@media (min-width: 768px) { - .mobile-only, - .ui.button.mobile-only { - display: none !important; - } - - /* has the same behaviour of sr-only, hiding the content for */ - /* non-screenreaders, but is shown on mobile devices. */ - .sr-mobile-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } -} - @media (max-width: 767.98px) { /* double selector so it wins over .gt-df etc */ .not-mobile.not-mobile { @@ -1558,28 +1557,6 @@ img.ui.avatar, } } -/* Accessibility for screen readers */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} - .ui.menu.new-menu { margin-bottom: 15px; background: var(--color-header-wrapper); @@ -2127,8 +2104,8 @@ a.ui.basic.label:hover { .header-stopwatch-dot { position: absolute; - left: 8px; - top: -8px; + left: 25px; + top: 0; width: 13px; height: 13px; background: var(--color-primary); @@ -2136,29 +2113,6 @@ a.ui.basic.label:hover { border-radius: 100%; } -.notification_count { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - left: 6px; - top: -8px; - min-width: 17px; - min-height: 17px; - background: var(--color-primary); - 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); -} - -#navbar a.item:hover .notification_count { - border-color: var(--color-nav-hover-bg); -} - .rss-icon { display: inline-flex; color: var(--color-text-light-1); diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index ee7d805e77a3b..25a94c1fa77bb 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -12,7 +12,6 @@
- {{ textNewRepo }}
@@ -121,7 +120,6 @@
- {{ textNewOrg }}
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 5e7e58e256065..cb50ebcae0000 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -22,11 +22,12 @@ export function initGlobalFormDirtyLeaveConfirm() { export function initHeadNavbarContentToggle() { const navbar = document.getElementById('navbar'); const btn = document.getElementById('navbar-expand-toggle'); - let isExpanded = false; + if (!navbar || !btn) return; + btn.addEventListener('click', () => { - isExpanded = !isExpanded; - navbar.classList.toggle('navbar-menu-open', isExpanded); - btn.classList.toggle('active', isExpanded); + const isExpanded = btn.classList.contains('active'); + navbar.classList.toggle('navbar-menu-open', !isExpanded); + btn.classList.toggle('active', !isExpanded); }); } diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 26d8e2247214d..16b8097cf27bb 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -110,7 +110,6 @@ function showLineButton() { trigger: 'click', content: menu, placement: 'right-start', - role: 'menu', interactive: 'true', }); } diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 175d6b1f59ee8..0dc5728f58bc0 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -469,7 +469,6 @@ export function initRepoPullRequestReview() { content: $panel[0], placement: 'bottom', trigger: 'click', - role: 'menu', maxWidth: 'none', interactive: true, hideOnClick: true, diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index d9f496fb8581c..13a4d3e03aae6 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -27,7 +27,7 @@ export function createTippy(target, opts = {}) { visibleInstances.add(instance); }, arrow: ``, - ...(opts?.role && {theme: opts.role}), + role: 'menu', ...opts, }); @@ -68,6 +68,7 @@ function attachTooltip(target, content = null) { content, delay: 100, role: 'tooltip', + theme: 'tooltip', hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), From d7a11f2e34dd87dd8ee061ce722af83325c24241 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 9 Jun 2023 00:44:07 +0800 Subject: [PATCH 04/17] revert tippy default theme --- web_src/js/modules/tippy.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 13a4d3e03aae6..743cb10e5a0c7 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -3,6 +3,9 @@ import tippy from 'tippy.js'; const visibleInstances = new Set(); export function createTippy(target, opts = {}) { + // do not use "tooltip" (tippy's default), + // otherwise the "auto hide tooltip" mechanism would cause tippy popups without role (default to tooltip) been incorrectly hidden. + if (!opts.role) opts.role = 'menu'; const instance = tippy(target, { appendTo: document.body, animation: false, @@ -27,7 +30,7 @@ export function createTippy(target, opts = {}) { visibleInstances.add(instance); }, arrow: ``, - role: 'menu', + ...(opts?.role && {theme: opts.role}), ...opts, }); @@ -68,7 +71,6 @@ function attachTooltip(target, content = null) { content, delay: 100, role: 'tooltip', - theme: 'tooltip', hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), From 4da5532299d26fa053de977863514a3ab422f797 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 8 Jun 2023 18:47:13 +0200 Subject: [PATCH 05/17] padding tweaks --- templates/base/head_navbar.tmpl | 2 +- web_src/css/base.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index ff7721e3b06a5..4c0682064bada 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -18,7 +18,7 @@ {{$notificationUnreadCount}} {{end}} -
+
diff --git a/web_src/css/base.css b/web_src/css/base.css index e4eea22d2a263..1ec03624e299a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -983,6 +983,9 @@ img.ui.avatar, #navbar.navbar-menu-open .item { display: flex; } + #navbar.navbar-menu-open > .item:first-child { + padding-bottom: 0; + } } @media (min-width: 767.98px) { From 1010fb1c492873c0889b3055ddda8240d0824574 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 8 Jun 2023 18:59:23 +0200 Subject: [PATCH 06/17] change defaults for tippy --- web_src/js/modules/tippy.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 743cb10e5a0c7..55afbe07c0bcc 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -3,9 +3,6 @@ import tippy from 'tippy.js'; const visibleInstances = new Set(); export function createTippy(target, opts = {}) { - // do not use "tooltip" (tippy's default), - // otherwise the "auto hide tooltip" mechanism would cause tippy popups without role (default to tooltip) been incorrectly hidden. - if (!opts.role) opts.role = 'menu'; const instance = tippy(target, { appendTo: document.body, animation: false, @@ -30,7 +27,8 @@ export function createTippy(target, opts = {}) { visibleInstances.add(instance); }, arrow: ``, - ...(opts?.role && {theme: opts.role}), + role: 'menu', // HTML role attribute, only tooltips should use "tooltip" + theme: 'menu', // CSS theme, we support either "tooltip" or "menu" ...opts, }); @@ -71,6 +69,7 @@ function attachTooltip(target, content = null) { content, delay: 100, role: 'tooltip', + theme: 'tooltip', hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), From ab6965b7b1f04a8a27f2b1e65b1c2681920744d3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 8 Jun 2023 19:04:39 +0200 Subject: [PATCH 07/17] default theme to role --- web_src/js/modules/tippy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 55afbe07c0bcc..b424cdfd50c7f 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -28,7 +28,7 @@ export function createTippy(target, opts = {}) { }, arrow: ``, role: 'menu', // HTML role attribute, only tooltips should use "tooltip" - theme: 'menu', // CSS theme, we support either "tooltip" or "menu" + theme: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu" ...opts, }); From fa105746dab328c519e7f7896d0f2c2ebe438497 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 9 Jun 2023 01:32:40 +0800 Subject: [PATCH 08/17] reduce navbar height for mobile view --- templates/base/head_navbar.tmpl | 2 +- web_src/css/base.css | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 4c0682064bada..4a7a326fb69e2 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -19,7 +19,7 @@ {{end}}
- +
diff --git a/web_src/css/base.css b/web_src/css/base.css index 1ec03624e299a..5a35c32c058b3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -975,7 +975,11 @@ img.ui.avatar, display: none; } /* show the first navbar item (logo and its mobile right items) */ - #navbar > .item:first-child, + #navbar > .item:first-child { + display: flex; + padding-top: 5px; + padding-bottom: 5px; + } #navbar .navbar-mobile-right > .item { display: flex; } From 252f84cf17c0b60ea2678790033e22eabc5e4702 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 9 Jun 2023 02:19:45 +0800 Subject: [PATCH 09/17] fine tune margin&padding --- templates/base/head_navbar.tmpl | 16 +++++++--------- web_src/css/base.css | 5 +++++ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 4a7a326fb69e2..bcc7cc667427a 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -13,14 +13,12 @@
{{if .IsSigned}} - + {{svg "octicon-bell"}} {{$notificationUnreadCount}} {{end}} -
- -
+