Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Fix position of filters in edit categories/tags nav menu modals (#22292) 

Why this change?

We want the position of the filters to remain fixed when scrolling
through the list of categories or tags. Otherwise, the user has to
scroll all the way back to othe top in order to access the filters when
the list of categories or tags is large.
This commit is contained in:
Alan Guo Xiang Tan 2023-06-27 12:52:42 +08:00 committed by GitHub
parent 9cf981f1f1
commit 75b402f07c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs
View File

@ -11,39 +11,39 @@
</p>
{{/in-element}}
<div class="sidebar__edit-navigation-modal-form__filter">
<div class="sidebar__edit-navigation-modal-form__filter-input">
{{d-icon
"search"
class="sidebar__edit-navigation-modal-form__filter-input-icon"
}}
<Input
class="sidebar__edit-navigation-modal-form__filter-input-field"
placeholder={{@inputFilterPlaceholder}}
@type="text"
@value={{this.filter}}
{{on "input" (action @onFilterInput value="target.value")}}
autofocus="true"
/>
</div>
<div class="sidebar__edit-navigation-modal-form__filter-dropdown-wrapper">
<DropdownSelectBox
@class="sidebar__edit-navigation-modal-form__filter-dropdown"
@value={{this.filterDropdownValue}}
@content={{this.filterDropdownContent}}
@onChange={{this.onFilterDropdownChange}}
@options={{hash showCaret=true}}
/>
</div>
</div>
<div class="sidebar__edit-navigation-modal-form">
<DModalBody
@title={{@title}}
@class="sidebar__edit-navigation-modal-form__body"
>
<div class="sidebar__edit-navigation-modal-form__filter">
<div class="sidebar__edit-navigation-modal-form__filter-input">
{{d-icon
"search"
class="sidebar__edit-navigation-modal-form__filter-input-icon"
}}
<Input
class="sidebar__edit-navigation-modal-form__filter-input-field"
placeholder={{@inputFilterPlaceholder}}
@type="text"
@value={{this.filter}}
{{on "input" (action @onFilterInput value="target.value")}}
autofocus="true"
/>
</div>
<div class="sidebar__edit-navigation-modal-form__filter-dropdown-wrapper">
<DropdownSelectBox
@class="sidebar__edit-navigation-modal-form__filter-dropdown"
@value={{this.filterDropdownValue}}
@content={{this.filterDropdownContent}}
@onChange={{this.onFilterDropdownChange}}
@options={{hash showCaret=true}}
/>
</div>
</div>
{{yield}}
</DModalBody>
</div>

79
app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss
View File

@ -2,60 +2,59 @@
.modal-body {
min-height: 50vh;
}
}
.sidebar__edit-navigation-modal-form__filter {
display: flex;
flex-direction: row;
margin-bottom: 1em;
width: 100%;
.sidebar__edit-navigation-modal-form__filter {
display: flex;
flex-direction: row;
padding: 1em 1em 0 1em;
.sidebar__edit-navigation-modal-form__filter-dropdown {
margin-left: 0.5em;
.sidebar__edit-navigation-modal-form__filter-dropdown {
margin-left: 0.5em;
.select-kit-header {
.select-kit-header {
background: var(--secondary);
color: var(--primary);
border: 1px solid var(--primary-low-mid);
font-size: var(--font-0);
&:hover,
&:focus {
background: var(--secondary);
color: var(--primary);
border: 1px solid var(--primary-low-mid);
font-size: var(--font-0);
&:hover,
&:focus {
background: var(--secondary);
.d-icon {
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
}
}
}
.sidebar__edit-navigation-modal-form__filter-input {
display: flex;
flex-direction: row;
margin-right: auto;
width: 100%;
position: relative;
}
.sidebar__edit-navigation-modal-form__filter-input {
display: flex;
flex-direction: row;
margin-right: auto;
width: 100%;
position: relative;
}
.sidebar__edit-navigation-modal-form__filter-input-icon {
position: absolute;
left: 0.5em;
top: 0.65em;
color: var(--primary-low-mid);
}
.sidebar__edit-navigation-modal-form__filter-input-icon {
position: absolute;
left: 0.5em;
top: 0.65em;
color: var(--primary-low-mid);
}
.sidebar__edit-navigation-modal-form__filter-input-field {
border-color: var(--primary-low-mid);
padding-left: 1.75em;
width: 100%;
.sidebar__edit-navigation-modal-form__filter-input-field {
border-color: var(--primary-low-mid);
padding-left: 1.75em;
width: 100%;
&:focus {
border-color: var(--tertiary);
outline: none;
outline-offset: 0;
box-shadow: inset 0px 0px 0px 1px var(--tertiary);
}
&:focus {
border-color: var(--tertiary);
outline: none;
outline-offset: 0;
box-shadow: inset 0px 0px 0px 1px var(--tertiary);
}
}
}

13
app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss
View File

@ -2,13 +2,14 @@
.modal-inner-container {
width: 35em;
}
}
.sidebar__edit-navigation-modal-form__filter {
flex-direction: column;
.sidebar__edit-navigation-modal-form__filter {
flex-direction: column;
padding: 0.667em;
.sidebar__edit-navigation-modal-form__filter-dropdown {
margin-left: 0;
width: 100%;
}
.sidebar__edit-navigation-modal-form__filter-dropdown {
margin-left: 0;
width: 100%;
}
}