diff options
| -rw-r--r-- | templates/base/head_navbar.tmpl | 6 | ||||
| -rw-r--r-- | templates/repo/issue/labels/label_list.tmpl | 24 | ||||
| -rw-r--r-- | web_src/css/modules/header.css | 6 | ||||
| -rw-r--r-- | web_src/css/modules/navbar.css | 20 | ||||
| -rw-r--r-- | web_src/js/components/DiffCommitSelector.vue | 2 | ||||
| -rw-r--r-- | web_src/js/modules/fomantic/dropdown.js | 16 |
6 files changed, 46 insertions, 28 deletions
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 2b52247303..4889924819 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -4,7 +4,7 @@ {{end}} <nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}"> - <div class="navbar-left ui secondary menu"> + <div class="navbar-left"> <!-- the logo --> <a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true"> @@ -61,7 +61,7 @@ </div> <!-- the full dropdown menus --> - <div class="navbar-right ui secondary menu"> + <div class="navbar-right"> {{if and .IsSigned .MustChangePassword}} <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}"> <span class="text tw-flex tw-items-center"> @@ -104,7 +104,7 @@ <span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span> </span> - <div class="menu left"> + <div class="menu"> <a class="item" href="{{AppSubUrl}}/repo/create"> {{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}} </a> diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl index 8d7fc2c3db..413d6405b2 100644 --- a/templates/repo/issue/labels/label_list.tmpl +++ b/templates/repo/issue/labels/label_list.tmpl @@ -1,19 +1,17 @@ <h4 class="ui top attached header"> {{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}} <div class="ui right"> - <div class="ui secondary menu"> - <!-- Sort --> - <div class="item ui jump dropdown tw-py-2"> - <span class="text"> - {{ctx.Locale.Tr "repo.issues.filter_sort"}} - </span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - <div class="menu"> - <a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a> - <a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a> - <a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a> - <a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a> - </div> + <!-- Sort --> + <div class="item ui jump dropdown tw-py-2"> + <span class="text"> + {{ctx.Locale.Tr "repo.issues.filter_sort"}} + </span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="menu"> + <a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a> + <a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a> + <a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a> + <a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a> </div> </div> </div> <!-- filter menu --> diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css index 9cec5fcbe6..20f98bfbac 100644 --- a/web_src/css/modules/header.css +++ b/web_src/css/modules/header.css @@ -134,12 +134,6 @@ h4.ui.header .sub.header { font-weight: var(--font-weight-normal); } -/* open dropdown menus to the left in right-attached headers */ -.ui.attached.header > .ui.right .ui.dropdown .menu { - right: 0; - left: auto; -} - /* if a .top.attached.header is followed by a .segment, add some margin */ .ui.segments + .ui.top.attached.header, .ui.attached.segment + .ui.top.attached.header { diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index 848f9331d0..556da2df3b 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -19,12 +19,26 @@ margin: 0; display: flex; align-items: center; + gap: 5px; } #navbar-logo { margin: 0; } +.navbar-left > .item, +.navbar-right > .item { + 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; @@ -33,10 +47,6 @@ display: flex; } -#navbar > .menu > .item { - color: var(--color-nav-text); -} - #navbar .dropdown .item { justify-content: stretch; } @@ -70,7 +80,7 @@ } #navbar .navbar-mobile-right { display: flex; - margin-left: auto !important; + margin: 0 0 0 auto !important; width: auto !important; } #navbar .navbar-mobile-right > .item { diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index c28be67e38..6a4a84f615 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -202,7 +202,7 @@ export default { > <svg-icon name="octicon-git-commit"/> </button> - <div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'"> + <div class="left menu" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'"> <div class="loading-indicator is-loading" v-if="isLoading"/> <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()"> <div class="gt-ellipsis"> diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js index 82e710860d..bbffb59152 100644 --- a/web_src/js/modules/fomantic/dropdown.js +++ b/web_src/js/modules/fomantic/dropdown.js @@ -94,6 +94,22 @@ function delegateOne($dropdown) { updateSelectionLabel($label[0]); return $label; }); + + const oldSet = dropdownCall('internal', 'set'); + const oldSetDirection = oldSet.direction; + oldSet.direction = function($menu) { + oldSetDirection.call(this, $menu); + const classNames = dropdownCall('setting', 'className'); + $menu = $menu || $dropdown.find('> .menu'); + const elMenu = $menu[0]; + // detect whether the menu is outside the viewport, and adjust the position + // there is a bug in fomantic's builtin `direction` function, in some cases (when the menu width is only a little larger) it wrongly opens the menu at right and triggers the scrollbar. + elMenu.classList.add(classNames.loading); + if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) { + elMenu.classList.add(classNames.leftward); + } + elMenu.classList.remove(classNames.loading); + }; } // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes |