Somewhat get a max-width container working
This commit is contained in:
parent
6c53738070
commit
a1115ff096
|
@ -0,0 +1,29 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { CSSTransition } from 'react-transition-group';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||||
|
|
||||||
|
const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }> = ({ children, showFlashKey }) => (
|
||||||
|
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
||||||
|
<>
|
||||||
|
{showFlashKey &&
|
||||||
|
<FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
|
||||||
|
}
|
||||||
|
{children}
|
||||||
|
|
||||||
|
{/* <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
|
||||||
|
© 2015 - 2020
|
||||||
|
<a
|
||||||
|
rel={'noopener nofollow noreferrer'}
|
||||||
|
href={'https://pterodactyl.io'}
|
||||||
|
target={'_blank'}
|
||||||
|
css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
|
||||||
|
>
|
||||||
|
Pterodactyl Software
|
||||||
|
</a>
|
||||||
|
</p> */}
|
||||||
|
</>
|
||||||
|
</CSSTransition>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default PageContentBlock;
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
import Button from '@/components/elements/Button';
|
||||||
|
import Spinner from '@/components/elements/Spinner';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [ loading ] = useState<boolean>(false);
|
||||||
|
const [ keys ] = useState<any[]>([]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||||
|
<div css={tw`flex flex-col`}>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>API Keys</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>Control access credentials for managing this Panel via the API.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
|
||||||
|
New API Key
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div css={tw`w-full flex flex-col`}>
|
||||||
|
<div css={tw`w-full flex flex-col bg-neutral-700 rounded-lg shadow-md`}>
|
||||||
|
{ loading ?
|
||||||
|
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||||
|
<Spinner/>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
keys.length < 1 ?
|
||||||
|
<div css={tw`w-full flex flex-col items-center justify-center pb-6 py-2 sm:py-8 md:py-10 px-8`}>
|
||||||
|
<div css={tw`h-64 flex`}>
|
||||||
|
<img src={'/assets/svgs/not_found.svg'} alt={'No Items'} css={tw`h-full`}/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p css={tw`text-xl text-neutral-400 text-center font-normal sm:mt-8`}>No items could be found, it's almost like they are hiding.</p>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
import Button from '@/components/elements/Button';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div css={tw`w-full flex flex-row items-center`}>
|
||||||
|
<div css={tw`flex flex-col`}>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Databases</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>Database hosts that servers can have databases created on.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
|
||||||
|
New Database
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
import Button from '@/components/elements/Button';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div css={tw`w-full flex flex-row items-center`}>
|
||||||
|
<div css={tw`flex flex-col`}>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Locations</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All locations that nodes can be assigned to for easier categorization.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type={'button'} size={'large'} css={tw`h-10 ml-auto px-4 py-0`}>
|
||||||
|
New Location
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Mounts</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>SoonTM</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All nests currently available on this system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nodes</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All nodes available on the system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,7 +1,14 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<h1>Overview</h1>
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Overview</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>A quick glance at your system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Packs</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All service packs available on the system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Servers</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All servers available on the system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,7 +1,14 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<h1>Settings</h1>
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Settings</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>Configure and manage settings for Pterodactyl.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<AdminContentBlock>
|
||||||
|
<div>
|
||||||
|
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Users</h2>
|
||||||
|
<p css={tw`text-base text-neutral-400`}>All registered users on the system.</p>
|
||||||
|
</div>
|
||||||
|
</AdminContentBlock>
|
||||||
|
);
|
||||||
|
};
|
|
@ -8,6 +8,15 @@ import tw from 'twin.macro';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import { useStoreState } from 'easy-peasy';
|
import { useStoreState } from 'easy-peasy';
|
||||||
import { ApplicationStore } from '@/state';
|
import { ApplicationStore } from '@/state';
|
||||||
|
import ApiKeysContainer from '@/components/admin/api/ApiKeysContainer';
|
||||||
|
import DatabasesContainer from '@/components/admin/databases/DatabasesContainer';
|
||||||
|
import NodesContainer from '@/components/admin/nodes/NodesContainer';
|
||||||
|
import LocationsContainer from '@/components/admin/locations/LocationsContainer';
|
||||||
|
import ServersContainer from '@/components/admin/servers/ServersContainer';
|
||||||
|
import UsersContainer from '@/components/admin/users/UsersContainer';
|
||||||
|
import PacksContainer from '@/components/admin/packs/PacksContainer';
|
||||||
|
import NestsContainer from '@/components/admin/nests/NestsContainer';
|
||||||
|
import MountsContainer from '@/components/admin/mounts/MountsContainer';
|
||||||
|
|
||||||
const Sidebar = styled.div<{ collapsed?: boolean }>`
|
const Sidebar = styled.div<{ collapsed?: boolean }>`
|
||||||
${tw`h-screen flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
|
${tw`h-screen flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
|
||||||
|
@ -73,11 +82,7 @@ export default ({ location, match }: RouteComponentProps) => {
|
||||||
return (
|
return (
|
||||||
<div css={tw`h-screen w-screen overflow-x-hidden flex flex-row`}>
|
<div css={tw`h-screen w-screen overflow-x-hidden flex flex-row`}>
|
||||||
<Sidebar collapsed={collapsed}>
|
<Sidebar collapsed={collapsed}>
|
||||||
<div className={'header'} onClick={
|
<div className={'header'} onClick={ () => { setCollapsed(!collapsed); } }>
|
||||||
() => {
|
|
||||||
setCollapsed(!collapsed);
|
|
||||||
}
|
|
||||||
}>
|
|
||||||
{ !collapsed ?
|
{ !collapsed ?
|
||||||
<h1 css={tw`text-2xl text-neutral-50 whitespace-no-wrap`}>{name}</h1>
|
<h1 css={tw`text-2xl text-neutral-50 whitespace-no-wrap`}>{name}</h1>
|
||||||
:
|
:
|
||||||
|
@ -158,13 +163,29 @@ export default ({ location, match }: RouteComponentProps) => {
|
||||||
</div>
|
</div>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<TransitionRouter>
|
<div css={tw`h-full w-full flex flex-col items-center`}>
|
||||||
|
<div css={tw`min-h-screen w-full flex flex-col px-4 py-12 overflow-x-hidden`} style={{ maxWidth: '86rem' }}>
|
||||||
|
{/* <TransitionRouter> */}
|
||||||
<Switch location={location}>
|
<Switch location={location}>
|
||||||
<Route path={`${match.path}`} component={OverviewContainer} exact/>
|
<Route path={`${match.path}`} component={OverviewContainer} exact/>
|
||||||
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
|
<Route path={`${match.path}/settings`} component={SettingsContainer}/>
|
||||||
|
<Route path={`${match.path}/api`} component={ApiKeysContainer}/>
|
||||||
|
|
||||||
|
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
|
||||||
|
<Route path={`${match.path}/locations`} component={LocationsContainer}/>
|
||||||
|
<Route path={`${match.path}/nodes`} component={NodesContainer}/>
|
||||||
|
<Route path={`${match.path}/servers`} component={ServersContainer}/>
|
||||||
|
<Route path={`${match.path}/users`} component={UsersContainer}/>
|
||||||
|
|
||||||
|
<Route path={`${match.path}/nests`} component={NestsContainer}/>
|
||||||
|
<Route path={`${match.path}/packs`} component={PacksContainer}/>
|
||||||
|
<Route path={`${match.path}/mounts`} component={MountsContainer}/>
|
||||||
|
|
||||||
<Route path={'*'} component={NotFound}/>
|
<Route path={'*'} component={NotFound}/>
|
||||||
</Switch>
|
</Switch>
|
||||||
</TransitionRouter>
|
{/* </TransitionRouter> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue