);
}
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 (
+
+ );
+ }
+}
+
+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 (
-
+
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 (
-
+
);
}
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 (