mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use more flex utilities in ManageServers component

Browse source
This commit is contained in:
Alejandro Celaya 2024-10-19 13:35:20 +02:00
parent ae014e2a14
commit dcac312d86
2 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/common/NoMenuLayout.tsx
View file

@ -1,6 +1,11 @@
import { clsx } from 'clsx';
import type { FC, PropsWithChildren } from 'react'; import type { FC, PropsWithChildren } from 'react';
import './NoMenuLayout.scss'; import './NoMenuLayout.scss';
export const NoMenuLayout: FC<PropsWithChildren> = ({ children }) => ( export type NoMenuLayoutProps = PropsWithChildren & {
<div className="no-menu-wrapper container-xl">{children}</div> className?: string;
};
export const NoMenuLayout: FC<NoMenuLayoutProps> = ({ children, className }) => (
<div className={clsx('no-menu-wrapper container-xl', className)}>{children}</div>
); );

18
src/servers/ManageServers.tsx
View file

@ -5,7 +5,7 @@ import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
import type { FC } from 'react'; import type { FC } from 'react';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button, Row } from 'reactstrap'; import { Button } from 'reactstrap';
import { NoMenuLayout } from '../common/NoMenuLayout'; import { NoMenuLayout } from '../common/NoMenuLayout';
import type { FCWithDeps } from '../container/utils'; import type { FCWithDeps } from '../container/utils';
import { componentFactory, useDependencies } from '../container/utils'; import { componentFactory, useDependencies } from '../container/utils';
@ -44,24 +44,22 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME); const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
return ( return (
<NoMenuLayout> <NoMenuLayout className="d-flex flex-column gap-3">
<SearchField className="mb-3" onChange={setSearchTerm} /> <SearchField onChange={setSearchTerm} />
<Row className="mb-3"> <div className="d-flex flex-column flex-md-row gap-2">
<div className="col-md-6 d-flex d-md-block mb-2 mb-md-0"> <div className="d-flex gap-2">
<ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn> <ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
{filteredServers.length > 0 && ( {filteredServers.length > 0 && (
<Button outline className="ms-2 flex-fill" onClick={async () => serversExporter.exportServers()}> <Button outline className="flex-fill" onClick={async () => serversExporter.exportServers()}>
<FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
</Button> </Button>
)} )}
</div> </div>
<div className="col-md-6 text-md-end d-flex d-md-block"> <Button outline color="primary" className="ms-md-auto" tag={Link} to="/server/create">
<Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">
<FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
</Button> </Button>
</div> </div>
</Row>
<SimpleCard> <SimpleCard>
<table className="table table-hover responsive-table mb-0"> <table className="table table-hover responsive-table mb-0">
@ -83,7 +81,7 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
</SimpleCard> </SimpleCard>
{errorImporting && ( {errorImporting && (
<div className="mt-3"> <div>
<Result type="error">The servers could not be imported. Make sure the format is correct.</Result> <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>
</div> </div>
)} )}