sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic design concept for a nav bar

This commit is contained in:
Dane Everitt 2019-06-24 22:17:58 -07:00
parent cbd050edda
commit 46c338dc1b
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
5 changed files with 121 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/scripts/TransitionRouter.tsx
View File

@ -18,15 +18,17 @@ export default ({ basename, children }: Props) => (
<Switch location={location}> <Switch location={location}>
{children} {children}
</Switch> </Switch>
<p className={'text-right text-neutral-500 text-xs'}> <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
&copy; 2015 - 2019&nbsp; <p className={'text-right text-neutral-500 text-xs'}>
<a &copy; 2015 - 2019&nbsp;
href={'https://pterodactyl.io'} <a
className={'no-underline text-neutral-500 hover:text-neutral-300'} href={'https://pterodactyl.io'}
> className={'no-underline text-neutral-500 hover:text-neutral-300'}
Pterodactyl Software >
</a> Pterodactyl Software
</p> </a>
</p>
</div>
</section> </section>
</CSSTransition> </CSSTransition>
</TransitionGroup> </TransitionGroup>

2
resources/scripts/components/App.tsx
View File

@ -39,7 +39,7 @@ const App = () => {
return ( return (
<StoreProvider store={store}> <StoreProvider store={store}>
<Router basename={'/'}> <Router basename={'/'}>
<div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}> <div className={'mx-auto w-auto'}>
<TransitionRouter basename={'/'}> <TransitionRouter basename={'/'}>
<Route exact path="/" component={ServerOverviewContainer}/> <Route exact path="/" component={ServerOverviewContainer}/>
<Route path="/auth" component={AuthenticationRouter}/> <Route path="/auth" component={AuthenticationRouter}/>

116
resources/scripts/components/account/DesignElementsContainer.tsx
View File

@ -5,65 +5,71 @@ import ContentBox from '@/components/elements/ContentBox';
export default class DesignElementsContainer extends React.PureComponent { export default class DesignElementsContainer extends React.PureComponent {
render () { render () {
return ( return (
<div className={'my-10'}> <React.Fragment>
<div className={'flex'}> <div className={'my-10'}>
<ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}> <div className={'flex'}>
<p className={'text-neutral-200 text-sm'}> <ContentBox
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8! className={'flex-1 mr-4'}
</p> title={'A Special Announcement'}
<p><Link to={'/'}>Back</Link></p> borderColor={'border-primary-400'}
</ContentBox> >
<div className={'ml-4 flex-1'}> <p className={'text-neutral-200 text-sm'}>
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2> Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
<label className={'uppercase text-neutral-200'}>Email</label>
<input type={'text'} className={'input-dark'}/>
<p className={'input-help'}>
This is some descriptive helper text to explain how things work.
</p> </p>
<div className={'mt-6'}/> <p><Link to={'/'}>Back</Link></p>
<label className={'uppercase text-neutral-200'}>Username</label> </ContentBox>
<input type={'text'} className={'input-dark error'}/> <div className={'ml-4 flex-1'}>
<p className={'input-help'}> <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
This field has an error. <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
</p> <label className={'uppercase text-neutral-200'}>Email</label>
<div className={'mt-6'}/> <input type={'text'} className={'input-dark'}/>
<label className={'uppercase text-neutral-200'}>Disabled Field</label> <p className={'input-help'}>
<input type={'text'} className={'input-dark'} disabled={true}/> This is some descriptive helper text to explain how things work.
<div className={'mt-6'}/> </p>
<label className={'uppercase text-neutral-200'}>Textarea</label> <div className={'mt-6'}/>
<textarea className={'input-dark h-32'}></textarea> <label className={'uppercase text-neutral-200'}>Username</label>
<div className={'mt-6'}/> <input type={'text'} className={'input-dark error'}/>
<button className={'btn btn-primary btn-sm'}> <p className={'input-help'}>
Blue This field has an error.
</button> </p>
<button className={'btn btn-grey btn-sm ml-2'}> <div className={'mt-6'}/>
Grey <label className={'uppercase text-neutral-200'}>Disabled Field</label>
</button> <input type={'text'} className={'input-dark'} disabled={true}/>
<button className={'btn btn-green btn-sm ml-2'}> <div className={'mt-6'}/>
Green <label className={'uppercase text-neutral-200'}>Textarea</label>
</button> <textarea className={'input-dark h-32'}></textarea>
<button className={'btn btn-red btn-sm ml-2'}> <div className={'mt-6'}/>
Red <button className={'btn btn-primary btn-sm'}>
</button> Blue
<div className={'mt-6'}/> </button>
<button className={'btn btn-secondary btn-sm'}> <button className={'btn btn-grey btn-sm ml-2'}>
Secondary Grey
</button> </button>
<button className={'btn btn-secondary btn-red btn-sm ml-2'}> <button className={'btn btn-green btn-sm ml-2'}>
Secondary Danger Green
</button> </button>
<div className={'mt-6'}/> <button className={'btn btn-red btn-sm ml-2'}>
<button className={'btn btn-primary btn-lg'}> Red
Large </button>
</button> <div className={'mt-6'}/>
<button className={'btn btn-primary btn-xs ml-2'}> <button className={'btn btn-secondary btn-sm'}>
Tiny Secondary
</button> </button>
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
Secondary Danger
</button>
<div className={'mt-6'}/>
<button className={'btn btn-primary btn-lg'}>
Large
</button>
<button className={'btn btn-primary btn-xs ml-2'}>
Tiny
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </React.Fragment>
); );
} }
} }

44
resources/scripts/routers/AccountRouter.tsx
View File

@ -1,11 +1,49 @@
import * as React from 'react'; import * as React from 'react';
import { Route, RouteComponentProps } from 'react-router-dom'; import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
import DesignElementsContainer from '@/components/account/DesignElementsContainer'; import DesignElementsContainer from '@/components/account/DesignElementsContainer';
import AccountOverviewContainer from '@/components/account/AccountOverviewContainer'; import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
export default ({ match }: RouteComponentProps) => ( export default ({ match }: RouteComponentProps) => (
<div> <div>
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/> <div className={'w-full bg-neutral-900 shadow-md'}>
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/> <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
<div className={'flex-1'}>
<Link
to={'/'}
className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
style={{
transition: 'color 150ms linear',
}}
>
Pterodactyl
</Link>
</div>
<div className={'flex h-full items-center justify-center'}>
<NavLink
to={'/'}
exact={true}
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
style={{
transition: 'background-color 150ms linear, color 150ms linear',
}}
>
Dashboard
</NavLink>
<NavLink
to={'/account'}
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
style={{
transition: 'background-color 150ms linear, color 150ms linear',
}}
>
Account
</NavLink>
</div>
</div>
</div>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
</div>
</div> </div>
); );

8
tailwind.js
View File

@ -44,7 +44,7 @@ View the full documentation at https://tailwindcss.com.
let colors = { let colors = {
'transparent': 'transparent', 'transparent': 'transparent',
'black': '#1F2933', 'black': 'hsl(210, 27%, 10%)',
'white': '#ffffff', 'white': '#ffffff',
'basically-white': '#fafafb', 'basically-white': '#fafafb',
@ -196,6 +196,12 @@ module.exports = {
'system-ui', 'system-ui',
'sans-serif', 'sans-serif',
], ],
'header': [
'"IBM Plex Sans"',
'"Roboto"',
'system-ui',
'sans-serif',
],
'serif': [ 'serif': [
'Constantia', 'Constantia',
'"Lucida Bright"', '"Lucida Bright"',