mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +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 { .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 { FC } from 'react';
import './NoMenuLayout.scss'; 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; export default NoMenuLayout;

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

@ -4,6 +4,7 @@ import Message from '../../utils/Message';
import ServersListGroup from '../ServersListGroup'; import ServersListGroup from '../ServersListGroup';
import { DeleteServerButtonProps } from '../DeleteServerButton'; import { DeleteServerButtonProps } from '../DeleteServerButton';
import { isServerWithId, SelectedServer, ServersMap } from '../data'; import { isServerWithId, SelectedServer, ServersMap } from '../data';
import NoMenuLayout from '../../common/NoMenuLayout';
import './ServerError.scss'; import './ServerError.scss';
interface ServerErrorProps { interface ServerErrorProps {
@ -14,9 +15,10 @@ interface ServerErrorProps {
export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => ( export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => (
{ servers, selectedServer }, { servers, selectedServer },
) => ( ) => (
<NoMenuLayout>
<div className="server-error__container flex-column"> <div className="server-error__container flex-column">
<div className="row w-100 mb-3 mb-md-5"> <div className="row w-100 mb-3 mb-md-5">
<Message type="error"> <Message type="error" fullWidth noMargin>
{!isServerWithId(selectedServer) && 'Could not find this Shlink server.'} {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
{isServerWithId(selectedServer) && ( {isServerWithId(selectedServer) && (
<> <>
@ -42,4 +44,5 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
</div> </div>
)} )}
</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 { RouteComponentProps } from 'react-router';
import Message from '../../utils/Message'; import Message from '../../utils/Message';
import { isNotFoundServer, SelectedServer } from '../data'; import { isNotFoundServer, SelectedServer } from '../data';
import NoMenuLayout from '../../common/NoMenuLayout';
interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> { interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
selectServer: (serverId: string) => void; selectServer: (serverId: string) => void;
@ -18,9 +19,9 @@ export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServ
if (!selectedServer) { if (!selectedServer) {
return ( return (
<div className="row"> <NoMenuLayout>
<Message loading /> <Message loading noMargin />
</div> </NoMenuLayout>
); );
} }

11
src/utils/Message.tsx
View file

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