loading up the forgejo repo on tangled to test page performance
Fix dropdown direction behavior (#23806)
Close #23803
More details in the comment.
authored by
wxiaoguang
and committed by
GitHub
c20eb722
06d9d9e4
+10
-7
+2
-2
templates/repo/issue/list.tmpl
+2
-2
templates/repo/issue/list.tmpl
···
177
177
{{end}}
178
178
179
179
<!-- Sort -->
180
-
<div class="ui dropdown type jump item">
180
+
<div class="ui dropdown downward type jump item">
181
181
<span class="text">
182
182
{{.locale.Tr "repo.issues.filter_sort"}}
183
183
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
184
184
</span>
185
-
<div class="menu">
185
+
<div class="left menu">
186
186
<a class="{{if or (eq .SortType "latest") (not .SortType)}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.latest"}}</a>
187
187
<a class="{{if eq .SortType "oldest"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=oldest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.oldest"}}</a>
188
188
<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=recentupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
+8
-1
web_src/js/features/common-global.js
+8
-1
web_src/js/features/common-global.js
···
111
111
},
112
112
});
113
113
114
-
// special popup-directions
114
+
// Special popup-directions, prevent Fomantic from guessing the popup direction.
115
+
// With default "direction: auto", if the viewport height is small, Fomantic would show the popup upward,
116
+
// if the dropdown is at the beginning of the page, then the top part would be clipped by the window view.
117
+
// eg: Issue List "Sort" dropdown
118
+
// But we can not set "direction: downward" for all dropdowns, because there is a bug in dropdown menu positioning when calculating the "left" position,
119
+
// which would make some dropdown popups slightly shift out of the right viewport edge in some cases.
120
+
// eg: the "Create New Repo" menu on the navbar.
115
121
$uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward');
122
+
$uiDropdowns.filter('.downward').dropdown('setting', 'direction', 'downward');
116
123
117
124
$('.ui.checkbox').checkbox();
118
125
-4
web_src/js/modules/fomantic.js
-4
web_src/js/modules/fomantic.js
···
9
9
// Disable the behavior of fomantic to toggle the checkbox when you press enter on a checkbox element.
10
10
$.fn.checkbox.settings.enableEnterKey = false;
11
11
12
-
// Prevent Fomantic from guessing the popup direction.
13
-
// Otherwise, if the viewport height is small, Fomantic would show the popup upward,
14
-
// if the dropdown is at the beginning of the page, then the top part would be clipped by the window view, eg: Issue List "Sort" dropdown
15
-
$.fn.dropdown.settings.direction = 'downward';
16
12
// By default, use "exact match" for full text search
17
13
$.fn.dropdown.settings.fullTextSearch = 'exact';
18
14
// Do not use "cursor: pointer" for dropdown labels