{{template "repo/header" .}}
-
-
-

{{.Milestone.Name}}

-
+
+

{{.Milestone.Name}}

{{if not .Repository.IsArchived}} -
+
{{if or .CanWriteIssues .CanWritePulls}} {{if .Milestone.IsClosed}} {{$.locale.Tr "repo.milestones.open"}} @@ -45,11 +43,12 @@
-
-
+ +
+
{{template "repo/issue/openclose" .}}
-
+
@@ -145,16 +144,12 @@
-
-
+ +
+
{{template "repo/issue/openclose" .}}
- - {{/* Ten wide does not cope well and makes the columns stack. - This seems to be related to jQuery's hide/show: in fact, switching - issue-actions and issue-filters and having this ten wide will show - this one correctly, but not the other one. */}} -
+
{{if .IsShowClosed}} diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl index ce46919236..6d3262ad6d 100644 --- a/templates/user/notification/notification_subscriptions.tmpl +++ b/templates/user/notification/notification_subscriptions.tmpl @@ -11,7 +11,7 @@
{{if eq .Status 1}} -
+
diff --git a/web_src/css/index.css b/web_src/css/index.css index cdd0c51a54..d6ef1da9b9 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -32,6 +32,7 @@ @import "./repository.css"; @import "./repository/release-tag.css"; @import "./repository/issue-label.css"; +@import "./repository/issue-list.css"; @import "./repository/list-header.css"; @import "./editor.css"; @import "./editor/combomarkdowneditor.css"; diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 6ad6ba88a8..259cfda3a1 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -141,12 +141,19 @@ font-size: 11px; } -.repository .filter.menu .menu { +/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */ +.repository .filter.menu .ui.dropdown .menu { max-height: 500px; max-width: 300px; overflow-x: hidden; - right: 0 !important; - left: auto !important; + right: 0; + left: auto; +} + +/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */ +.repository .filter.menu .ui.dropdown.label-filter .menu { + right: unset; + left: 0; } .repository .select-label .desc { @@ -2394,10 +2401,6 @@ margin: 6px 0; } -#issue-actions { - margin-top: -1rem !important; /* counteract padding from Semantic */ -} - .ui.menu .item > img:not(.ui) { width: auto; } diff --git a/web_src/css/repository/issue-list.css b/web_src/css/repository/issue-list.css new file mode 100644 index 0000000000..2c2d3572e0 --- /dev/null +++ b/web_src/css/repository/issue-list.css @@ -0,0 +1,14 @@ +.issue-list-toolbar { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 1rem; +} + +.issue-list-toolbar-left { + display: flex; +} + +.issue-list-toolbar-right { + margin-left: auto; +} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 915cd2e132..af0e80af81 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -23,7 +23,7 @@ function initRepoIssueListCheckboxes() { toggleElem($('#issue-filters'), !anyChecked); toggleElem($('#issue-actions'), anyChecked); // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel - $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll); + $('#issue-filters, #issue-actions').filter(':visible').find('.issue-list-toolbar-left').prepend($issueSelectAll); }; $issueCheckboxes.on('change', syncIssueSelectionState);