diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl index 20b66b2ec3..79212d82a5 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/admin.css b/web_src/css/admin.css index 617462542a..792b76d3e2 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -20,7 +20,7 @@ width: calc(100% - 245px); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .admin dl.admin-dl-horizontal dd { width: calc(100% - 185px); } @@ -40,7 +40,7 @@ white-space: nowrap; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .admin dl.admin-dl-horizontal dt { width: 160px; } diff --git a/web_src/css/base.css b/web_src/css/base.css index 1c7a239188..f4b3cee5ab 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -941,7 +941,7 @@ img.ui.avatar, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .page-content .ui.ui.ui.container:not(.fluid) { width: calc(100vw - 16px); max-width: calc(100vw - 16px); @@ -961,46 +961,91 @@ img.ui.avatar, margin: 0 !important; } -#navbar .column .menu { - margin-top: 0; -} - -#navbar .fitted .svg { - margin-right: 0; - vertical-align: middle; -} - -#navbar .searchbox { - background-color: var(--color-input-background) !important; -} - -#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: 767px) { - #navbar:not(.shown) > *:not(:first-child) { +#navbar .navbar-mobile-right a.item:hover { + background: transparent; +} + +#navbar .secondary.menu > .item > .svg, +#navbar .right.menu > .item > .svg { + margin-right: 0; +} + +@media (max-width: 767.98px) { + /* hide all items */ + #navbar .item { display: none; } + /* show the first navbar item (logo and its mobile right items) */ + #navbar > .item:first-child { + display: flex; + padding-top: 5px; + padding-bottom: 5px; + } + #navbar .navbar-mobile-right > .item { + display: flex; + } + /* show items if the navbar is open */ + #navbar.navbar-menu-open .item { + display: flex; + } + #navbar.navbar-menu-open > .item:first-child { + padding-bottom: 0; + } } -.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; +@media (min-width: 767.98px) { + #navbar .navbar-mobile-right, + #navbar .mobile-only { + display: none; + } + #navbar .right.menu { + padding-right: 1em; + } +} + +#navbar .navbar-mobile-right .item { + width: auto !important; +} + +#navbar a.item .notification_count { + color: var(--color-nav-bg); + padding: 0 3.75px; + font-size: 12px; + line-height: 12px; + font-weight: var(--font-weight-bold); +} + +#navbar a.item:hover .notification_count, +#navbar a.item:hover .header-stopwatch-dot { + border-color: var(--color-nav-hover-bg); +} + +#navbar a.item .notification_count, +#navbar a.item .header-stopwatch-dot { + background: var(--color-primary); + border: 2px solid var(--color-nav-bg); + position: absolute; + left: 6px; + top: -9px; + min-width: 17px; + min-height: 17px; + border-radius: 17px; display: flex; - align-items: inherit; - flex-direction: inherit; + align-items: center; + justify-content: center; +} + +#navbar .right.menu { + width: 100%; + justify-content: flex-end; } .ui.pagination.menu .active.item { @@ -1455,7 +1500,7 @@ img.ui.avatar, line-height: 20px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .ui.pagination.menu .item:not(.active,.navigation), .ui.pagination.menu .item.navigation span.navigation_label { display: none; @@ -1529,56 +1574,13 @@ 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: 767px) { +@media (max-width: 767.98px) { /* double selector so it wins over .gt-df etc */ .not-mobile.not-mobile { display: none !important; } } -/* 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); @@ -1613,7 +1615,7 @@ img.ui.avatar, margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .ui.menu.new-menu .item { width: auto !important; } @@ -2124,40 +2126,6 @@ a.ui.basic.label:hover { margin-top: 1rem; } -.header-stopwatch-dot { - position: absolute; - left: 8px; - top: -8px; - width: 13px; - height: 13px; - background: var(--color-primary); - border: 2px solid var(--color-nav-bg); - 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/css/dashboard.css b/web_src/css/dashboard.css index 72c29f6686..34428c5999 100644 --- a/web_src/css/dashboard.css +++ b/web_src/css/dashboard.css @@ -35,7 +35,7 @@ width: 15%; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard.feeds .filter.menu .item .floating.label, .dashboard.issues .filter.menu .item .floating.label { top: 10px; @@ -60,7 +60,7 @@ left: auto !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard.feeds .filter.menu, .dashboard.issues .filter.menu { width: 100%; @@ -90,7 +90,7 @@ max-width: 100%; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .dashboard .dashboard-navbar .ui.dropdown > .menu { position: static; } diff --git a/web_src/css/form.css b/web_src/css/form.css index a6106016b5..9527ef9d46 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -197,7 +197,7 @@ textarea:focus, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #create-page-form form .optional .title { margin-left: 15px; } @@ -315,7 +315,7 @@ textarea:focus, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.activate form .optional .title, .user.forgot.password form .optional .title, .user.reset.password form .optional .title, @@ -353,7 +353,7 @@ textarea:focus, width: 200px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.activate form .inline.field > label, .user.forgot.password form .inline.field > label, .user.reset.password form .inline.field > label, @@ -449,7 +449,7 @@ textarea:focus, } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo form .optional .title, .repository.new.migrate form .optional .title, .repository.new.fork form .optional .title { @@ -483,7 +483,7 @@ textarea:focus, width: 50% !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo form label, .repository.new.migrate form label, .repository.new.fork form label, @@ -516,7 +516,7 @@ textarea:focus, width: 50% !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.repo .ui.form .selection.dropdown:not(.owner) { width: 100% !important; } @@ -534,7 +534,7 @@ textarea:focus, font-family: var(--fonts-monospace); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .new.org .ui.form .field button, .new.org .ui.form .field a { margin-bottom: 1em; diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 14ef64b252..bed18fe93a 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -260,7 +260,7 @@ Gitea's private styles use `g-` prefix. .gt-font-17 { font-size: 17px !important } .gt-font-18 { font-size: 18px !important } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .gt-db-small { display: block !important; } .gt-w-100-small { width: 100% !important; } .gt-js-small { justify-content: flex-start !important; } diff --git a/web_src/css/home.css b/web_src/css/home.css index 0094acc75f..a46c46ffde 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -2,7 +2,7 @@ max-width: 220px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .home .hero h1 { font-size: 3.5em; } diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 8919abfec0..bd55b9d6b9 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -25,8 +25,8 @@ } .tippy-box[data-theme="menu"] { - background-color: transparent; - color: var(--color-tooltip-text); + background-color: var(--color-menu); + color: var(--color-text); } .tippy-content { diff --git a/web_src/css/org.css b/web_src/css/org.css index eb2dd8a4d9..7b73d8e572 100644 --- a/web_src/css/org.css +++ b/web_src/css/org.css @@ -31,7 +31,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #create-page-form form .optional .title { margin-left: 15px; } @@ -77,7 +77,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .organization.new.org form .optional .title { margin-left: 15px; } @@ -222,7 +222,7 @@ height: 60px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .organization.teams #repo-top-segment { height: 100px; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c6655a8fc9..ff999ed132 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -194,13 +194,13 @@ width: 320px; } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository #clone-panel #repo-clone-url { width: 200px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository #clone-panel #repo-clone-url { width: 200px; } @@ -298,7 +298,7 @@ } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository.file.list #repo-files-table td.name { max-width: 300px; } @@ -321,7 +321,7 @@ } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .repository.file.list #repo-files-table td.message { max-width: 250px; } @@ -643,7 +643,7 @@ display: flex; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .issue-title { flex-direction: column; } @@ -939,7 +939,7 @@ border: 1px solid var(--color-light-border); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .timeline-item .ui.segments { margin-left: -2rem; } @@ -964,7 +964,7 @@ border-radius: var(--border-radius); } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .comment .content .form .button { width: 100%; margin: 0; @@ -987,7 +987,7 @@ margin-bottom: -0.25rem; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list .comment .merge-section .item-section { align-items: flex-start; flex-direction: column; @@ -1133,7 +1133,7 @@ box-shadow: none; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.view.issue .comment-list { padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */ } @@ -1597,7 +1597,7 @@ line-height: 30px; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .repository .diff-detail-box { flex-direction: column; align-items: flex-start; @@ -1853,7 +1853,7 @@ } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .diff-file-box { scroll-margin-top: 77px; /* match .repository .diff-detail-box */ } @@ -1961,14 +1961,14 @@ display: inline-block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.wiki .dividing.header .stackable.grid .button { margin-top: 2px; margin-bottom: 2px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.wiki #clone-panel #repo-clone-url { width: 160px; } @@ -2269,7 +2269,7 @@ border-radius: 0; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository .repository-summary .segment.language-stats { display: none; } @@ -2296,7 +2296,7 @@ width: 500px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { #cite-repo-modal #citation-panel { width: 100%; } @@ -2757,7 +2757,7 @@ tbody.commit-list { display: inline-block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { tr.commit-list { width: 100%; } @@ -2770,7 +2770,7 @@ tbody.commit-list { } } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { tr.commit-list { width: 723px; } @@ -2866,7 +2866,7 @@ tbody.commit-list { word-break: break-word; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-header + .container { margin-top: 7px; } @@ -2880,7 +2880,7 @@ tbody.commit-list { word-break: keep-all; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-buttons { margin-top: 1em; } @@ -2927,7 +2927,7 @@ tbody.commit-list { pointer-events: none !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repo-buttons .ui.labeled.button .svg { display: none; } @@ -3025,7 +3025,7 @@ tbody.commit-list { color: var(--color-primary); } -@media (max-width: 991px) { +@media (max-width: 991.98px) { #diff-file-tree { display: none !important; } @@ -3103,7 +3103,7 @@ tbody.commit-list { z-index: 7; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .ui.attached.header.diff-file-header.sticky-2nd-row { top: 77px; /* match .repository .diff-detail-box */ } @@ -3142,7 +3142,7 @@ tbody.commit-list { overflow: hidden; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository-summary-language-stats { height: auto; } @@ -3223,7 +3223,7 @@ tbody.commit-list { box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.file.list #repo-files-table .entry, .repository.file.list #repo-files-table .commit-list { align-items: center; @@ -3345,13 +3345,13 @@ tbody.commit-list { vertical-align: bottom !important; } -@media (min-width: 768px) and (max-width: 991px) { +@media (min-width: 768px) and (max-width: 991.98px) { .branch-dropdown-button { max-width: 185px; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .branch-dropdown-button { max-width: 165px; } @@ -3385,7 +3385,7 @@ tbody.commit-list { justify-content: flex-end; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .pr-status .status-details { flex-direction: column; align-items: flex-end; diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css index a475138e6b..1e5e51eac5 100644 --- a/web_src/css/repo/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -16,7 +16,7 @@ position: absolute; font-family: var(--fonts-regular); left: 0; - transform: translateX(-70%); + transform: translateX(-50%); cursor: pointer; } diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index e786e5ff59..c537a7cfe0 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -119,7 +119,7 @@ } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .repository.new.release .field button { margin-bottom: 1em; } diff --git a/web_src/css/review.css b/web_src/css/review.css index d44e98584e..4b35764c7a 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -67,7 +67,7 @@ max-width: 820px; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud { max-width: none; padding: 0.75rem !important; @@ -91,7 +91,7 @@ padding: 0; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud .comments .comment { display: flex; } @@ -182,7 +182,7 @@ display: block; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .comment-code-cloud .button { width: 100%; margin: 0 !important; @@ -252,7 +252,7 @@ scroll-margin-top: 99px; } -@media (max-width: 991px) { +@media (max-width: 991.98px) { .pull.files.diff .comment { scroll-margin-top: 130px; } diff --git a/web_src/css/user.css b/web_src/css/user.css index 7b6db8f2f8..54a966e7cb 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -48,13 +48,13 @@ height: auto; } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.profile .ui.card #profile-avatar img { width: 30vw; } } -@media (max-width: 767px) { +@media (max-width: 767.98px) { .user.profile .ui.card { width: 100%; } diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index ee7d805e77..25a94c1fa7 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 776e63a83d..cb50ebcae0 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -20,18 +20,14 @@ export function initGlobalFormDirtyLeaveConfirm() { } export function initHeadNavbarContentToggle() { - const content = $('#navbar'); - const toggle = $('#navbar-expand-toggle'); - let isExpanded = false; - toggle.on('click', () => { - isExpanded = !isExpanded; - if (isExpanded) { - content.addClass('shown'); - toggle.addClass('active'); - } else { - content.removeClass('shown'); - toggle.removeClass('active'); - } + const navbar = document.getElementById('navbar'); + const btn = document.getElementById('navbar-expand-toggle'); + if (!navbar || !btn) return; + + btn.addEventListener('click', () => { + 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 26d8e22472..6a01a8445b 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -108,10 +108,15 @@ function showLineButton() { createTippy(btn, { trigger: 'click', + hideOnClick: true, content: menu, placement: 'right-start', - role: 'menu', interactive: 'true', + onShow: (tippy) => { + tippy.popper.addEventListener('click', () => { + tippy.hide(); + }, {once: true}); + } }); } diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index cf6e09472e..71d82325ac 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -476,7 +476,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 d9f496fb85..b424cdfd50 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -27,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: opts.role || 'menu', // CSS theme, we support either "tooltip" or "menu" ...opts, }); @@ -68,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}} : {}),