From 5528ffb0ce5c47c98203d3824eddaa3022554a51 Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Thu, 3 May 2018 11:46:18 -0700 Subject: [PATCH 1/6] Hamburger button toggles menu_visible boolean --- src/App.js | 19 ++++++++++++++++++- src/Header.js | 2 +- src/Menu.css | 0 src/Menu.js | 25 +++++++++++++++++++++++++ src/MenuItem.css | 0 src/MenuItem.js | 14 ++++++++++++++ 6 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 src/Menu.css create mode 100644 src/Menu.js create mode 100644 src/MenuItem.css create mode 100644 src/MenuItem.js diff --git a/src/App.js b/src/App.js index e641d31..4b00407 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,29 @@ import React, { Component } from 'react'; import './App.css'; import Header from './Header'; +import Menu from './Menu'; class App extends Component { + constructor(props) { + super(props); + this.state = { + menu_visible: false, + }; + } + + handleHamburgerClick() { + const visible = this.state.menu_visible; + this.setState({ + menu_visible: !visible, + }); + console.log(this.state.menu_visible); + } + render() { return (
-
+
this.handleHamburgerClick()} /> +
); } diff --git a/src/Header.js b/src/Header.js index 21badd2..c3c0f03 100644 --- a/src/Header.js +++ b/src/Header.js @@ -6,7 +6,7 @@ class Header extends Component { render() { return (
- + this.props.onClick()}>
); diff --git a/src/Menu.css b/src/Menu.css new file mode 100644 index 0000000..e69de29 diff --git a/src/Menu.js b/src/Menu.js new file mode 100644 index 0000000..b7d3047 --- /dev/null +++ b/src/Menu.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; +import './Menu.css'; +import MenuItem from './MenuItem'; + +class Menu extends Component { + render() { + return ( +
+ Categories +
+ + + + + +
+
+ Ads +
+
+ ); + } +} + +export default Menu; diff --git a/src/MenuItem.css b/src/MenuItem.css new file mode 100644 index 0000000..e69de29 diff --git a/src/MenuItem.js b/src/MenuItem.js new file mode 100644 index 0000000..fd53ebb --- /dev/null +++ b/src/MenuItem.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; +import './MenuItem.css'; + +class MenuItem extends Component { + render() { + return ( +
+ {this.props.category} +
+ ); + } +} + +export default MenuItem; From 4fe5a4474a4aeb89a5cfe7885ba4d13ec5e39e3d Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Thu, 3 May 2018 19:55:00 -0700 Subject: [PATCH 2/6] Menu can open/close; add some styling --- src/Header.css | 10 +++++++--- src/Menu.css | 21 +++++++++++++++++++++ src/Menu.js | 22 +++++++++------------- src/MenuAds.css | 2 ++ src/MenuAds.js | 19 +++++++++++++++++++ src/MenuItem.css | 12 ++++++++++++ src/MenuItem.js | 4 ++-- src/MenuListing.css | 0 src/MenuListing.js | 22 ++++++++++++++++++++++ 9 files changed, 94 insertions(+), 18 deletions(-) create mode 100644 src/MenuAds.css create mode 100644 src/MenuAds.js create mode 100644 src/MenuListing.css create mode 100644 src/MenuListing.js diff --git a/src/Header.css b/src/Header.css index 9de97d4..9fa4b69 100644 --- a/src/Header.css +++ b/src/Header.css @@ -7,15 +7,13 @@ line-height: 54px; } -a { +.c-mobile-header-left { height: 54px; position: absolute; vertical-align: middle; background: rgba(255, 255, 255, 0.99); -} -.c-mobile-header-left { top: 0; bottom: 0; left: 0; @@ -32,6 +30,12 @@ a { } .c-mobile-header-logo { + height: 54px; + position: absolute; + vertical-align: middle; + + background: rgba(255, 255, 255, 0.99); + display: block; margin-left: auto; margin-right: auto; diff --git a/src/Menu.css b/src/Menu.css index e69de29..3c66e2e 100644 --- a/src/Menu.css +++ b/src/Menu.css @@ -0,0 +1,21 @@ +.c-mobile-menu.visible { + margin-top: 54px; + width: 33%; + height: 100%; + color: #0070c9; + position: absolute; + height: 100%; + min-height: 100%; + top: 0; + z-index: 700; + border-right: 1px solid #DADADA; +} + +.c-mobile-menu.invisible { + display: none; +} + +.c-mobile-menu__header { + margin-top: 10px; + margin-bottom: 10px; +} diff --git a/src/Menu.js b/src/Menu.js index b7d3047..d8cc98e 100644 --- a/src/Menu.js +++ b/src/Menu.js @@ -1,22 +1,18 @@ import React, { Component } from 'react'; import './Menu.css'; -import MenuItem from './MenuItem'; +import MenuListing from './MenuListing'; +import MenuAds from './MenuAds'; class Menu extends Component { render() { + const isVisible = this.props.visible ? 'visible' : 'invisible'; return ( -
- Categories -
- - - - - -
-
- Ads -
+
+
+
Categories
+ + +
); } diff --git a/src/MenuAds.css b/src/MenuAds.css new file mode 100644 index 0000000..870c399 --- /dev/null +++ b/src/MenuAds.css @@ -0,0 +1,2 @@ +.c-mobile-menuads { +} \ No newline at end of file diff --git a/src/MenuAds.js b/src/MenuAds.js new file mode 100644 index 0000000..984446b --- /dev/null +++ b/src/MenuAds.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import './MenuAds.css'; + +class MenuAds extends Component { + render() { + return ( +
+
+ Ad #1 +
+
+ Ad #2 +
+
+ ); + } +} + +export default MenuAds; diff --git a/src/MenuItem.css b/src/MenuItem.css index e69de29..f986491 100644 --- a/src/MenuItem.css +++ b/src/MenuItem.css @@ -0,0 +1,12 @@ +.c-mobile-menuitem { + margin-top: 5px; + margin-bottom: 5px; + margin-left: auto; + margin-right: auto; + padding-top: 5px; + padding-bottom: 5px; + background-color: #0070c9; + font-size: 16px; + color: white; + text-align: center; +} \ No newline at end of file diff --git a/src/MenuItem.js b/src/MenuItem.js index fd53ebb..083fe5f 100644 --- a/src/MenuItem.js +++ b/src/MenuItem.js @@ -4,8 +4,8 @@ import './MenuItem.css'; class MenuItem extends Component { render() { return ( -
- {this.props.category} +
+ {this.props.category}
); } diff --git a/src/MenuListing.css b/src/MenuListing.css new file mode 100644 index 0000000..e69de29 diff --git a/src/MenuListing.js b/src/MenuListing.js new file mode 100644 index 0000000..7f58f67 --- /dev/null +++ b/src/MenuListing.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import './MenuListing.css'; +import MenuItem from './MenuItem'; + +class MenuListing extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} + +export default MenuListing; From 77bd18bb6af9cd456a29e36ee15a113b798b8590 Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Fri, 11 May 2018 10:37:55 -0700 Subject: [PATCH 3/6] Add more styling, and fix height of hamburger menu --- src/Menu.css | 11 ++++++----- src/MenuAds.css | 7 +++++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/Menu.css b/src/Menu.css index 3c66e2e..4b1d430 100644 --- a/src/Menu.css +++ b/src/Menu.css @@ -1,11 +1,12 @@ .c-mobile-menu.visible { + background-color: white; + opacity: 0.90; margin-top: 54px; width: 33%; - height: 100%; color: #0070c9; position: absolute; - height: 100%; - min-height: 100%; + height: calc(100vh - 54px); + min-height: calc(100vh - 54px); top: 0; z-index: 700; border-right: 1px solid #DADADA; @@ -16,6 +17,6 @@ } .c-mobile-menu__header { - margin-top: 10px; - margin-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; } diff --git a/src/MenuAds.css b/src/MenuAds.css index 870c399..6d209db 100644 --- a/src/MenuAds.css +++ b/src/MenuAds.css @@ -1,2 +1,9 @@ .c-mobile-menuads { + /*height: screen height - header bar - menu header - menu items - margins - ad box borders*/ + height: calc(100vh - 54px - 38.4px - 227.2px - 45px - 4px); +} + +.c-mobile-menuads__ad { + height: 50%; + border: 1px solid #DADADA; } \ No newline at end of file From 932dfc569969bdfd3455b6e88431f683e17e06a4 Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Fri, 11 May 2018 14:48:10 -0700 Subject: [PATCH 4/6] Fix stylistic issues --- src/App.js | 8 +++----- src/MenuItem.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 4b00407..99aa3a9 100644 --- a/src/App.js +++ b/src/App.js @@ -7,23 +7,21 @@ class App extends Component { constructor(props) { super(props); this.state = { - menu_visible: false, + menuVisible: false, }; } handleHamburgerClick() { - const visible = this.state.menu_visible; this.setState({ - menu_visible: !visible, + menuVisible: !this.state.menuVisible, }); - console.log(this.state.menu_visible); } render() { return (
this.handleHamburgerClick()} /> - +
); } diff --git a/src/MenuItem.js b/src/MenuItem.js index 083fe5f..72bda30 100644 --- a/src/MenuItem.js +++ b/src/MenuItem.js @@ -5,7 +5,7 @@ class MenuItem extends Component { render() { return (
- {this.props.category} + {this.props.category}
); } From fcb76fbe953fb4df732876bbe3a0307f675891ff Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Tue, 15 May 2018 17:03:52 -0700 Subject: [PATCH 5/6] Fix stylistic issue: change to --- src/Menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Menu.js b/src/Menu.js index d8cc98e..2382912 100644 --- a/src/Menu.js +++ b/src/Menu.js @@ -9,7 +9,7 @@ class Menu extends Component { return (
-
Categories
+
Categories
From c2d4c00eee02d4ccabd52627d826f831fcd78232 Mon Sep 17 00:00:00 2001 From: Ron Y <31330116+i-ron-y@users.noreply.github.com> Date: Mon, 28 May 2018 16:44:14 -0700 Subject: [PATCH 6/6] Standardise boolean names, hamburger shows pointer hand on hover --- src/App.js | 6 +++--- src/Header.css | 3 ++- src/Header.js | 2 +- src/Menu.js | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 99aa3a9..02289e1 100644 --- a/src/App.js +++ b/src/App.js @@ -7,13 +7,13 @@ class App extends Component { constructor(props) { super(props); this.state = { - menuVisible: false, + isMenuVisible: false, }; } handleHamburgerClick() { this.setState({ - menuVisible: !this.state.menuVisible, + isMenuVisible: !this.state.isMenuVisible, }); } @@ -21,7 +21,7 @@ class App extends Component { return (
this.handleHamburgerClick()} /> - +
); } diff --git a/src/Header.css b/src/Header.css index 9fa4b69..fff8ccd 100644 --- a/src/Header.css +++ b/src/Header.css @@ -27,6 +27,7 @@ color: #303030; z-index: 600; + cursor: pointer; } .c-mobile-header-logo { @@ -46,7 +47,7 @@ z-index: 500; } -img { +.c-mobile-header-logo-image { vertical-align: middle; width: 100%; max-height: 24px; diff --git a/src/Header.js b/src/Header.js index c3c0f03..7062916 100644 --- a/src/Header.js +++ b/src/Header.js @@ -7,7 +7,7 @@ class Header extends Component { return (
this.props.onClick()}> - +
); } diff --git a/src/Menu.js b/src/Menu.js index 2382912..83fbaf2 100644 --- a/src/Menu.js +++ b/src/Menu.js @@ -5,7 +5,7 @@ import MenuAds from './MenuAds'; class Menu extends Component { render() { - const isVisible = this.props.visible ? 'visible' : 'invisible'; + const isVisible = this.props.isVisible ? 'visible' : 'invisible'; return (