fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-28 11:13:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move allowed and blocked instance tables to the column right of linked instance table (#2071)

Browse source 
* Move allowed and blocked instance tables into column right of linked

Conserve some vertical space. And I assume linked instance list will
usually belonger than allowed and blocked, combined or not.

* Use tabs to organise instances by status

As per suggestions from the initial PR. Using the suggested Tab
component was implemented.

* Provide a header when there are no instances found

Will be weird if there are no instances linked on this instances page
otherwise.

* Wrap tabs and table in a col-sm-8 div (within a row div)

To restrict the width of the table especially on wider screens
This commit is contained in:
dnswrsrx 2023-08-29 12:27:50 -07:00 committed by GitHub
parent 28d60a12d0
commit acc32f2c5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/shared/components/home/instances.tsx
View file

@ -6,12 +6,14 @@ import {
GetSiteResponse,
Instance,
} from "lemmy-js-client";
import classNames from "classnames";
import { relTags } from "../../config";
import { InitialFetchRequest } from "../../interfaces";
import { FirstLoadService, I18NextService } from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import Tabs from "../common/tabs";
type InstancesData = RouteDataResponse<{
federatedInstancesResponse: GetFederatedInstancesResponse;
@ -85,37 +87,30 @@ export class Instances extends Component<any, InstancesState> {
case "success": {
const instances = this.state.instancesRes.data.federated_instances;
return instances ? (
<>
<h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
<div className="row">
<div className="col-md-6">
<h2 className="h5 mb-3">
{I18NextService.i18n.t("linked_instances")}
</h2>
{this.itemList(instances.linked)}
</div>
<div className="row">
<div className="col-lg-8">
<Tabs
tabs={["linked", "allowed", "blocked"]
.filter(status => instances[status].length)
.map(status => ({
key: status,
label: I18NextService.i18n.t(`${status}_instances`),
getNode: isSelected => (
<div
role="tabpanel"
className={classNames("tab-pane show", {
active: isSelected,
})}
>
{this.itemList(instances[status])}
</div>
),
}))}
/>
</div>
<div className="row">
{instances.allowed && instances.allowed.length > 0 && (
<div className="col-md-6">
<h2 className="h5 mb-3">
{I18NextService.i18n.t("allowed_instances")}
</h2>
{this.itemList(instances.allowed)}
</div>
)}
{instances.blocked && instances.blocked.length > 0 && (
<div className="col-md-6">
<h2 className="h5 mb-3">
{I18NextService.i18n.t("blocked_instances")}
</h2>
{this.itemList(instances.blocked)}
</div>
)}
</div>
</>
</div>
) : (
<></>
<h5>No linked instance</h5>
);
}
}