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

fix: Small cleanup to search/inbox controls

src/shared/components/common/searchable-select.tsx

@@ -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"

src/shared/components/person/inbox.tsx

@@ -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;

src/shared/components/search.tsx

@@ -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>
+      </>
     );
   }