Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Small cleanup to search/inbox controls #1760

Merged
merged 7 commits into from
Jul 3, 2023
Merged

fix: Small cleanup to search/inbox controls #1760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d258edf
fix: Small cleanup to search/inbox controls
jsit Jul 2, 2023
350b1b2
fix: Add bottom margin to inbox controls
jsit Jul 2, 2023
2c56c2e
fix: Fix row gap on search options
jsit Jul 2, 2023
302c6b4
fix: Fix some gaps in search filters
jsit Jul 2, 2023
93d0bc4
fix: Simplify row classes a bit
jsit Jul 2, 2023
b8c2e1e
fix: Fix up filter row gaps and margins a little
jsit Jul 2, 2023
7389b1f
Merge branch 'main' into fix/use-row-in-filters
SleeplessOne1917 Jul 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/shared/components/common/searchable-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
42 changes: 22 additions & 20 deletions src/shared/components/person/inbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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" ? (
Expand Down Expand Up @@ -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"}
Expand Down Expand Up @@ -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"}
Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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 (
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
89 changes: 48 additions & 41 deletions src/shared/components/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
loading={searchCreatorLoading}
/>
</div>
</div>
</>
);
}

Expand Down