From 79879299ce4a341043ecb1ce9839dcab10a21d1e Mon Sep 17 00:00:00 2001 From: Markus Nylund <L5392@student.jamk.fi> Date: Thu, 28 Mar 2019 12:38:54 +0200 Subject: [PATCH 1/2] start menu --- wearright/src/App.js | 10 ++++-- wearright/src/components/Menu.js | 56 ++++++++++++++++++++++++++++++++ wearright/src/styles/Menu.css | 46 ++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 wearright/src/components/Menu.js create mode 100644 wearright/src/styles/Menu.css diff --git a/wearright/src/App.js b/wearright/src/App.js index af74d87..b14aa91 100644 --- a/wearright/src/App.js +++ b/wearright/src/App.js @@ -4,16 +4,20 @@ import Start from "../src/components/Start.js" import Profile from "../src/components/Profile.js" import Cookies from 'universal-cookie'; import MainPage from "../src/components/MainPage.js" +import Menu from "../src/components/Menu.js" class App extends Component { render() { - const cookies = new Cookies(); + return ( + <Menu /> + ); + //const cookies = new Cookies(); //const c = cookies.get('firstPage') //console.log("main "+ c) //if cookie exists, load main view - if(cookies.get('firstPage') === "true"){ + /* if(cookies.get('firstPage') === "true"){ return ( <div className="App"> <MainPage /> @@ -27,7 +31,7 @@ class App extends Component { <Start /> </div> ); - } + } */ } } diff --git a/wearright/src/components/Menu.js b/wearright/src/components/Menu.js new file mode 100644 index 0000000..1ff2b8e --- /dev/null +++ b/wearright/src/components/Menu.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import {FaStar, FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa'; +import "../styles/Menu.css" + +class Menu extends Component +{ + constructor(props) { + super(props); + this.state = { + currentWeather : [], + isLoaded: true, + error: null, + clothes: [], + location: [] + + } + } + + render() + { + const {isLoaded} = this.state + if(isLoaded) + { + return( + //HTML here + <div className={"content"}> + <div className={"header"}> + <div className={"menu"}> + + <button><FaBars className={"icons"} /></button> + + <div className={"filling"}/> + + <div className={"menubuttons"}> + <button class="button">Koti</button> + <button class="button">Suunnittele matka</button> + <button class="button">Profiilit</button> + <button class="button">Suosikit</button> + </div> + </div> + <div className={"sidebackground"}> + + </div> + + </div> + </div> + ) + } + else + { + return; + } + + } +} +export default Menu; \ No newline at end of file diff --git a/wearright/src/styles/Menu.css b/wearright/src/styles/Menu.css new file mode 100644 index 0000000..5438df7 --- /dev/null +++ b/wearright/src/styles/Menu.css @@ -0,0 +1,46 @@ +.icons +{ + transform: rotate(90deg); +} + +.content +{ + display: flex; + flex-direction: row; +} + +.menu +{ + width: 20%; + min-width: 100px; +} + +.filling +{ + height: 20%; +} + +.button +{ + background-color: #07c4ea; + cursor: pointer; + border: 1px solid #0aabcc; + padding: 5%; + margin: 5%; +} + +.menubuttons +{ + display: flex; + flex-direction: column; + width: 100%; +} + +/* +.sidebackground +{ + width: 100%; + height: 100%; + background-color: grey; +} +*/ \ No newline at end of file -- GitLab From 126eae76883a89bfa19ce90b5bccd7683d8b9050 Mon Sep 17 00:00:00 2001 From: AP <aripekka.kauppinen@gmail.com> Date: Thu, 4 Apr 2019 10:51:18 +0300 Subject: [PATCH 2/2] Progress --- wearright/src/components/MainPage.js | 6 ++- wearright/src/components/Menu.js | 70 +++++++++++++--------------- wearright/src/styles/Menu.css | 41 ++++++++-------- 3 files changed, 59 insertions(+), 58 deletions(-) diff --git a/wearright/src/components/MainPage.js b/wearright/src/components/MainPage.js index f47a112..3f16eda 100644 --- a/wearright/src/components/MainPage.js +++ b/wearright/src/components/MainPage.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import "../styles/MainPage.css" import {FaStar, FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa'; import Cookies from 'universal-cookie'; +import Menu from '../components/Menu.js'; class MainPage extends Component { constructor(props) { @@ -83,6 +84,9 @@ class MainPage extends Component { //console.log(this.state.clothes[2]) } + menuButtonPress() { + + } render() { const {currentWeather, isLoaded, clothes, location} = this.state @@ -94,7 +98,7 @@ class MainPage extends Component { <div className={"menu"}> {/* menubutton here! from component */} {/* Test menu button */} - + <Menu /> <button><FaBars className={"icons"} /></button> </div> <h1>Wear Right</h1> diff --git a/wearright/src/components/Menu.js b/wearright/src/components/Menu.js index 1ff2b8e..d1808f4 100644 --- a/wearright/src/components/Menu.js +++ b/wearright/src/components/Menu.js @@ -7,50 +7,46 @@ class Menu extends Component constructor(props) { super(props); this.state = { - currentWeather : [], - isLoaded: true, - error: null, - clothes: [], - location: [] - + toggle: true } - } - render() - { - const {isLoaded} = this.state - if(isLoaded) - { - return( - //HTML here - <div className={"content"}> - <div className={"header"}> - <div className={"menu"}> - - <button><FaBars className={"icons"} /></button> - - <div className={"filling"}/> + this.handleClick = this.handleClick.bind(this); + } - <div className={"menubuttons"}> - <button class="button">Koti</button> - <button class="button">Suunnittele matka</button> - <button class="button">Profiilit</button> - <button class="button">Suosikit</button> - </div> - </div> - <div className={"sidebackground"}> + handleClick(){ + this.setState({toggle: !this.state.toggle}) + } - </div> + render() + { + const {toggle} = this.state + const show = { + display: "block", + } + const hide = { + display: "none", + } + return( + <div className={"content"}> + <div className="left"> + <div> + <button onClick={this.handleClick} className="menu"><FaBars className={"icons"} /></button> + <div className={"menubuttons"} > + <div style={toggle? show : hide} > + <button id={"home"} className="button">Koti</button> + <button id={"travel"} className="button">Suunnittele matka</button> + <button id={"profile"} className="button">Profiilit</button> + <button id={"favourite"} className="button">Suosikit</button> + </div> + </div> </div> + </div> + <div style={toggle ? show : hide} onClick={this.handleClick} className={"right"}> + </div> - ) - } - else - { - return; - } - + </div> + ) } } export default Menu; \ No newline at end of file diff --git a/wearright/src/styles/Menu.css b/wearright/src/styles/Menu.css index 5438df7..26a6612 100644 --- a/wearright/src/styles/Menu.css +++ b/wearright/src/styles/Menu.css @@ -1,7 +1,3 @@ -.icons -{ - transform: rotate(90deg); -} .content { @@ -9,17 +5,6 @@ flex-direction: row; } -.menu -{ - width: 20%; - min-width: 100px; -} - -.filling -{ - height: 20%; -} - .button { background-color: #07c4ea; @@ -27,6 +12,7 @@ border: 1px solid #0aabcc; padding: 5%; margin: 5%; + width: 80%; } .menubuttons @@ -36,11 +22,26 @@ width: 100%; } -/* -.sidebackground +.icons { - width: 100%; - height: 100%; + transform: rotate(90deg); +} + +.menu{ + width: 45px; +} +.right{ + position: absolute; + width: 60vw; + height: 100vh; + right: 0; + opacity: 0.5; background-color: grey; } -*/ \ No newline at end of file +.left{ + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 40vw; +} \ No newline at end of file -- GitLab