Further improved minimization of Language and fixed an overflow-x bug

This commit is contained in:
2018-10-29 05:39:28 +11:00
parent 29f82b9709
commit c884efb837
11 changed files with 84 additions and 61 deletions

View File

@ -28,8 +28,8 @@ import { withRouter } from 'react-router';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import ErrorPage from './../error/ErrorPage';
import LoadingPage from './../loading/LoadingPage';
import ErrorPage from '@pages/error/ErrorPage';
import LoadingPage from '@pages/loading/LoadingPage';
const PageLoading = (props) => {
let { error, pastDelay } = props;

View File

@ -28,7 +28,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
import Styles from './Modal.scss';
import Language from '@public/language/Language';
import { withLanguage } from '@public/language/Language';
import { openModal, closeModal } from '@public/actions/ModalActions';
import Keyboard from '@public/keyboard/Keyboard';
@ -55,14 +55,14 @@ class Modal extends React.Component {
render() {
let newProps = {...this.props};
let { buttons, closeModal, close, title, children, large, modal } = newProps;
let { buttons, closeModal, close, title, children, large, modal, lang } = newProps;
["onExited"].forEach(e => delete newProps[e]);
//Add necessary buttons
buttons = buttons || [];
if(!Array.isArray(buttons)) buttons = [ buttons ];
if(close) buttons = [...buttons,<Button key="close" onClick={closeModal} children={Language.get("modal.close")} />];
if(close) buttons = [...buttons, <Button key="close" onClick={closeModal} children={ lang.modal.close } />];
//Inner divs
let heading,body,footer;
@ -111,8 +111,7 @@ class Modal extends React.Component {
const mapStateToProps = (state) => {
return {
modal: state.modal,
language: state.language
modal: state.modal
};
}
@ -123,4 +122,4 @@ const mapDispatchToProps = (dispatch) => {
},dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Modal);
export default connect(mapStateToProps, mapDispatchToProps)(withLanguage(Modal));

View File

@ -22,33 +22,33 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Frame from './Frame';
import Language from './../../language/Language';
import { withLanguage } from '@public/language/Language';
class AddressBar extends React.Component {
constructor(props) {
super(props);
}
onChange() {
onChange(e) {
if(this.props.onChange) this.props.onChange(e);
}
render() {
let { href, lang } = this.props;
let clazz = "o-window__address-bar";
return (
<div className={clazz}>
<span className="o-window__address-bar-title">
{ Language.get("window.address") }
{ lang.window.address }
</span>
<Frame className="o-window__address-bar-frame">
<input
type="text"
value={this.props.href}
value={ href }
className="o-window__input o-window__address-bar-input"
onChange={ this.onChange.bind(this) }
onChange={e => this.onChange(e)}
/>
</Frame>
</div>
@ -56,10 +56,4 @@ class AddressBar extends React.Component {
}
}
const mapStateToProps = (state) => {
return {
code: state.language.code
};
}
export default connect(mapStateToProps)(AddressBar);
export default withLanguage(AddressBar);

View File

@ -23,13 +23,20 @@
import React from 'react';
import { withLanguage} from '@public/language/Language';
import Page from '@components/page/Page';
import Page, { PageBoundary } from '@components/page/Page';
import { ClearSection} from '@components/section/Section';
import { Title } from '@objects/typography/Typography';
export default withLanguage(props => {
let { className, lang } = props;
return (
<Page className={`c-error-page ${className||""}`} title={lang.pages.error.title}>
<p>{ lang.pages.error.body }</p>
<ClearSection />
<PageBoundary>
<Title className="u-text-center">{ lang.pages.error.body }</Title>
</PageBoundary>
<ClearSection />
</Page>
);
});

View File

@ -22,9 +22,7 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Page from '@components/page/Page';
import Language from '@public/language/Language'
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
@ -32,7 +30,7 @@ import ProgrammingSection from './sections/ProgrammingSection';
import PlatformsSection from './sections/PlatformsSection';
import ExistingWorkSection from './sections/ExistingWorkSection';
const HomePage = (props) => {
export default props => {
//Return
return (
<Page style="home-page" className="p-home-page" title={0}>
@ -52,14 +50,7 @@ const HomePage = (props) => {
{/* Existing Work */}
<ExistingWorkSection />
</Page>
);
}
const mapStateToProps = (state) => {
return {
code: state.language.code
};
}
export default connect(mapStateToProps)(HomePage);

View File

@ -22,7 +22,7 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection } from '@components/section/Section';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
@ -30,7 +30,9 @@ import { Title, Subtitle } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default (props) => {
export default withLanguage(props => {
let { lang } = props;
return (
<ImageSection
className="p-home-page__banner"
@ -43,11 +45,11 @@ export default (props) => {
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<ElementScrollFader from="bottom" >
<Title>{ Language.get("pages.home.banner.title") }</Title>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
<Title>{ lang.pages.home.banner.title }</Title>
<Subtitle className="u-responsive--small-up">{ lang.pages.home.banner.subtitle }</Subtitle>
</ElementScrollFader>
</FloatingContentBox>
</PageBoundary>
</ImageSection>
);
}
});

View File

@ -22,7 +22,7 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection, SplitSection, Split } from '@components/section/Section';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
@ -56,7 +56,8 @@ const Platform = (props) => {
);
};
export default (props) => {
export default withLanguage(props => {
let { lang } = props;
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-platforms"
@ -67,7 +68,7 @@ export default (props) => {
<PageBoundary>
<ElementScrollFader from="left">
<Title className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.heading") }
{ lang.pages.home.platforms.heading }
</Title>
</ElementScrollFader>
@ -77,14 +78,14 @@ export default (props) => {
src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
from="left"
to="//www.shopify.com"
title={ Language.get("pages.home.platforms.shopify") }
title={ lang.pages.home.platforms.shopify }
/>
{/* React */}
<Platform
src={require('@assets/images/branding/react/react-logo.svg')}
from="top"
to="//reactjs.org"
title={ Language.get("pages.home.platforms.react") }
title={ lang.pages.home.platforms.react }
/>
{/* MonoGame */}
@ -92,7 +93,7 @@ export default (props) => {
src={require('@assets/images/branding/monogame/monogame-logo.svg')}
from="bottom"
to="http://www.monogame.net"
title={ Language.get("pages.home.platforms.monogame") }
title={ lang.pages.home.platforms.monogame }
/>
{/* PGSQL */}
@ -100,7 +101,7 @@ export default (props) => {
src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
from="right"
to="//www.postgresql.org"
title={ Language.get("pages.home.platforms.pgsql") }
title={ lang.pages.home.platforms.pgsql }
/>
{/* NodeJS */}
@ -108,7 +109,7 @@ export default (props) => {
src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
from="top"
to="//nodejs.org"
title={ Language.get("pages.home.platforms.nodejs") }
title={ lang.pages.home.platforms.nodejs }
/>
{/* C# */}
@ -116,7 +117,7 @@ export default (props) => {
src={require('@assets/images/branding/csharp/csharp-logo.svg')}
from="top"
to="//docs.microsoft.com/en-us/dotnet/csharp/"
title={ Language.get("pages.home.platforms.csharp") }
title={ lang.pages.home.platforms.csharp }
/>
{/* PHP */}
@ -124,7 +125,7 @@ export default (props) => {
src={require('@assets/images/branding/php/php-logo.svg')}
from="top"
to="//php.net"
title={ Language.get("pages.home.platforms.php") }
title={ lang.pages.home.platforms.php }
/>
{/* Java */}
@ -132,7 +133,7 @@ export default (props) => {
src={require('@assets/images/branding/java/java-logo.svg')}
from="top"
to="//java.com"
title={ Language.get("pages.home.platforms.java") }
title={ lang.pages.home.platforms.java }
/>
{/* neto */}
@ -140,7 +141,7 @@ export default (props) => {
src={require('@assets/images/branding/neto/neto-logo.svg')}
from="bottom"
to="//www.neto.com.au"
title={ Language.get("pages.home.platforms.neto") }
title={ lang.pages.home.platforms.neto }
/>
{/* MySQL */}
@ -148,7 +149,7 @@ export default (props) => {
src={require('@assets/images/branding/mysql/mysql-logo.svg')}
from="bottom"
to="//www.mysql.com"
title={ Language.get("pages.home.platforms.mysql") }
title={ lang.pages.home.platforms.mysql }
/>
{/* Heroku */}
@ -156,7 +157,7 @@ export default (props) => {
src={require('@assets/images/branding/heroku/heroku-logo.svg')}
from="bottom"
to="//heroku.com"
title={ Language.get("pages.home.platforms.heroku") }
title={ lang.pages.home.platforms.heroku }
/>
{/* OpenGL */}
@ -164,7 +165,7 @@ export default (props) => {
src={require('@assets/images/branding/opengl/opengl-logo.svg')}
from="bottom"
to="//www.opengl.org"
title={ Language.get("pages.home.platforms.opengl") }
title={ lang.pages.home.platforms.opengl }
/>
{/* Discord */}
@ -172,7 +173,7 @@ export default (props) => {
src={ require('@assets/images/branding/discord/discord-logo.svg') }
from="right"
to="//discordapp.com"
title={ Language.get("pages.home.platforms.discord") }
title={ lang.pages.home.platforms.discord }
/>
{/* Twitch */}
@ -180,7 +181,7 @@ export default (props) => {
src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
from="right"
to="//twitch.tv"
title={ Language.get("pages.home.platforms.twitch") }
title={ lang.pages.home.platforms.twitch }
/>
{/* Twitter */}
@ -188,7 +189,7 @@ export default (props) => {
src={require('@assets/images/branding/twitter/twitter-logo.svg')}
from="left"
to="//twitter.com"
title={ Language.get("pages.home.platforms.twitter") }
title={ lang.pages.home.platforms.twitter }
/>
{/* Google Cloud */}
@ -196,16 +197,16 @@ export default (props) => {
src={ require('@assets/images/branding/google-cloud/google-cloud-logo.svg') }
from="left"
to="//console.cloud.google.com"
title={ Language.get("pages.home.platforms.googlecloud") }
title={ lang.pages.home.platforms.googlecloud }
/>
</div>
<ElementScrollFader from="bottom">
<Subtitle className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.footer") }
{ lang.pages.home.platforms.footer }
</Subtitle>
</ElementScrollFader>
</PageBoundary>
</ImageSection>
);
}
});

View File

@ -42,6 +42,8 @@
@import './elements/_body.scss';
@import './elements/_headings.scss';
@import './elements/#app.scss';
//TEMP
@import './objects/_page-transition.scss';
@import './pages/_contact-page.scss';

View File

@ -0,0 +1,27 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
#app {
overflow: hidden;
max-width: 100vw;
}