Major styling edits - Add bootstrap navbar header and footer

src/components/App.js

@@ -111,16 +111,13 @@ export default class App extends React.Component {
     render() {
         return (
             <div className="App">
-                <div className="header-search">
-                    <h1>World of Recursers</h1>
-                    <Search
-                        searchCompletedFn={this.setSelectedLocation}
-                        clearInput={this.state.triggerClearInput}
-                        onInputCleared={this.onInputCleared}
-                        resetFn={this.resetSearch}
-                        isLoading={this.state.searchLoading}
-                    />
-                </div>
+                <Search
+                    searchCompletedFn={this.setSelectedLocation}
+                    clearInput={this.state.triggerClearInput}
+                    onInputCleared={this.onInputCleared}
+                    resetFn={this.resetSearch}
+                    isLoading={this.state.searchLoading}
+                />
 
                 <div id="recurse-map">
                     <LeafletMap

src/components/Footer.js

@@ -0,0 +1,25 @@
+import React from "react";
+import GitHubLogo from "../assets/GitHub-Mark-32px.png";
+
+export default function Footer() {
+    return (
+        <footer className="footer mt-auto py-2">
+            <div className="footer-container container-fluid">
+                <a
+                    href="http://www.recurse.com"
+                    title="Made with love at the Recurse Center">
+                    <img
+                        alt="Recurse Center Logo"
+                        src="https://cloud.githubusercontent.com/assets/2883345/11322973/9e557144-910b-11e5-959a-8fdaaa4a88c5.png"
+                        height="14px"
+                    />
+                </a>
+                <span className="divider">|</span>
+                <a href="https://github.com/jaryncolbert/recurse-world-map">
+                    <img src={GitHubLogo} alt="Fork on Github" />
+                    Fork on GitHub
+                </a>
+            </div>
+        </footer>
+    );
+}

src/css/index.css

@@ -1,5 +1,5 @@
 body {
-    padding-bottom: 30px;
+    margin-bottom: 0.5em; /* Margin bottom by footer height */
 }
 h1,
 h2,
@@ -9,8 +9,9 @@ p {
 }
 
 .App {
-    height: 100vh;
-    width: 100vw;
+    height: 80vh;
+    width: 100%;
+    background-color: #e0f2f7;
 }
 
 .header-search {
@@ -32,3 +33,56 @@ input {
 html {
     font-size: calc(1em + 1vw);
 }
+
+.navbar {
+    background-color: #e0f2f7;
+}
+
+ul.navbar-nav {
+    text-align: right;
+}
+
+.navbar-brand img {
+    margin: 0.5em;
+    width: 40px;
+    height: 40px;
+}
+
+.navbar {
+    font-size: calc(16px + 0.5vw);
+}
+
+.navbar-brand {
+    font-size: calc(20px + 1vw);
+}
+
+.nav-item.about {
+    font-size: 2vw;
+}
+
+.navbar-nav > li > a,
+.navbar-brand {
+    padding-top: 0.1125rem;
+    padding-bottom: 0.1125rem;
+}
+
+.footer {
+    height: 7%;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    background-color: #f5f5f5;
+    text-align: center;
+    font-size: 16px;
+}
+
+.footer-container {
+    height: 100%;
+    width: auto;
+    text-align: center;
+    margin: auto;
+}
+.footer-container a img {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}

src/css/map.css

@@ -1,6 +1,6 @@
 .leaflet-container {
-    height: 100%;
-    width: 90%;
+    height: 90%;
+    width: 98%;
     margin: 0 auto;
     z-index: 10;
     top: 0px;
@@ -79,7 +79,7 @@
     flex-direction: column;
     width: 100%;
     justify-content: center;
-    align-items:center;
+    align-items: center;
     padding-top: 3em;
 }
 

src/css/search.css

@@ -67,6 +67,8 @@ body {
 }
 
 .location-input {
+    margin-left: 3%;
+    padding-left: 0px;
     max-width: 75%;
 }
 

src/index.js

@@ -1,13 +1,45 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Route, Link, BrowserRouter as Router } from "react-router-dom";
 import App from "./components/App";
 import * as serviceWorker from "./serviceWorker";
+import MapIcon from "./assets/map-icon-192x192.png";
+import Footer from "./components/Footer";
 
+// Bootstrap dependencies
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
 import "./css/index.css";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const router = (
+    <Router basename="/">
+        <nav className="navbar navbar-light navbar-expand-sm justify-content-sm-between">
+            <Link to="/" className="navbar-brand">
+                <img src={MapIcon} alt="RC Map Icon" />
+                World of Recurse Map
+            </Link>
+        </nav>
+
+        <Route exact path="/" component={App} />
+
+        <Footer />
+    </Router>
+);
+
+function NavListItem({ path, text }) {
+    return (
+        <li
+            className="nav-item"
+            data-toggle="collapse"
+            data-target=".navbar-collapse.show">
+            <Link to={path} className="nav-link">
+                {text}
+            </Link>
+        </li>
+    );
+}
+
+ReactDOM.render(router, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

worldmap.py

@@ -160,12 +160,12 @@ def get_all_rc_locations():
 def get_all_rc_locations_with_people():
     cursor = connection.cursor()
 
-    # Query returns list of locations grouped in the format: 
+    # Query returns list of locations grouped in the format:
     # {
-    #   location_id: 
+    #   location_id:
     #   location_name:
     #   lat:
-    #   lng: 
+    #   lng:
     #   person_list: [
     #     {
     #        person_id:
@@ -192,7 +192,7 @@ def get_all_rc_locations_with_people():
                         lng,
                         person_list
                       FROM geolocations_people_and_stints_agg""")
-    
+
     locations = [{
         'location_id': x[0],
         'location_name': x[1],
@@ -334,8 +334,8 @@ def insert_location(cursor, location):
     ))
     cursor.execute("INSERT INTO locations" +
                    " (location_id, name, short_name)" +
-                   " VALUES (%s, %s, %s) " + 
-                   " ON CONFLICT ON CONSTRAINT locations_pkey " + 
+                   " VALUES (%s, %s, %s) " +
+                   " ON CONFLICT ON CONSTRAINT locations_pkey " +
                    " DO NOTHING ",
                    [location.get('id'),
                     location.get('name'),