mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 01:37:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved NoMenuLayout, using a container-xl style

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-12 12:04:20 +01:00
parent 4d969b994e
commit 526fa14dce
5 changed files with 45 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/NoMenuLayout.scss
View file

@ -1,3 +1,3 @@
.no-menu-wrapper {
padding: 40px 20px 20px;
padding: 30px 20px 20px;
}

2
src/common/NoMenuLayout.tsx
View file

@ -1,6 +1,6 @@
import { FC } from 'react';
import './NoMenuLayout.scss';
const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper">{children}</div>;
const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
export default NoMenuLayout;

57
src/servers/helpers/ServerError.tsx
View file

@ -4,6 +4,7 @@ import Message from '../../utils/Message';
import ServersListGroup from '../ServersListGroup';
import { DeleteServerButtonProps } from '../DeleteServerButton';
import { isServerWithId, SelectedServer, ServersMap } from '../data';
import NoMenuLayout from '../../common/NoMenuLayout';
import './ServerError.scss';
interface ServerErrorProps {
@ -14,32 +15,34 @@ interface ServerErrorProps {
export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => (
{ servers, selectedServer },
) => (
<div className="server-error__container flex-column">
<div className="row w-100 mb-3 mb-md-5">
<Message type="error">
{!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
{isServerWithId(selectedServer) && (
<>
<p>Oops! Could not connect to this Shlink server.</p>
Make sure you have internet connection, and the server is properly configured and on-line.
</>
)}
</Message>
</div>
<ServersListGroup servers={Object.values(servers)}>
These are the Shlink servers currently configured. Choose one of
them or <Link to="/server/create">add a new one</Link>.
</ServersListGroup>
{isServerWithId(selectedServer) && (
<div className="container mt-3 mt-md-5">
<h5>
Alternatively, if you think you may have miss-configured this server, you
can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
<Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
</h5>
<NoMenuLayout>
<div className="server-error__container flex-column">
<div className="row w-100 mb-3 mb-md-5">
<Message type="error" fullWidth noMargin>
{!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
{isServerWithId(selectedServer) && (
<>
<p>Oops! Could not connect to this Shlink server.</p>
Make sure you have internet connection, and the server is properly configured and on-line.
</>
)}
</Message>
</div>
)}
</div>
<ServersListGroup servers={Object.values(servers)}>
These are the Shlink servers currently configured. Choose one of
them or <Link to="/server/create">add a new one</Link>.
</ServersListGroup>
{isServerWithId(selectedServer) && (
<div className="container mt-3 mt-md-5">
<h5>
Alternatively, if you think you may have miss-configured this server, you
can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
<Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
</h5>
</div>
)}
</div>
</NoMenuLayout>
);

7
src/servers/helpers/withSelectedServer.tsx
View file

@ -2,6 +2,7 @@ import { FC, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import Message from '../../utils/Message';
import { isNotFoundServer, SelectedServer } from '../data';
import NoMenuLayout from '../../common/NoMenuLayout';
interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
selectServer: (serverId: string) => void;
@ -18,9 +19,9 @@ export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServ
if (!selectedServer) {
return (
<div className="row">
<Message loading />
</div>
<NoMenuLayout>
<Message loading noMargin />
</NoMenuLayout>
);
}

11
src/utils/Message.tsx
View file

@ -26,14 +26,21 @@ const getTextClassForType = (type: MessageType) => {
interface MessageProps {
noMargin?: boolean;
loading?: boolean;
fullWidth?: boolean;
type?: MessageType;
}
const Message: FC<MessageProps> = ({ children, loading = false, noMargin = false, type = 'default' }) => {
const Message: FC<MessageProps> = (
{ children, loading = false, noMargin = false, type = 'default', fullWidth = false },
) => {
const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
const classes = classNames({
'col-md-12': fullWidth,
'col-md-10 offset-md-1': !fullWidth,
});
return (
<div className="col-md-10 offset-md-1">
<div className={classes}>
<Card className={cardClasses} body>
<h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
{loading && <FontAwesomeIcon icon={preloader} spin />}