Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Misc CSS and transition fixes

Browse source
This commit is contained in:
Dane Everitt 2019-07-27 20:23:44 -07:00
parent df5de4be97
commit ecb5384579
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/TransitionRouter.tsx
View file

@ -10,7 +10,7 @@ export default ({ children }: Props) => (
<Route
render={({ location }) => (
<TransitionGroup className={'route-transition-group'}>
<CSSTransition key={location.key} timeout={250} classNames={'fade'}>
<CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
<section>
{children}
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>

5
resources/scripts/routers/ServerRouter.tsx
View file

@ -8,6 +8,8 @@ import WebsocketHandler from '@/components/server/WebsocketHandler';
import { ServerContext } from '@/state/server';
import { Provider } from 'react-redux';
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import { CSSTransition } from 'react-transition-group';
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
const server = ServerContext.useStoreState(state => state.server.data);
@ -23,6 +25,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
return (
<React.Fragment>
<NavigationBar/>
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
<div id={'sub-navigation'}>
<div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
<div className={'items'}>
@ -33,6 +36,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
</div>
</div>
</div>
</CSSTransition>
<Provider store={ServerContext.useStore()}>
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
@ -45,6 +49,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<WebsocketHandler/>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
</Switch>
</React.Fragment>

4
resources/scripts/state/flashes.ts
View file

@ -4,6 +4,7 @@ import { FlashMessageType } from '@/components/MessageBox';
export interface FlashStore {
items: FlashMessage[];
addFlash: Action<FlashStore, FlashMessage>;
addError: Action<FlashStore, { message: string; key?: string }>;
clearFlashes: Action<FlashStore, string | void>;
}
@ -20,6 +21,9 @@ const flashes: FlashStore = {
addFlash: action((state, payload) => {
state.items.push(payload);
}),
addError: action((state, payload) => {
state.items.push({ type: 'error', title: 'Error', ...payload });
}),
clearFlashes: action((state, payload) => {
state.items = payload ? state.items.filter(flashes => flashes.key !== payload) : [];
}),

4
resources/styles/components/animations.css
View file

@ -1,9 +1,9 @@
/*! purgecss start ignore */
.fade-enter {
.fade-enter, .fade-appear {
@apply .opacity-0;
}
.fade-enter-active {
.fade-enter-active, .fade-appear-active {
@apply .opacity-100;
transition: opacity 250ms;
}

6
resources/styles/components/spinners.css
View file

@ -74,12 +74,14 @@
}
&.spinner-blue {
border: 3px solid hsla(212, 92%, 43%, 0.2);
border-style: solid;
border-color: hsla(212, 92%, 43%, 0.2);
border-top-color: hsl(212, 92%, 43%);
}
&.spinner-white {
border: 3px solid rgba(255, 255, 255, 0.2);
border-style: solid;
border-color: rgba(255, 255, 255, 0.2);
border-top-color: rgb(255, 255, 255);
}
}