From 37c938af07d321160455e1de9df446e8d4b05af5 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 19 Jun 2018 06:54:20 +1000 Subject: [PATCH] Converted some objects to components. --- public/App.jsx | 2 +- public/nav/menu/HamburgerMenu.jsx | 15 +++++----- public/nav/navbar/Navbar.jsx | 12 ++++---- public/page/Routes.jsx | 2 +- .../styles/{objects => components}/_app.scss | 2 +- .../_hamburger-menu.scss | 28 +++++++++---------- .../main.scss => components/_main.scss} | 2 +- .../{objects => components}/_navbar.scss | 8 +++--- public/styles/index.scss | 8 +++--- 9 files changed, 39 insertions(+), 40 deletions(-) rename public/styles/{objects => components}/_app.scss (96%) rename public/styles/{objects => components}/_hamburger-menu.scss (66%) rename public/styles/{objects/main.scss => components/_main.scss} (95%) rename public/styles/{objects => components}/_navbar.scss (92%) diff --git a/public/App.jsx b/public/App.jsx index 275983d..84f1f0c 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -46,7 +46,7 @@ class App extends React.Component { } render() { - let clazz = "o-app"; + let clazz = "c-app"; if(this.props.menuOpen) clazz += " is-menu-open " return ( diff --git a/public/nav/menu/HamburgerMenu.jsx b/public/nav/menu/HamburgerMenu.jsx index 9559a1c..c564e1c 100644 --- a/public/nav/menu/HamburgerMenu.jsx +++ b/public/nav/menu/HamburgerMenu.jsx @@ -28,10 +28,9 @@ import Language from './../../language/Language'; import * as MenuActions from './../../actions/MenuActions'; const HamburerMenuItem = function(props) { - console.log(props); return ( -
  • - +
  • + { Language.get(props.lang) }
    • @@ -44,7 +43,7 @@ class HamburgerMenu extends React.Component { } render() { - let clazz = "o-hamburger-menu"; + let clazz = "c-hamburger-menu"; if(this.props.open) clazz += " is-open"; if(this.props.className) clazz += " " + this.props.className; @@ -52,17 +51,17 @@ class HamburgerMenu extends React.Component {
    -
    -
      +
      +
        diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx index 8d28a83..16bc3db 100644 --- a/public/nav/navbar/Navbar.jsx +++ b/public/nav/navbar/Navbar.jsx @@ -31,7 +31,7 @@ import HamburgerMenu from './../menu/HamburgerMenu'; const NavbarLink = function(props) { return ( - + { Language.get("navbar." + props.title) } ); @@ -45,15 +45,15 @@ class Navbar extends React.Component { render() { return ( -
        +
        -
        diff --git a/public/page/Routes.jsx b/public/page/Routes.jsx index 15138c0..2034945 100644 --- a/public/page/Routes.jsx +++ b/public/page/Routes.jsx @@ -41,7 +41,7 @@ const RouteWrapper = (props) => { { let CustomTag = props.page; return ( -
        +
        diff --git a/public/styles/objects/_app.scss b/public/styles/components/_app.scss similarity index 96% rename from public/styles/objects/_app.scss rename to public/styles/components/_app.scss index 48e7eeb..9e3677f 100644 --- a/public/styles/objects/_app.scss +++ b/public/styles/components/_app.scss @@ -8,7 +8,7 @@ * Version: * 1.0.0 - 2018/05/03 */ -.o-app { +.c-app { position: relative; height: 100vh; width: 100%; diff --git a/public/styles/objects/_hamburger-menu.scss b/public/styles/components/_hamburger-menu.scss similarity index 66% rename from public/styles/objects/_hamburger-menu.scss rename to public/styles/components/_hamburger-menu.scss index a20f451..0c73a71 100644 --- a/public/styles/objects/_hamburger-menu.scss +++ b/public/styles/components/_hamburger-menu.scss @@ -10,20 +10,20 @@ * Version: * 1.0.0 - 2018/06/12 */ -$o-hamburger-menu--max: 200%; -$o-hamburger-menu--pos-x: 100%; -$o-hamburger-menu--pos-y: 0%; -@include t-keyframes(o-hamburger-menu--open) { - from { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } - to { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } +$c-hamburger-menu--max: 200%; +$c-hamburger-menu--pos-x: 100%; +$c-hamburger-menu--pos-y: 0%; +@include t-keyframes(c-hamburger-menu--open) { + from { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); } + to { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); } } -@include t-keyframes(o-hamburger-menu--close) { - from { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } - to { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); } +@include t-keyframes(c-hamburger-menu--close) { + from { clip-path: circle($c-hamburger-menu--max at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); } + to { clip-path: circle(0% at $c-hamburger-menu--pos-x $c-hamburger-menu--pos-y); } } -.o-hamburger-menu { +.c-hamburger-menu { &__menu { display: none; @@ -81,16 +81,16 @@ $o-hamburger-menu--pos-y: 0%; &.is-open { - .o-hamburger-menu__menu { + .c-hamburger-menu__menu { display: block; - @include t-animation-name(o-hamburger-menu--open); + @include t-animation-name(c-hamburger-menu--open); } } &.is-closing { - .o-hamburger-menu__menu { + .c-hamburger-menu__menu { display: block; - @include t-animation-name(o-hamburger-menu--close); + @include t-animation-name(c-hamburger-menu--close); } } } diff --git a/public/styles/objects/main.scss b/public/styles/components/_main.scss similarity index 95% rename from public/styles/objects/main.scss rename to public/styles/components/_main.scss index 430c05a..245e5e1 100644 --- a/public/styles/objects/main.scss +++ b/public/styles/components/_main.scss @@ -5,7 +5,7 @@ * Version: * 1.0.0 - 2018/05/07 */ -.o-main { +.c-main { position: relative; min-height: 100vh; width: 100%; diff --git a/public/styles/objects/_navbar.scss b/public/styles/components/_navbar.scss similarity index 92% rename from public/styles/objects/_navbar.scss rename to public/styles/components/_navbar.scss index b5fd1d3..5b02ada 100644 --- a/public/styles/objects/_navbar.scss +++ b/public/styles/components/_navbar.scss @@ -12,9 +12,9 @@ * Version: * 1.0.0 - 2018/05/03 */ -$o-navbar--link-thickness: 5px; +$c-navbar--link-thickness: 5px; -.o-navbar { +.c-navbar { z-index: $s-z--navbar; &.is-stuck { @@ -67,7 +67,7 @@ $o-navbar--link-thickness: 5px; &.is-active:after { background: $s-color--navbar__bar-hover; - height: $o-navbar--link-thickness; + height: $c-navbar--link-thickness; } &:hover { @@ -75,7 +75,7 @@ $o-navbar--link-thickness: 5px; &:after { background: $s-color--navbar__bar-hover; - height: $o-navbar--link-thickness; + height: $c-navbar--link-thickness; } } } diff --git a/public/styles/index.scss b/public/styles/index.scss index c852e54..ab4ddab 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -58,27 +58,27 @@ @import './elements/_headings.scss'; //Objects -@import './objects/main.scss'; -@import './objects/_app.scss'; @import './objects/_background.scss'; @import './objects/_button.scss'; @import './objects/_element-scroll-fader.scss'; @import './objects/_floating-content-box.scss'; @import './objects/_form.scss'; -@import './objects/_hamburger-menu.scss'; @import './objects/_input.scss'; @import './objects/_loader.scss'; -@import './objects/_navbar.scss'; @import './objects/_page-transition.scss'; @import './objects/_title.scss'; @import './objects/_video.scss'; //Components +@import './components/_app.scss'; @import './components/_body-section.scss'; @import './components/_clear-section.scss'; @import './components/_footer.scss'; +@import './components/_hamburger-menu.scss'; @import './components/_image-section.scss'; +@import './components/_main.scss'; +@import './components/_navbar.scss'; @import './components/_page.scss'; @import './components/_section.scss'; @import './components/_split-section.scss';