Cleaned more code, still untested.

This commit is contained in:
2018-10-24 09:06:18 +11:00
parent 7030a513de
commit f1b10e223e
28 changed files with 183 additions and 313 deletions

View File

@ -24,9 +24,15 @@
import React from 'react';
import { connect } from 'react-redux';
import { Helmet } from "react-helmet";
import PageBoundary from './PageBoundary';
import Styles from './Page.scss';
//Publics
import Language from '@public/language/Language';
//Components
import PageBoundary from './boundary/PageBoundary';
class Page extends React.Component {
constructor(props) {
super(props);

View File

@ -0,0 +1,29 @@
/*
* Page
* Styles for the base Page elements.
*
* Dependencies:
* styles/settings/responsive.scss
*
* Version:
* 1.0.0 - 2018/05/05
*/
@import '~@styles/global';
.c-page {
flex-grow: 1;
&__boundary {
max-width: $s-screen-boundary;
margin: 0 auto;
&.is-full {
position: relative;
height: 100%;
}
&.is-small {
max-width: $s-screen-boundary / 2;
}
}
}

View File

@ -23,14 +23,22 @@
import React from 'react';
export default function(props) {
let clazzes = "c-page__boundary";
import Styles from './PageBoundary';
export default (props) => {
let newProps = { ...props };
let { full, small, className } = props;
delete newProps.full;
delete newProps.small;
let clazzes = "c-page-boundary";
if(props.full) clazzes += " is-full";
if(props.small) clazzes += " is-small";
if(props.className) clazzes += " " + props.className;
return (
<div className={ clazzes }>
<div {...newProps} className={ clazzes }>
{ props.children }
</div>
);

View File

@ -0,0 +1,22 @@
/*
* PageBoundary
* Styles for the Page Boundaries
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/10/23
*/
.c-page-boundary {
max-width: $s-screen-boundary;
margin: 0 auto;
&.is-full {
position: relative;
height: 100%;
}
&.is-small {
max-width: $s-screen-boundary / 2;
}
}

View File

@ -28,9 +28,6 @@ import PropTypes from 'prop-types'
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Header from './../header/Header';
import Footer from './../footer/Footer';
const PageLoading = (props) => {
if(props.error) return <span>Loading Error</span>;
if(props.pastDelay) return <span>Loading...</span>;
@ -38,50 +35,27 @@ const PageLoading = (props) => {
};
export const RouteWrapper = (props) => {
return (
<Route {...props} render={() => {
let CustomLoadable = Loadable({
loader: props.page,
loading: PageLoading
});
let CustomTag = <span>Not loading</span>;
return (
<main className="c-main">
<CustomLoadable />
<Footer />
</main>
);
}}/>
);
let { page } = props.page;
let render = () => {
let CustomLoadable = Loadable({
loader: page,
loading: PageLoading
});
return <CustomLoadable />
};
return <Route {...props} render={render} />;
};
class Routes extends React.Component {
constructor(props) {
super(props);
}
export default withRouter((props) => {
const { match, location, history, children } = this.props;
render() {
const { match, location, history, children } = this.props;
return (
<Route>
{/*<TransitionGroup className="o-page-transition__container">
<CSSTransition
key={ location.pathname }
timeout={1000}
classNames="o-page-transition"
mountOnEnter={ true }
unmountOnExit={ true }
onEntering={ this.props.onEntering }
>*/}
<Switch location={ location }>
{ children }
</Switch>
{/*</CSSTransition>
</TransitionGroup>*/}
</Route>
);
}
}
export default withRouter(Routes);
return (
<Route>
<Switch location={ location }>
{ children }
</Switch>
</Route>
);
});