Rebuilt navigation system.
This commit is contained in:
@ -30,7 +30,7 @@ import { domsPlaceState } from './../state/';
|
||||
import { domsPlaceActions } from './../actions/';
|
||||
import { domsPlaceReducer } from './../reducer/';
|
||||
|
||||
import { Layout } from './../components/layout/layout';
|
||||
import { LayoutComponent } from './../components/layout/layout';
|
||||
|
||||
export class domsPlaceApp extends App<domsPlaceState, domsPlaceActions> {
|
||||
constructor() {
|
||||
@ -41,7 +41,7 @@ export class domsPlaceApp extends App<domsPlaceState, domsPlaceActions> {
|
||||
|
||||
getComponent() {
|
||||
return (
|
||||
<Layout history={this.history} />
|
||||
<LayoutComponent history={this.history} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
3
src/public/assets/icons/icon-close.svg
Normal file
3
src/public/assets/icons/icon-close.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
|
||||
<path d="M9.2 6.3L6.3 9.2 22.2 25l-16 16L9 43.8l16-16 16 16 2.8-2.9-16-15.9L43.7 9.2l-2.9-2.9L25 22.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 176 B |
@ -1 +1,3 @@
|
||||
<svg height="32" version="1" width="32" xmlns="http://www.w3.org/2000/svg"><path fill="#000" d="M1 7h30a1 1 0 0 0 0-2H1a1 1 0 0 0 0 2zM31 15H1a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2zM31 25H1a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||
<path d="M2 11h20v2H2zM2 5h20v2H2zM2 17h20v2H2z" fill="#FFF" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 224 B After Width: | Height: | Size: 137 B |
@ -59,12 +59,12 @@ export class Footer extends React.Component<FooterProps, FooterState> {
|
||||
render() {
|
||||
return (
|
||||
<footer {...this.props} className={`c-footer ${this.props.className||""}`}>
|
||||
<Logo className="c-footer__logo" />
|
||||
|
||||
<span className="c-footer__copyright">
|
||||
© 2012 ~ { this.state.now.getFullYear() } Dominic Masters
|
||||
</span>
|
||||
|
||||
<Logo className="c-footer__logo" />
|
||||
|
||||
<nav className="c-footer__navigation">
|
||||
<FooterLink to="/contact">Contact Me</FooterLink>
|
||||
<FooterLink to="/legal/privacy">Privacy Policy</FooterLink>
|
||||
|
||||
@ -9,14 +9,11 @@
|
||||
padding: $s-gutter--small;
|
||||
background: $s-color--background-footer;
|
||||
|
||||
&__logo {
|
||||
display: none;
|
||||
&__copyright,
|
||||
&__navigation {
|
||||
font-family: $s-font--family-heading;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__copyright,&__navigation {
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.75em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
@ -40,27 +37,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include t-media-query($s-xsmall-up) {
|
||||
&__logo {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright,&__navigation {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific for the footer, I want the logo to go down and be centered */
|
||||
@media screen and (min-width: 620px) {
|
||||
&__logo {
|
||||
display: flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
@ -69,6 +47,28 @@
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img { width: 120px; margin: auto; }
|
||||
}
|
||||
|
||||
@include t-media-query($s-small-up) {
|
||||
&__copyright,
|
||||
&__navigation {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@include t-media-query($s-medium-up) {
|
||||
&__copyright,
|
||||
&__navigation {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&__logo img { width: 150px; }
|
||||
}
|
||||
}
|
||||
|
||||
112
src/public/components/layout/header/hamburger/index.tsx
Normal file
112
src/public/components/layout/header/hamburger/index.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
// Copyright (c) 2019 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.
|
||||
|
||||
import * as React from 'react';
|
||||
import { Image, Link, LinkProps } from '@yourwishes/app-simple-react/dist/public/';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
|
||||
export interface MenuLinkProps extends LinkProps {
|
||||
to:string,
|
||||
title:string,
|
||||
exact?:boolean
|
||||
};
|
||||
|
||||
export const MenuLink = (props:MenuLinkProps) => {
|
||||
return (
|
||||
<Link className="c-hamburger__link" {...props} activeClassName="is-active">
|
||||
{ props.title }
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export interface HamburgerMenuProps { className?:string, links:MenuLinkProps[] }
|
||||
export interface HamburgerMenuState { open:boolean }
|
||||
|
||||
export class HamburgerMenu extends React.Component<HamburgerMenuProps, HamburgerMenuState> {
|
||||
menu:HTMLDivElement;
|
||||
clickEvent;
|
||||
|
||||
constructor(props:HamburgerMenuProps) {
|
||||
super(props);
|
||||
|
||||
this.clickEvent = this.onClickMenu.bind(this);
|
||||
this.state = { open: false };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.menu.addEventListener('click', this.clickEvent);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.menu.removeEventListener('click', this.clickEvent);
|
||||
}
|
||||
|
||||
onClick(e:React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
this.setState({ open: !this.state.open });
|
||||
}
|
||||
|
||||
onClickMenu(e:MouseEvent) {
|
||||
if(e.target !== this.menu) return;
|
||||
e.preventDefault();
|
||||
this.setState({ open: !this.state.open });
|
||||
}
|
||||
|
||||
onItemClick(e:React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
|
||||
console.log('oof');
|
||||
this.setState({ open: false });
|
||||
}
|
||||
|
||||
render () {
|
||||
let { className, links } = this.props;
|
||||
let { open } = this.state;
|
||||
|
||||
return (
|
||||
<nav className={`c-hamburger ${className||""} ${open?'is-open':'is-closed'}`}>
|
||||
<button className="c-hamburger__btn" type="button" onClick={e => this.onClick(e)}>
|
||||
<div className="c-hamburger__btn-inner">
|
||||
<Image
|
||||
src={require('./../../../../assets/icons/icon-hamburger.svg')}
|
||||
className="c-hamburger__btn-icon is-open"
|
||||
/>
|
||||
|
||||
<Image
|
||||
src={require('./../../../../assets/icons/icon-close.svg')}
|
||||
className="c-hamburger__btn-icon is-close"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="c-hamburger__menu" ref={e => this.menu = e }>
|
||||
<div className="c-hamburger__menu-body">
|
||||
{ links.map((link,i) =>
|
||||
<MenuLink {...link} key={i} onClick={e => this.onItemClick(e)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
};
|
||||
71
src/public/components/layout/header/hamburger/styles.scss
Normal file
71
src/public/components/layout/header/hamburger/styles.scss
Normal file
@ -0,0 +1,71 @@
|
||||
@import './../../../../styles/global';
|
||||
|
||||
.c-hamburger {
|
||||
$self: &;
|
||||
|
||||
&__btn {
|
||||
display: inline-block;
|
||||
padding: $s-gutter--xsmall;
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-icon{
|
||||
transition: all $s-animation--time-fast $s-animation--ease-out;
|
||||
z-index: $s-z--menu + 1;
|
||||
|
||||
&.is-close {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
heigth: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{$self}.is-open & {
|
||||
&-icon {
|
||||
opacity: 0;
|
||||
&.is-close { opacity: 1; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transform: translateX(-100%);
|
||||
transition: all $s-animation--time-fast $s-animation--ease-out;
|
||||
z-index: $s-z--menu;
|
||||
|
||||
&-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
max-width: 300px;
|
||||
padding-top: $s-gutter--large;
|
||||
}
|
||||
|
||||
#{$self}.is-open & {
|
||||
transform: translateX(0);
|
||||
&-body {
|
||||
box-shadow: 0px 0px 2em rgba(0,0,0,0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
padding: $s-gutter--small $s-gutter--small;
|
||||
border-left: 0.4em solid transparent;
|
||||
color: black;
|
||||
|
||||
&.is-active { border-color: $s-color--primary; }
|
||||
}
|
||||
}
|
||||
@ -22,62 +22,62 @@
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import * as React from 'react';
|
||||
import { Link, Image } from '@yourwishes/app-simple-react/dist/public';
|
||||
import { Logo } from './../../../objects/logo/';
|
||||
import { HamburgerMenu } from './hamburger/';
|
||||
import { HeaderNav } from './nav/';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
//Social Icon
|
||||
export interface HeaderSocialIconProps {
|
||||
to:string,
|
||||
className?:string,
|
||||
icon:string,
|
||||
title:string
|
||||
};
|
||||
export const HeaderSocialIcon = (props:HeaderSocialIconProps) => (
|
||||
<Link to={props.to} className={`c-header__social-icon ${props.className||""} is-${props.icon}`}>
|
||||
<Image src={ require('./../../../assets/icons/icon-'+props.icon+'.svg') } className="c-header__social-icon-image" />
|
||||
<span className="c-header__social-icon-label">
|
||||
{ props.title }
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
export const Links = [
|
||||
{ title: 'Home', exact: true, to: '/' },
|
||||
{ title: 'About', exact: true, to: '/about' },
|
||||
{ title: 'Blog', exact: true, to: '/blog' },
|
||||
{ title: 'Contact', to: '/contact' }
|
||||
];
|
||||
|
||||
|
||||
//Header
|
||||
export interface HeaderProps extends React.HTMLAttributes<HTMLElement> { }
|
||||
export interface HeaderState { now:Date }
|
||||
export interface HeaderState {
|
||||
now:Date
|
||||
}
|
||||
|
||||
export class Header extends React.Component<HeaderProps, HeaderState> {
|
||||
interval:NodeJS.Timeout;
|
||||
time:NodeJS.Timeout;
|
||||
|
||||
constructor(props:HeaderProps) {
|
||||
super(props);
|
||||
this.state = { now: new Date() }
|
||||
|
||||
this.state = {
|
||||
now: new Date()
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.interval = setInterval(() => this.setState({ now: new Date() }), 1000);
|
||||
this.time = setInterval(() => {
|
||||
this.setState({ now: new Date() });
|
||||
}, 500);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if(this.interval) clearInterval(this.interval);
|
||||
if(this.time) clearInterval(this.time);
|
||||
}
|
||||
|
||||
render() {
|
||||
let { className } = this.props;
|
||||
let { now } = this.state;
|
||||
|
||||
let pz = (n:number) => (`${n}`).padStart(2,'0');
|
||||
|
||||
return (
|
||||
<header {...this.props} className={`c-header ${className||""}`}>
|
||||
<time dateTime={now.toString()} className="c-header__time">
|
||||
{ now.getHours() }<span className="c-header__time-colon">:</span>{ `${now.getMinutes()}`.padStart(2, '0') }
|
||||
</time>
|
||||
|
||||
<HamburgerMenu className="c-header__hamburger" links={Links} />
|
||||
<Logo className="c-header__logo" />
|
||||
<HeaderNav className="c-header__nav" links={Links} />
|
||||
|
||||
<div className="c-header__social">
|
||||
<HeaderSocialIcon to="//github.com/YourWishes" icon="github" title="GitHub" />
|
||||
</div>
|
||||
<span className="c-header__time">
|
||||
{pz(now.getHours())}<span className="c-header__time-colon">:</span>{pz(now.getMinutes())}
|
||||
</span>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
61
src/public/components/layout/header/nav/index.tsx
Normal file
61
src/public/components/layout/header/nav/index.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
// Copyright (c) 2019 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.
|
||||
|
||||
import * as React from 'react';
|
||||
import { Link } from '@yourwishes/app-simple-react/dist/public';
|
||||
import './styles.scss';
|
||||
|
||||
export interface HeaderNavLinkProps {
|
||||
to:string,
|
||||
title:string,
|
||||
exact?:boolean
|
||||
}
|
||||
|
||||
export const HeaderNavLink = (props:HeaderNavLinkProps) => {
|
||||
|
||||
return (
|
||||
<Link
|
||||
className="c-header-nav__link" to={props.to} title={props.title}
|
||||
activeClassName="is-active" exact={props.exact}
|
||||
>
|
||||
<span className="c-header-nav__link-inner">
|
||||
{ props.title }
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export interface HeaderNavProps {
|
||||
className?:string,
|
||||
links:HeaderNavLinkProps[]
|
||||
};
|
||||
|
||||
export const HeaderNav = (props:HeaderNavProps) => {
|
||||
let { className, links } = props;
|
||||
|
||||
return <nav className={`c-header-nav ${className||""}`}>
|
||||
{ links.map((link,i) =>
|
||||
<HeaderNavLink {...link} key={i} />
|
||||
)}
|
||||
</nav>
|
||||
};
|
||||
55
src/public/components/layout/header/nav/styles.scss
Normal file
55
src/public/components/layout/header/nav/styles.scss
Normal file
@ -0,0 +1,55 @@
|
||||
@import './../../../../styles/global';
|
||||
|
||||
.c-header-nav {
|
||||
$self: &;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 75px;
|
||||
|
||||
&__link {
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
border: 0.2em solid transparent;
|
||||
|
||||
|
||||
&,&-inner {
|
||||
transition: all $s-animation--time-fast $s-animation--ease-out;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
font-family: $s-font--family-heading;
|
||||
}
|
||||
|
||||
&:hover #{$self}__link-inner {
|
||||
transform: translateX(5%);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-right-color: $s-color--primary;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
|
||||
}
|
||||
|
||||
@include t-media-query($s-small-up) {
|
||||
width: 100px;
|
||||
&__link-inner { font-size: $s-font--size-4; }
|
||||
}
|
||||
|
||||
@include t-media-query($s-large-up) {
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
@ -6,98 +6,52 @@
|
||||
100% { opacity: 1;}
|
||||
}
|
||||
|
||||
$c-header--spacing: $s-gutter--small;
|
||||
|
||||
.c-header {
|
||||
padding: $c-header--spacing;
|
||||
z-index: $s-z--header;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: $s-gutter--small $s-gutter--xsmall;
|
||||
|
||||
&__hamburger,
|
||||
&__time {
|
||||
font-size: 0.75em;
|
||||
position: absolute;
|
||||
|
||||
&-colon { animation: 2s c-header--time-tick infinite step-end; }
|
||||
flex-basis: (100% - 55%) / 2;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
flex-basis: 55%;
|
||||
|
||||
img {
|
||||
width: 60%;
|
||||
max-width: 250px;
|
||||
display: block;
|
||||
max-width: 175px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: $s-gutter--xsmall;
|
||||
|
||||
&-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0.5em;
|
||||
|
||||
&-image {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0.25em;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
&__time {
|
||||
text-align: right;
|
||||
padding: $s-gutter--xsmall;
|
||||
&-colon { animation: 2s c-header--time-tick infinite step-end; }
|
||||
}
|
||||
|
||||
&-label {
|
||||
display: none;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
transition: all $s-animation--time-medium $s-animation--ease-out;
|
||||
}
|
||||
&__nav { display: none; }
|
||||
|
||||
&:hover > .c-header__social-icon-label {
|
||||
max-width: 100px;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Social Specific Styles */
|
||||
&.is-github #{&}-image { background: $s-social--github-background; }
|
||||
}
|
||||
}
|
||||
|
||||
@include t-media-query($s-xsmall-up) {
|
||||
padding: 0;
|
||||
&__logo { display: none; }
|
||||
flex-direction: column;
|
||||
background: $s-color--background-footer;
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&__hamburger,
|
||||
&__time {
|
||||
font-size: 1em;
|
||||
top: $c-header--spacing;
|
||||
left: $c-header--spacing;
|
||||
flex-basis: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__social {
|
||||
position: absolute;
|
||||
top: $c-header--spacing;
|
||||
right: $c-header--spacing;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
|
||||
&-icon {
|
||||
padding: 0.5em 0;
|
||||
margin: 0;
|
||||
padding-right: $s-gutter--small;
|
||||
|
||||
&:first-child { padding-top: 0; }
|
||||
&:last-child { padding-bottom: 0; }
|
||||
|
||||
&-image { width: 2.5em; height: 2.5em; }
|
||||
&-label { display: inline-block; }
|
||||
}
|
||||
}
|
||||
&__logo { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ export interface LayoutProps {
|
||||
history:History
|
||||
};
|
||||
|
||||
class LayoutComponent extends React.Component<LayoutProps> {
|
||||
export class LayoutComponent extends React.Component<LayoutProps> {
|
||||
view:HTMLDivElement;
|
||||
|
||||
constructor(props:LayoutProps) {
|
||||
@ -61,6 +61,9 @@ class LayoutComponent extends React.Component<LayoutProps> {
|
||||
<>
|
||||
<StarBackground />
|
||||
<div className="c-layout">
|
||||
|
||||
{/* Header and Layout Wrapper */}
|
||||
<div className="c-layout__inner">
|
||||
<Header className="c-layout__header" />
|
||||
|
||||
<div className="c-layout__view" ref={e => this.view = e}>
|
||||
@ -78,11 +81,11 @@ class LayoutComponent extends React.Component<LayoutProps> {
|
||||
|
||||
<Page exact path="/blog" name="blog" />
|
||||
<Page exact path="/blog/article/:handle" name="article" />
|
||||
|
||||
<Page path="/" name="404" />
|
||||
</AnimatedSwitch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer className="c-layout__footer" />
|
||||
</div>
|
||||
</>
|
||||
@ -90,4 +93,3 @@ class LayoutComponent extends React.Component<LayoutProps> {
|
||||
)
|
||||
}
|
||||
}
|
||||
export const Layout = LayoutComponent;
|
||||
|
||||
@ -16,18 +16,27 @@ $c-layout--menu-width: 275px;
|
||||
@include t-media-query($s-xsmall-up) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__view {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
//position: relative;
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
//overflow: hidden;
|
||||
}
|
||||
|
||||
&__header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&__footer { }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
&-enter,&-exit {
|
||||
transition: 1s $s-animation--ease-in-out;
|
||||
|
||||
//&-active .c-page__effect { overflow-y: visible; }
|
||||
&-active .c-page__effect { overflow-y: visible; }
|
||||
}
|
||||
|
||||
&-enter {
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-exit {
|
||||
/*&-exit {
|
||||
position: absolute;
|
||||
transform: translateY(0%);
|
||||
top: 0;
|
||||
@ -39,6 +39,6 @@
|
||||
transform: translateY(-100vh);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,16 +51,7 @@ export class HomePage extends React.Component<any> {
|
||||
|
||||
render() {
|
||||
return <PageWrapper title={null}>
|
||||
<div className="p-home__feature">
|
||||
<HomePageBanner />
|
||||
</div>
|
||||
|
||||
<nav className="p-home__nav">
|
||||
<NavBox to="/about" src={require('./../../assets/navigation/about-me.svg')} alt="About Me" />
|
||||
<NavBox to="/blog" src={require('./../../assets/navigation/blog.svg')} alt="Blog" />
|
||||
{/*<NavBox to="/projects" src={require('./../../assets/navigation/about.jpg')} alt="Projects" />*/}
|
||||
<NavBox to="/contact" src={require('./../../assets/navigation/contact.svg')} alt="Contact Me" />
|
||||
</nav>
|
||||
</PageWrapper>;
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,3 +2,4 @@ $s-z--background: 0;
|
||||
$s-z--layout: 1;
|
||||
$s-z--header: 10;
|
||||
$s-z--page-transition-blocking: 100;
|
||||
$s-z--menu: 20;
|
||||
|
||||
97
yarn.lock
97
yarn.lock
@ -658,7 +658,7 @@
|
||||
"@babel/plugin-transform-react-jsx-self" "^7.0.0"
|
||||
"@babel/plugin-transform-react-jsx-source" "^7.0.0"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.3":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.3":
|
||||
version "7.4.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
|
||||
integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
|
||||
@ -926,9 +926,9 @@
|
||||
"@types/range-parser" "*"
|
||||
|
||||
"@types/express@^4.16.0":
|
||||
version "4.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.16.1.tgz#d756bd1a85c34d87eaf44c888bad27ba8a4b7cf0"
|
||||
integrity sha512-V0clmJow23WeyblmACoxbHBu2JKlE5TiIme6Lem14FnPW9gsttyHtk6wq7njcdIWH1njAaFgR8gW09lgY98gQg==
|
||||
version "4.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.0.tgz#49eaedb209582a86f12ed9b725160f12d04ef287"
|
||||
integrity sha512-CjaMu57cjgjuZbh9DpkloeGxV45CnMGlVd+XpG7Gm9QgVrd7KFq+X4HY0vM+2v0bczS48Wg7bvnMY5TN+Xmcfw==
|
||||
dependencies:
|
||||
"@types/body-parser" "*"
|
||||
"@types/express-serve-static-core" "*"
|
||||
@ -1014,9 +1014,9 @@
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/node@*", "@types/node@^12.0.4":
|
||||
version "12.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
|
||||
integrity sha512-j8YL2C0fXq7IONwl/Ud5Kt0PeXw22zGERt+HSSnwbKOJVsAGkEz3sFCYwaF9IOuoG1HOtE0vKCj6sXF7Q0+Vaw==
|
||||
version "12.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.5.tgz#ac14404c33d1a789973c45379a67f7f7e58a01b9"
|
||||
integrity sha512-CFLSALoE+93+Hcb5pFjp0J1uMrrbLRe+L1+gFwerJ776R3TACSF0kTVRQ7AvRa7aFx70nqYHAc7wQPlt9kY2Mg==
|
||||
|
||||
"@types/nodemailer@^6.2.0":
|
||||
version "6.2.0"
|
||||
@ -1381,9 +1381,9 @@
|
||||
webpack-hot-middleware "^2.25.0"
|
||||
|
||||
"@yourwishes/app-server@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@yourwishes/app-server/-/app-server-2.1.0.tgz#078a5b70e7920a9bda5d954a7629ef917ae42f57"
|
||||
integrity sha512-6eMquPaF/XbTyt5MqV4XamwlOX1+DF0Q3so+0QqIEYIbXX/JlKiDUvbTIKnPDn3nkXSLbJv9d5bwtkJuR/bK8g==
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@yourwishes/app-server/-/app-server-2.1.1.tgz#fe6946dec4c6c291558c6de3ff90232ee86a59e7"
|
||||
integrity sha512-jeuFaT4hVav89ALoAc2FM5Fy5Ilmhfs3GEypmsqGy7GeyStOEpKxSk0KMuUlOmY/I3P5wBku1J5tXMrQ5dkjig==
|
||||
dependencies:
|
||||
"@types/body-parser" "^1.17.0"
|
||||
"@types/express" "^4.16.0"
|
||||
@ -2111,9 +2111,9 @@ caniuse-api@^3.0.0:
|
||||
lodash.uniq "^4.5.0"
|
||||
|
||||
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000971:
|
||||
version "1.0.30000971"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000971.tgz#d1000e4546486a6977756547352bc96a4cfd2b13"
|
||||
integrity sha512-TQFYFhRS0O5rdsmSbF1Wn+16latXYsQJat66f7S7lizXW1PVpWJeZw9wqqVLIjuxDRz7s7xRUj13QCfd8hKn6g==
|
||||
version "1.0.30000974"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz#b7afe14ee004e97ce6dc73e3f878290a12928ad8"
|
||||
integrity sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==
|
||||
|
||||
capture-exit@^2.0.0:
|
||||
version "2.0.0"
|
||||
@ -2294,9 +2294,9 @@ color-string@^1.5.2:
|
||||
simple-swizzle "^0.2.2"
|
||||
|
||||
color@^3.0.0, color@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.1.1.tgz#7abf5c0d38e89378284e873c207ae2172dcc8a61"
|
||||
integrity sha512-PvUltIXRjehRKPSy89VnDWFKY58xyhTLyxIg21vwQBI6qLwZNPmC8k3C1uytIgFKEpOIzN4y32iPm8231zFHIg==
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
|
||||
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
|
||||
dependencies:
|
||||
color-convert "^1.9.1"
|
||||
color-string "^1.5.2"
|
||||
@ -3006,9 +3006,9 @@ ee-first@1.1.1:
|
||||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.137:
|
||||
version "1.3.143"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.143.tgz#8b2a631ab75157aa53d0c2933275643b99ef580b"
|
||||
integrity sha512-J9jOpxIljQZlV6GIP2fwAWq0T69syawU0sH3EW3O2Bgxquiy+veeIT5mBDRz+i3oHUSL1tvVgRKH3/4QiQh9Pg==
|
||||
version "1.3.148"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.148.tgz#5796c0d9eb0358d397163413b90bf376c5d8bf08"
|
||||
integrity sha512-nuCOlXNlGMQmdzihIPGm2K3Yf3H1hke/1rK381i02pH8wNliJU9hVNnOi/xjmxt+mjABd/BzufP5nPHWKshLWA==
|
||||
|
||||
elliptic@^6.0.0:
|
||||
version "6.4.1"
|
||||
@ -5246,6 +5246,15 @@ min-document@^2.19.0:
|
||||
dependencies:
|
||||
dom-walk "^0.1.0"
|
||||
|
||||
mini-create-react-context@^0.3.0:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
|
||||
integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.0"
|
||||
gud "^1.0.0"
|
||||
tiny-warning "^1.0.2"
|
||||
|
||||
mini-css-extract-plugin@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0"
|
||||
@ -5545,9 +5554,9 @@ node-pre-gyp@^0.12.0:
|
||||
tar "^4"
|
||||
|
||||
node-releases@^1.1.21:
|
||||
version "1.1.22"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.22.tgz#d90cd5adc59ab9b0f377d4f532b09656399c88bf"
|
||||
integrity sha512-O6XpteBuntW1j86mw6LlovBIwTe+sO2+7vi9avQffNeIW4upgnaCVm6xrBWH+KATz7mNNRNNeEpuWB7dT6Cr3w==
|
||||
version "1.1.23"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.23.tgz#de7409f72de044a2fa59c097f436ba89c39997f0"
|
||||
integrity sha512-uq1iL79YjfYC0WXoHbC/z28q/9pOl8kSHaXdWmAAc8No+bDwqkZbzIJz55g/MUsPgSGm9LZ7QSUbzTcH5tz47w==
|
||||
dependencies:
|
||||
semver "^5.3.0"
|
||||
|
||||
@ -6389,9 +6398,9 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
|
||||
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
|
||||
|
||||
postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
|
||||
version "7.0.16"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2"
|
||||
integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==
|
||||
version "7.0.17"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
|
||||
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
source-map "^0.6.1"
|
||||
@ -6707,7 +6716,7 @@ react-router-dom@5.0.0:
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@5.0.0, react-router@^5.0.0:
|
||||
react-router@5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.0.tgz#349863f769ffc2fa10ee7331a4296e86bc12879d"
|
||||
integrity sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==
|
||||
@ -6723,6 +6732,22 @@ react-router@5.0.0, react-router@^5.0.0:
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@^5.0.0:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.0.1.tgz#04ee77df1d1ab6cb8939f9f01ad5702dbadb8b0f"
|
||||
integrity sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
history "^4.9.0"
|
||||
hoist-non-react-statics "^3.1.0"
|
||||
loose-envify "^1.3.1"
|
||||
mini-create-react-context "^0.3.0"
|
||||
path-to-regexp "^1.7.0"
|
||||
prop-types "^15.6.2"
|
||||
react-is "^16.6.0"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-side-effect@^1.1.0:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
|
||||
@ -7052,9 +7077,9 @@ resolve@1.1.7:
|
||||
integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
|
||||
|
||||
resolve@^1.10.0, resolve@^1.3.2:
|
||||
version "1.11.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
|
||||
integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
|
||||
version "1.11.1"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
|
||||
integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
|
||||
dependencies:
|
||||
path-parse "^1.0.6"
|
||||
|
||||
@ -7799,9 +7824,9 @@ tar@^2.0.0:
|
||||
inherits "2"
|
||||
|
||||
tar@^4, tar@^4.4.8:
|
||||
version "4.4.9"
|
||||
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.9.tgz#058fbb152f6fc45733e84585a40c39e59302e1b3"
|
||||
integrity sha512-xisFa7Q2i3HOgfn+nmnWLGHD6Tm23hxjkx6wwGmgxkJFr6wxwXnJOdJYcZjL453PSdF0+bemO03+flAzkIdLBQ==
|
||||
version "4.4.10"
|
||||
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.10.tgz#946b2810b9a5e0b26140cf78bea6b0b0d689eba1"
|
||||
integrity sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==
|
||||
dependencies:
|
||||
chownr "^1.1.1"
|
||||
fs-minipass "^1.2.5"
|
||||
@ -7884,7 +7909,7 @@ tiny-invariant@^1.0.2:
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.4.tgz#346b5415fd93cb696b0c4e8a96697ff590f92463"
|
||||
integrity sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g==
|
||||
|
||||
tiny-warning@^1.0.0:
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
|
||||
integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
|
||||
@ -8354,9 +8379,9 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
|
||||
source-map "~0.6.1"
|
||||
|
||||
webpack@^4.32.2:
|
||||
version "4.32.2"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.32.2.tgz#3639375364a617e84b914ddb2c770aed511e5bc8"
|
||||
integrity sha512-F+H2Aa1TprTQrpodRAWUMJn7A8MgDx82yQiNvYMaj3d1nv3HetKU0oqEulL9huj8enirKi8KvEXQ3QtuHF89Zg==
|
||||
version "4.33.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.33.0.tgz#c30fc4307db432e5c5e3333aaa7c16a15a3b277e"
|
||||
integrity sha512-ggWMb0B2QUuYso6FPZKUohOgfm+Z0sVFs8WwWuSH1IAvkWs428VDNmOlAxvHGTB9Dm/qOB/qtE5cRx5y01clxw==
|
||||
dependencies:
|
||||
"@webassemblyjs/ast" "1.8.5"
|
||||
"@webassemblyjs/helper-module-context" "1.8.5"
|
||||
|
||||
Reference in New Issue
Block a user