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

public/components/page/route/Routes.jsx

@@ -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 ErrorPage from '@pages/error/ErrorPage';
-import LoadingPage from './../loading/LoadingPage';
+import LoadingPage from '@pages/loading/LoadingPage';
 
 const PageLoading = (props) => {
   let { error, pastDelay } = props;

public/objects/modal/Modal.jsx

@@ -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,
+    modal: state.modal
-    language: state.language
   };
 }
 
@@ -123,4 +122,4 @@ const mapDispatchToProps = (dispatch) => {
   },dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Modal);
+export default connect(mapStateToProps, mapDispatchToProps)(withLanguage(Modal));

public/objects/window/AddressBar.jsx

@@ -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) => {
+export default withLanguage(AddressBar);
-  return {
-    code: state.language.code
-  };
-}
-
-export default connect(mapStateToProps)(AddressBar);

public/pages/error/ErrorPage.jsx

@@ -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>
   );
 });

public/pages/home/HomePage.jsx

@@ -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);

public/pages/home/sections/BannerSection.jsx

@@ -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>
+            <Title>{ lang.pages.home.banner.title }</Title>
-            <Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
+            <Subtitle className="u-responsive--small-up">{ lang.pages.home.banner.subtitle }</Subtitle>
           </ElementScrollFader>
         </FloatingContentBox>
       </PageBoundary>
     </ImageSection>
   );
-}
+});

public/pages/home/sections/PlatformsSection.jsx

@@ -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>
   );
-}
+});

public/styles/common.scss

@@ -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';

public/styles/elements/#app.scss

@@ -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;
+}