Somewhat get a max-width container working
This commit is contained in:
Matthew Penner
parent
6c53738070
commit
a1115ff096
13 changed files with 250 additions and 14 deletions
29
resources/scripts/components/admin/AdminContentBlock.tsx
Normal file
29
resources/scripts/components/admin/AdminContentBlock.tsx
Normal file
|
|
@ -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;
|
||||
46
resources/scripts/components/admin/api/ApiKeysContainer.tsx
Normal file
46
resources/scripts/components/admin/api/ApiKeysContainer.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
14
resources/scripts/components/admin/nests/NestsContainer.tsx
Normal file
14
resources/scripts/components/admin/nests/NestsContainer.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
14
resources/scripts/components/admin/nodes/NodesContainer.tsx
Normal file
14
resources/scripts/components/admin/nodes/NodesContainer.tsx
Normal file
|
|
@ -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 tw from 'twin.macro';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
|
||||
export default () => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
14
resources/scripts/components/admin/packs/PacksContainer.tsx
Normal file
14
resources/scripts/components/admin/packs/PacksContainer.tsx
Normal file
|
|
@ -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 tw from 'twin.macro';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
|
||||
export default () => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
14
resources/scripts/components/admin/users/UsersContainer.tsx
Normal file
14
resources/scripts/components/admin/users/UsersContainer.tsx
Normal file
|
|
@ -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 { useStoreState } from 'easy-peasy';
|
||||
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 }>`
|
||||
${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 (
|
||||
<div css={tw`h-screen w-screen overflow-x-hidden flex flex-row`}>
|
||||
<Sidebar collapsed={collapsed}>
|
||||
<div className={'header'} onClick={
|
||||
() => {
|
||||
setCollapsed(!collapsed);
|
||||
}
|
||||
}>
|
||||
<div className={'header'} onClick={ () => { setCollapsed(!collapsed); } }>
|
||||
{ !collapsed ?
|
||||
<h1 css={tw`text-2xl text-neutral-50 whitespace-no-wrap`}>{name}</h1>
|
||||
:
|
||||
|
|
@ -158,13 +163,29 @@ export default ({ location, match }: RouteComponentProps) => {
|
|||
</div>
|
||||
</Sidebar>
|
||||
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
<Route path={`${match.path}`} component={OverviewContainer} exact/>
|
||||
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
|
||||
<Route path={'*'} component={NotFound}/>
|
||||
</Switch>
|
||||
</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}>
|
||||
<Route path={`${match.path}`} component={OverviewContainer} 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}/>
|
||||
</Switch>
|
||||
{/* </TransitionRouter> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue