Partial regression of #24393, not only regression, but broken for long time, 24393 didn't really improve it but used wrong `overflow: scroll`. Actually, that "ui secondary filter menu labels" shouldn't be set as scrollable (I missed that at that time), the problem is: if a "ui menu" has "dropdown" items, then it should not be scrollable. Otherwise the dropdown menu can't be shown correctly. And there are more problems: * The "issue-filters" shouldn't be used anywhere else (copying&pasting problem again ....) * There is also an "issue-actions" container, it should also be fixed. * There are similar problems on the milestone page. * The old comment in code: "grid column" doesn't work well. The major changes of this PR are: use "flex: 1" instead of "ui grid column". After this PR, not 100% perfect but much better than before.tags/v1.20.0-rc0
@@ -20,7 +20,7 @@ | |||
</div> | |||
</div> | |||
<div class="twelve wide column content"> | |||
<div id="issue-filters" class="ui stackable grid"> | |||
<div class="ui stackable grid"> | |||
<div class="six wide column"> | |||
{{template "repo/actions/openclose" .}} | |||
</div> |
@@ -17,18 +17,20 @@ | |||
{{end}} | |||
{{end}} | |||
</div> | |||
<div class="ui divider"></div> | |||
<div id="issue-filters" class="ui stackable grid"> | |||
<div class="six wide column"> | |||
<div id="issue-filters" class="issue-list-toolbar"> | |||
<div class="issue-list-toolbar-left"> | |||
{{if $.CanWriteIssuesOrPulls}} | |||
<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}"> | |||
<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}"> | |||
{{end}} | |||
{{template "repo/issue/openclose" .}} | |||
</div> | |||
<div class="ten wide right aligned column"> | |||
<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden"> | |||
<div class="issue-list-toolbar-right"> | |||
<div class="ui secondary filter stackable menu labels"> | |||
<!-- Label --> | |||
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto"> | |||
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter"> | |||
<span class="text"> | |||
{{.locale.Tr "repo.issues.filter_label"}} | |||
{{svg "octicon-triangle-down" 14 "dropdown icon"}} | |||
@@ -206,15 +208,12 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div id="issue-actions" class="ui stackable grid gt-hidden"> | |||
<div class="six wide column"> | |||
<div id="issue-actions" class="issue-list-toolbar gt-hidden"> | |||
<div class="issue-list-toolbar-left"> | |||
{{template "repo/issue/openclose" .}} | |||
</div> | |||
{{/* 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. */}} | |||
<div class="nine wide right aligned right floated column"> | |||
<div class="issue-list-toolbar-right"> | |||
<div class="ui secondary filter stackable menu"> | |||
{{if not .Repository.IsArchived}} | |||
<!-- Action Button --> |
@@ -2,12 +2,10 @@ | |||
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list"> | |||
{{template "repo/header" .}} | |||
<div class="ui container"> | |||
<div class="ui two column stackable grid"> | |||
<div class="column"> | |||
<h1>{{.Milestone.Name}}</h1> | |||
</div> | |||
<div class="gt-df"> | |||
<h1>{{.Milestone.Name}}</h1> | |||
{{if not .Repository.IsArchived}} | |||
<div class="column right aligned"> | |||
<div class="text right gt-f1"> | |||
{{if or .CanWriteIssues .CanWritePulls}} | |||
{{if .Milestone.IsClosed}} | |||
<a class="ui green basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{$.locale.Tr "repo.milestones.open"}} | |||
@@ -45,11 +43,12 @@ | |||
</div> | |||
</div> | |||
<div class="ui divider"></div> | |||
<div id="issue-filters" class="ui stackable grid"> | |||
<div class="six wide column"> | |||
<div id="issue-filters" class="issue-list-toolbar"> | |||
<div class="issue-list-toolbar-left"> | |||
{{template "repo/issue/openclose" .}} | |||
</div> | |||
<div class="ten wide right aligned column"> | |||
<div class="issue-list-toolbar-right"> | |||
<div class="ui secondary filter stackable menu labels"> | |||
<!-- Label --> | |||
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto"> | |||
@@ -145,16 +144,12 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div id="issue-actions" class="ui stackable grid gt-hidden"> | |||
<div class="six wide column"> | |||
<div id="issue-actions" class="issue-list-toolbar gt-hidden"> | |||
<div class="issue-list-toolbar-left"> | |||
{{template "repo/issue/openclose" .}} | |||
</div> | |||
{{/* 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. */}} | |||
<div class="nine wide right aligned right floated column"> | |||
<div class="issue-list-toolbar-right"> | |||
<div class="ui secondary filter stackable menu"> | |||
<!-- Action Button --> | |||
{{if .IsShowClosed}} |
@@ -11,7 +11,7 @@ | |||
</div> | |||
<div class="ui bottom attached active tab segment"> | |||
{{if eq .Status 1}} | |||
<div id="issue-filters" class="ui stackable grid"> | |||
<div class="ui stackable grid"> | |||
<div class="six wide column"> | |||
<div class="small-pill-buttons ui compact tiny menu"> | |||
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}"> |
@@ -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"; |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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); |