YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted some objects to components.

Browse Source
This commit is contained in:
Dominic Masters
2018-06-19 06:54:20 +10:00
parent aafc15402d
commit 37c938af07
9 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/App.jsx
View File

@ -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 (

15
public/nav/menu/HamburgerMenu.jsx
View File

@ -28,10 +28,9 @@ import Language from './../../language/Language';
import * as MenuActions from './../../actions/MenuActions';
const HamburerMenuItem = function(props) {
console.log(props);
return (
<li className="o-hamburger-menu__link">
<NavLink to={ props.to } className="o-hamburger-menu__link-link">
<li className="c-hamburger-menu__link">
<NavLink to={ props.to } className="c-hamburger-menu__link-link">
{ Language.get(props.lang) }
</NavLink>
</li>
@ -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 {
<div className={clazz}>
<button
type="button"
className="o-hamburger-menu__button"
className="c-hamburger-menu__button"
onClick={this.props.toggleMenu}
>
<img
src={ require('./../../images/icons/hamburger.svg') }
className="o-hamburger-menu__icon"
className="c-hamburger-menu__icon"
/>
</button>
<div className="o-hamburger-menu__menu">
<ul className="o-hamburger-menu__links">
<div className="c-hamburger-menu__menu">
<ul className="c-hamburger-menu__links">
<HamburerMenuItem to="/" lang="navbar.home" />
<HamburerMenuItem to="/about" lang="navbar.about" />
<HamburerMenuItem to="/contact" lang="navbar.contact" />

12
public/nav/navbar/Navbar.jsx
View File

@ -31,7 +31,7 @@ import HamburgerMenu from './../menu/HamburgerMenu';
const NavbarLink = function(props) {
return (
<NavLink to={ props.to } className="o-navbar__link" activeClassName="is-active" exact={props.exact}>
<NavLink to={ props.to } className="c-navbar__link" activeClassName="is-active" exact={props.exact}>
{ Language.get("navbar." + props.title) }
</NavLink>
);
@ -45,15 +45,15 @@ class Navbar extends React.Component {
render() {
return (
<section className="o-navbar is-stuck">
<section className="c-navbar is-stuck">
<PageBoundary>
<nav className="o-navbar__nav">
<nav className="c-navbar__nav">
{/* Logo */}
<NavLink to="/" className="o-navbar__logo-container" activeClassName="is-active">
<NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active">
<img
src={ require('./../../images/logo.svg') }
className="o-navbar__logo"
className="c-navbar__logo"
alt={ Language.get("site.name") }
/>
</NavLink>
@ -64,7 +64,7 @@ class Navbar extends React.Component {
<NavbarLink to="/contact" title="contact" exact />
{/* Hamburger Menu for smaller screens */}
<HamburgerMenu className="o-navbar__hamburger" />
<HamburgerMenu className="c-navbar__hamburger" />
</nav>
</PageBoundary>
</section>

2
public/page/Routes.jsx
View File

@ -41,7 +41,7 @@ const RouteWrapper = (props) => {
<Route {...props} render={() => {
let CustomTag = props.page;
return (
<main className="o-main">
<main className="c-main">
<CustomTag />
<Footer />
</main>

2
public/styles/objects/_app.scss → public/styles/components/_app.scss
View File

@ -8,7 +8,7 @@
* Version:
* 1.0.0 - 2018/05/03
*/
.o-app {
.c-app {
position: relative;
height: 100vh;
width: 100%;

28
public/styles/objects/_hamburger-menu.scss → public/styles/components/_hamburger-menu.scss
View File

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

2
public/styles/objects/main.scss → public/styles/components/_main.scss
View File

@ -5,7 +5,7 @@
* Version:
* 1.0.0 - 2018/05/07
*/
.o-main {
.c-main {
position: relative;
min-height: 100vh;
width: 100%;

8
public/styles/objects/_navbar.scss → public/styles/components/_navbar.scss
View File

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

8
public/styles/index.scss
View File

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