Permalink
Browse files

layout shit

  • Loading branch information...
pymapa committed Dec 7, 2017
1 parent b4ddfc1 commit bf74aff028d1690f2fbd1f3820eb4b7391c33489
View
@@ -10,31 +10,15 @@
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Bar Foo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://use.fontawesome.com/209c7a8368.js"></script>
</body>
</html>
View
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Bar Foo",
"name": "Bar Foo",
"icons": [
{
"src": "favicon.ico",
@@ -1,12 +1,32 @@
@value vars: "../../shared/variables.css";
@value dark, semidark, semilight, light from vars;
.wrapper {
padding: 2em;
margin: 0;
color: light;
height: 100%;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
background-color: dark;
}
.menuIcon {
.left {
display: flex;
justify-content: center;
align-items: center;
}
.right {
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
grid-column: 3/4;
}
.wrapper a {
color: light;
}
.wrapper a:hover {
color: semilight;
}
@@ -1,12 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Footer.css';
export const Footer = () => {
export const Footer = (props) => {
return (
<div className={styles.wrapper}>
<div>1</div>
<div className={styles.menuIcon}>2</div>
<h1>Footer</h1>
<div className={styles.left}>1</div>
<div className={styles.center}></div>
<div className={styles.right}>
<a href="#"><i
className="fa fa-bars"
onMouseEnter={props.showMenu}
onMouseLeave={props.hideMenu}
aria-hidden="true"></i></a>
</div>
</div>
);
};
Footer.propTypes = {
showMenu: PropTypes.func.isRequired,
hideMenu: PropTypes.func.isRequired
};
@@ -1,26 +1,30 @@
@value vars: "../../shared/variables.css";
@value dark, semidark, semilight, light from vars;
.bar {
.wrapper {
color: light;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
background-color: light;
padding: 2em;
background-color: semidark;
height: 100%;
}
.left {
display: flex;
justify-content: center;
align-items: center;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.right {
display: flex;
justify-content: center;
align-items: center;
}
.line {
@@ -5,16 +5,15 @@ import PropTypes from 'prop-types';
export const Header = (props) => {
let content = '';
if (props.user.signed) {
content = <h1>{props.user.name}</h1>;
content = <p>{props.user.name}</p>;
}
return (
<div className={styles.bar}>
<div className={styles.wrapper}>
<div className={styles.left}>1</div>
<div className={styles.center}>2</div>
<div className={styles.center}>{content}</div>
<div className={styles.right}>3</div>
<div className={styles.line}><hr/></div>
{/* {content} */}
{/* <div className={styles.line}><hr/></div> */}
</div>
);
};
@@ -1,8 +1,9 @@
.parent {
.wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
grid-row: 1/3;
}
.header {
@@ -5,7 +5,7 @@ import styles from './Home.css';
export const Home = (props) => {
return (
<div className={styles.parent}>
<div className={styles.wrapper}>
<h1 className={fonts.mainHeading}>Home!</h1>
<h3>Hi there {props.user.name}! Nice to meet you. Would you like something?</h3>
</div>
@@ -0,0 +1,24 @@
@value vars: "../../shared/variables.css";
@value dark, semidark, semilight, light from vars;
.wrapper {
color: dark;
font-size: 120%;
display: grid;
grid-template-columns: 3fr 1fr;
grid-row: 1/4;
}
.menuContainer {
grid-column: 2/3;
display: grid;
flex-direction: column;
background: transparent;
background-color: light;
}
.menuItem {
display: flex;
justify-content: center;
align-items: center;
}
@@ -0,0 +1,15 @@
import React from 'react';
import styles from './Menu.css';
export const Menu = (props) => {
return (
<div className={styles.wrapper}>
<div className={styles.menuContainer}>
<div className={styles.menuItem}>
<p>Menuitem</p>
</div>
</div>
</div>
);
};
View
@@ -7,14 +7,14 @@ import { signIn } from '../actions/userActions';
import HeaderContainer from './HeaderContainer';
import FooterContainer from './FooterContainer';
import MenuContainer from './MenuContainer';
import HomeContainer from './HomeContainer';
import AboutContainer from './AboutPage';
class App extends Component {
componentWillMount() {
let user = JSON.parse(sessionStorage.getItem('user'));
console.log(user);
if (user) {
this.props.signIn(user);
}
@@ -27,10 +27,12 @@ class App extends Component {
<HeaderContainer />
</div>
<div className={styles.contentWrapper}>
<div></div>
<Switch>
<Route exact path="/" component={HomeContainer} />
<Route exact path="/about" component={AboutContainer} />
</Switch>
<MenuContainer />
</div>
<div className={styles.footerWrapper}>
<FooterContainer />
@@ -2,11 +2,16 @@ import React, { Component } from 'react';
import {Footer} from '../components/footer/Footer';
class FooterContainer extends Component {
showMenu() {
console.log('show menu');
}
hideMenu() {
console.log('hide menu');
}
render () {
return (
<div>
<Footer />
</div>
<Footer showMenu={this.showMenu} hideMenu={this.hideMenu}/>
);
}
}
@@ -28,9 +28,7 @@ class HomeContainer extends Component {
}
componentDidMount() {
console.log(this.props.user);
if(this.props.user.signed) {
console.log('asdf');
this.setState({user: this.props.user});
this.setState({loginState: STATE_HOME});
}
@@ -0,0 +1,13 @@
import React, { Component } from 'react';
import {Menu} from '../components/menu/Menu';
class MenuContainer extends Component {
render () {
return (
<Menu />
);
}
}
export default MenuContainer;
View
@@ -2,35 +2,35 @@
@value dark, semidark, semilight, light from vars;
* {
box-sizing: border-box
/* box-sizing: border-box */
}
body {
font-family: 'Montserrat', sans-serif;
background-color: light;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid semidark;
border-top: 1px solid dark;
margin: 1em 0;
padding: 0;
}
.mainWrapper {
/* height: 100vh; */
display: grid;
grid-template-rows: 1fr 6fr 1fr;
grid-template-rows: 10vh 80vh 10vh;
}
.headerWrapper {
/* padding: 0; */
/* height: 10vh; */
}
.contentWrapper {
display: flex;
justify-content: center;
align-items: center;
display: grid;
grid-template-rows: 1fr 5fr 1fr;
}
.footerWrapper {
/* height: 10vh; */
}
View
@@ -1,3 +1,6 @@
@value vars: "./variables.css";
@value dark, semidark, semilight, light from vars;
.mainHeading {
composes: wave from "./variables.css";
color: semilight;
}

0 comments on commit bf74aff

Please sign in to comment.