Merge pull request #3 from g86/feature/pictures_page

New page: Pictures

Author: G86

public/images/architecture.jpg

@@ -3,6 +3,8 @@ import './App.css'
 import Header from './layout/Header'
 import Footer from './layout/Footer'
 import Home from './pages/Home'
+import Pictures from './pages/Pictures'
+import Picture from './pages/Picture'
 import Contact from './pages/Contact'
 import { BrowserRouter as Router, Route} from 'react-router-dom'
 // "npm install --save react-router-dom" - installs latest version of React Router
@@ -15,6 +17,8 @@ class App extends Component {
           <Header />
           <section className="app-body">
             <Route exact path="/" component={Home} />
+            <Route path="/pictures" component={Pictures} />
+            <Route path="/picture/:pictureIndex" component={Picture} />
             <Route path="/contact" component={Contact} />
           </section>
           <Footer />

public/images/night-shot.jpg

@@ -5,19 +5,21 @@ import menuItems from '../sampleData/menuItems'
 
 class Header extends Component {
   renderMenuItems(menuItems) {
-    return menuItems.map((menuItem, index) => {
-      const addProps = {
-        to: menuItem.to,
-        exact: menuItem.exact
-      }
-      return (
-        <li key={index}>
-          <NavLink className="menu-item"
-                   activeClassName="menu-itm--current"
-                   {...addProps}>{menuItem.caption}</NavLink>
-        </li>
-      )
-    })
+    return menuItems.map(this.renderMenuItem)
+  }
+
+  renderMenuItem(menuItem, index) {
+    const addProps = {
+      to: menuItem.to,
+      exact: menuItem.exact || false
+    }
+    return (
+      <li key={index}>
+        <NavLink className="menu-item"
+                 activeClassName="menu-item--current"
+                 {...addProps}>{menuItem.caption}</NavLink>
+      </li>
+    )
   }
 
   render() {

public/images/shard-clouds.jpg

@@ -13,13 +13,15 @@ it('has h1 title', () => {
 
 it('contains x2 NavLink (menu items)', () => {
   const component = shallow(<Header />)
-  expect(component.find('li > NavLink').length).toEqual(2)
+  expect(component.find('li > NavLink').length).toEqual(3)
 })
 
 it('navigation has correct links', () => {
   const component = shallow(<Header />)
   expect(component.find('li > NavLink').at(0).props().children).toContain("Home")
   expect(component.find('li > NavLink').at(0).props().to).toEqual("/")
-  expect(component.find('li > NavLink').at(1).props().children).toContain("Contact")
-  expect(component.find('li > NavLink').at(1).props().to).toEqual("/contact")
+  expect(component.find('li > NavLink').at(1).props().children).toContain("Pictures")
+  expect(component.find('li > NavLink').at(1).props().to).toEqual("/pictures")
+  expect(component.find('li > NavLink').at(2).props().children).toContain("Contact")
+  expect(component.find('li > NavLink').at(2).props().to).toEqual("/contact")
 })

public/images/tower-bridge.jpg

@@ -0,0 +1,8 @@
+.Picture-full {
+  max-width: 512px;
+}
+.Picture-full > img {
+  display: block;
+  width: 100%;
+  height: auto;
+}

src/App.js

@@ -0,0 +1,23 @@
+import React, {Component} from 'react'
+import {Link} from 'react-router-dom'
+import pictures from '../sampleData/pictures'
+import './Picture.css'
+
+class Picture extends Component {
+  render() {
+    const {pictureIndex} = this.props.match.params
+    return (
+      <div className="app-content-width">
+        <article>
+          <h2>{pictures[pictureIndex].name}</h2>
+          <p>It is only about a single picture. Go back to <Link to="/pictures">gallery</Link></p>
+          <div className="Picture-full">
+            <img src={pictures[pictureIndex].url} alt="Nice one"/>
+          </div>
+        </article>
+      </div>
+    )
+  }
+}
+
+export default Picture

src/layout/Header.js

@@ -0,0 +1,59 @@
+.Pictures-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px 0 25px;
+  justify-content: space-between;
+}
+
+.Picture {
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}
+
+.Picture-name {
+  text-align: center;
+  padding: 3px 13px;
+  background-color: rgba(0, 0, 0, 0.25);
+  color: #ffffff;
+  font-weight: 400;
+}
+
+.Picture > a {
+  display: block;
+}
+
+.Picture > a > img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* large screens */
+@media all and (min-width: 1024px) {
+  .Picture {
+    /* 1/4  - 4 columns, 10px - spacing between columns */
+    width: calc(1 / 4 * 100% - (1 - 1 / 4) * 10px);
+  }
+}
+
+/* medium screens, likely tablets, mostly in portrait mode */
+@media all and (min-width: 768px) and (max-width: 1023px) {
+  .Picture {
+    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 10px);
+  }
+}
+
+/* small screens, mainly phones in landscape or small tablets */
+@media all and (min-width: 426px) and (max-width: 767px) {
+  .Picture {
+    width: calc(1 / 2 * 100% - (1 - 1 / 2) * 10px);
+  }
+}
+
+/* mobile screens */
+@media all and (max-width: 425px) {
+  .Pictures-gallery {
+    display: block;
+  }
+}