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>
/>
</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" ? (
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"}
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"}
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>
);
}
this.state.messagesRes.state == "loading"
) {
return (
- <h5>
+ <h1 className="h4">
<Spinner large />
- </h5>
+ </h1>
);
} else {
return (
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;
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;
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;
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
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)}
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"
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"
loading={searchCreatorLoading}
/>
</div>
- </div>
+ </>
);
}