Merge pull request #1760 from jsit/fix/use-row-in-filters

fix: Small cleanup to search/inbox controls
This commit is contained in:
SleeplessOne1917 2023-07-03 00:02:16 +00:00 committed by GitHub
commit 90a9b6bda1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 62 deletions

View file

@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
const { searchText, selectedIndex, loadingEllipses } = this.state;
return (
<div className="searchable-select dropdown">
<div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
<button
id={id}
type="button"

View file

@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
<h5 className="mb-2">
<h1 className="h4 mb-4">
{I18NextService.i18n.t("inbox")}
{inboxRss && (
<small>
@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
/>
</small>
)}
</h5>
</h1>
{this.hasUnreads && (
<button
className="btn btn-secondary mb-2"
className="btn btn-secondary mb-2 mb-sm-3"
onClick={linkEvent(this, this.handleMarkAllAsRead)}
>
{this.state.markAllAsReadRes.state == "loading" ? (
@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
unreadOrAllRadios() {
return (
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap">
<label
className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
messageTypeRadios() {
return (
<div className="btn-group btn-group-toggle flex-wrap mb-2">
<div className="btn-group btn-group-toggle flex-wrap">
<label
className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && "active"}
@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
selects() {
return (
<div className="mb-2">
<span className="me-3">{this.unreadOrAllRadios()}</span>
<span className="me-3">{this.messageTypeRadios()}</span>
<CommentSortSelect
sort={this.state.sort}
onChange={this.handleSortChange}
/>
<div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
<div className="col">{this.unreadOrAllRadios()}</div>
<div className="col">{this.messageTypeRadios()}</div>
<div className="col">
<CommentSortSelect
sort={this.state.sort}
onChange={this.handleSortChange}
/>
</div>
</div>
);
}
@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
this.state.messagesRes.state == "loading"
) {
return (
<h5>
<h1 className="h4">
<Spinner large />
</h5>
</h1>
);
} else {
return (
@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.repliesRes.state) {
case "loading":
return (
<h5>
<h1 className="h4">
<Spinner large />
</h5>
</h1>
);
case "success": {
const replies = this.state.repliesRes.data.replies;
@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.mentionsRes.state) {
case "loading":
return (
<h5>
<h1 className="h4">
<Spinner large />
</h5>
</h1>
);
case "success": {
const mentions = this.state.mentionsRes.data.mentions;
@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
switch (this.state.messagesRes.state) {
case "loading":
return (
<h5>
<h1 className="h4">
<Spinner large />
</h5>
</h1>
);
case "success": {
const messages = this.state.messagesRes.data.private_messages;

View file

@ -181,8 +181,8 @@ const Filter = ({
loading: boolean;
}) => {
return (
<div className="mb-3 col-sm-6">
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
<div className="col-sm-6">
<label className="mb-1" htmlFor={`${filterType}-filter`}>
{capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
</label>
<SearchableSelect
@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
<h5>{I18NextService.i18n.t("search")}</h5>
<h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
{this.selects}
{this.searchForm}
{this.displayResults(type)}
@ -500,8 +500,11 @@ export class Search extends Component<any, SearchState> {
get searchForm() {
return (
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
<div className="col-auto">
<form
className="row gx-2 gy-3"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<div className="col-auto flex-grow-1 flex-sm-grow-0">
<input
type="text"
className="form-control me-2 mb-2 col-sm-8"
@ -542,41 +545,45 @@ export class Search extends Component<any, SearchState> {
communitiesRes.data.communities.length > 0;
return (
<div className="mb-2">
<select
value={type}
onChange={linkEvent(this, this.handleTypeChange)}
className="form-select d-inline-block w-auto mb-2"
aria-label={I18NextService.i18n.t("type")}
>
<option disabled aria-hidden="true">
{I18NextService.i18n.t("type")}
</option>
{searchTypes.map(option => (
<option value={option} key={option}>
{I18NextService.i18n.t(
option.toString().toLowerCase() as NoOptionI18nKeys
)}
</option>
))}
</select>
<span className="ms-2">
<ListingTypeSelect
type_={listingType}
showLocal={showLocal(this.isoData)}
showSubscribed
onChange={this.handleListingTypeChange}
/>
</span>
<span className="ms-2">
<SortSelect
sort={sort}
onChange={this.handleSortChange}
hideHot
hideMostComments
/>
</span>
<div className="row">
<>
<div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
<div className="col">
<select
value={type}
onChange={linkEvent(this, this.handleTypeChange)}
className="form-select d-inline-block w-auto"
aria-label={I18NextService.i18n.t("type")}
>
<option disabled aria-hidden="true">
{I18NextService.i18n.t("type")}
</option>
{searchTypes.map(option => (
<option value={option} key={option}>
{I18NextService.i18n.t(
option.toString().toLowerCase() as NoOptionI18nKeys
)}
</option>
))}
</select>
</div>
<div className="col">
<ListingTypeSelect
type_={listingType}
showLocal={showLocal(this.isoData)}
showSubscribed
onChange={this.handleListingTypeChange}
/>
</div>
<div className="col">
<SortSelect
sort={sort}
onChange={this.handleSortChange}
hideHot
hideMostComments
/>
</div>
</div>
<div className="row gy-2 gx-4 mb-3">
{hasCommunities && (
<Filter
filterType="community"
@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
loading={searchCreatorLoading}
/>
</div>
</div>
</>
);
}