abstract exploreMapsBar into reusable navBar

app/assets/stylesheets/clean.css.erb

@@ -668,19 +668,19 @@
   box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
-#exploreMapsHeader {
+#navBar {
   position: absolute;
   width: 100%;
 }
 
-.exploreMapsBar {
+.navBarContainer {
   z-index:2;
   background-color:#FAFAFA;
   height: 42px;
   padding-top: 52px;
 }
 
-.exploreMapsMenu {
+.navBarMenu {
   display: block;
   width: 100%;
   height:42px;
@@ -689,11 +689,11 @@
   text-align: center;
 }
 
-.exploreMapsCenter {
+.navBarCenter {
    display: block;
 }
 
-.exploreMapsButton {
+.navBarButton {
     color: #757575;
 	cursor: default;
 	font-weight: normal;
@@ -706,13 +706,13 @@
     cursor: pointer;
     position:relative;
 }
-.exploreMapsButton:hover, .exploreMapsButton.active {
+.navBarButton:hover, .navBarButton.active {
   text-decoration: none;
   color: #424242;
   border-bottom: 2px solid #00BCD4;
 }
 
-.exploreMapsButton.mapperButton {
+.navBarButton.mapperButton {
     height: 40px;
     padding: 0;
 }
@@ -729,7 +729,7 @@
 }
 
 
-.exploreMapsButton .exploreMapsIcon {
+.navBarButton .navBarIcon {
     background-repeat: no-repeat;
     width:32px;
     height:32px;
@@ -738,53 +738,53 @@
     left:5px;
 }
 
-.exploreMapsCenter .authedApps .exploreMapsIcon {
+.navBarCenter .authedApps .navBarIcon {
     background-image: url(<%= asset_path('user_sprite.png') %>);
     background-position: 0 -32px;
 }
-.exploreMapsCenter .myMaps .exploreMapsIcon {
+.navBarCenter .myMaps .navBarIcon {
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -32px 0;
 }
-.exploreMapsCenter .sharedMaps .exploreMapsIcon {
+.navBarCenter .sharedMaps .navBarIcon {
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -128px 0;
 }
-.exploreMapsCenter .activeMaps .exploreMapsIcon {
+.navBarCenter .activeMaps .navBarIcon {
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: 0 0;
 }
-.exploreMapsCenter .featuredMaps .exploreMapsIcon {
+.navBarCenter .featuredMaps .navBarIcon {
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
 }
-.exploreMapsCenter .starredMaps .exploreMapsIcon {
+.navBarCenter .starredMaps .navBarIcon {
     background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
 }
-.exploreMapsCenter .notificationsLink .exploreMapsIcon {
+.navBarCenter .notificationsLink .navBarIcon {
     background-image: url(<%= asset_path 'topright_sprite.png' %>);
     background-position: -128px 0;
 }
-.authedApps:hover .exploreMapsIcon, .authedApps.active .exploreMapsIcon {
+.authedApps:hover .navBarIcon, .authedApps.active .navBarIcon {
     background-position-x: -32px;
 }
-.myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon {
+.myMaps:hover .navBarIcon, .myMaps.active .navBarIcon {
     background-position: -32px -32px;
 }
-.activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon {
+.activeMaps:hover .navBarIcon, .activeMaps.active .navBarIcon {
     background-position: 0 -32px;
 }
-.featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon {
+.featuredMaps:hover .navBarIcon, .featuredMaps.active .navBarIcon {
     background-position: -96px -32px;
 }
-.starredMaps:hover .exploreMapsIcon, .starredMaps.active .exploreMapsIcon {
+.starredMaps:hover .navBarIcon, .starredMaps.active .navBarIcon {
     background-position: -96px -32px;
 }
-.sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
+.sharedMaps:hover .navBarIcon, .sharedMaps.active .navBarIcon {
     background-position: -128px -32px;
 }
-.notificationsLink:hover .exploreMapsIcon, .notificationsLink.active .exploreMapsIcon {
+.notificationsLink:hover .navBarIcon, .notificationsLink.active .navBarIcon {
     background-position-y: -32px;
 }
 

app/assets/stylesheets/mobile.scss.erb

@@ -32,7 +32,7 @@
 
 /* Smartphones (portrait and landscape) ----------- the minimum space that two map cards can fit side by side */
 @media only screen and (max-width : 504px) {
-  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #exploreMapsHeader {
+  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #navBar {
     display: none !important;
   }
 

app/views/layouts/doorkeeper.html.erb

@@ -1,31 +0,0 @@
-<%#
-# @file
-# Main application file. Holds scaffolding present on every page.
-# Then a certain non-partial view (no _ preceding filename) will be
-# displayed within, based on URL
-#%>
-
-<%= render :partial => 'layouts/head' %>
-<body class="<%= current_user ? 'authenticated' : 'unauthenticated' %>">
-  <div class="main" id="react-app"></div>
-  <%= yield %>
-  <div id="exploreMapsHeader">
-      <div class="exploreMapsBar exploreElement">
-          <div class="exploreMapsMenu">
-              <div class="exploreMapsCenter">
-                <% if current_user && current_user.admin %>
-                  <a href="<%= oauth_applications_path %>" class="activeMaps exploreMapsButton <%= params[:controller] == 'doorkeeper/applications' ? 'active' : nil %>">
-                      <div class="exploreMapsIcon"></div>Registered Apps
-                  </a>
-                <% end %>
-                  <a href="<%= oauth_authorized_applications_path %>" class="authedApps exploreMapsButton <%= params[:controller] == 'doorkeeper/authorized_applications' ? 'active' : nil %>">
-                      <div class="exploreMapsIcon"></div>Authorized Apps
-                  </a>
-                  <a href="/" class="myMaps exploreMapsButton">
-                      <div class="exploreMapsIcon"></div>Maps
-                  </a>
-              </div>
-          </div>
-      </div>
-  </div>
-<%= render :partial => 'layouts/foot' %>

app/views/notifications/_header.html.erb

@@ -1,14 +0,0 @@
-<div id="exploreMapsHeader">
-  <div class="exploreMapsBar exploreElement">
-    <div class="exploreMapsMenu">
-      <div class="exploreMapsCenter">
-        <a href="<%= notifications_path %>" class="notificationsLink exploreMapsButton active">
-          <div class="exploreMapsIcon"></div>Notifications
-        </a>
-        <a href="/" class="exploreMapsButton myMaps">
-          <div class="exploreMapsIcon"></div>Maps
-        </a>
-      </div>
-    </div>
-  </div>
-</div>

app/views/notifications/index.html.erb

@@ -76,5 +76,3 @@
     </div>
   <% end %>
 </div>
-
-<%= render partial: 'notifications/header' %>

app/views/notifications/show.html.erb

@@ -50,5 +50,3 @@
      <% end %>
   </div>
 </div>
-
-<%= render partial: 'notifications/header' %>

config/application.rb

@@ -25,9 +25,9 @@ module Metamaps
     config.encoding = 'utf-8'
 
     config.to_prepare do
-      Doorkeeper::ApplicationsController.layout 'doorkeeper'
+      Doorkeeper::ApplicationsController.layout "application"
-      Doorkeeper::AuthorizationsController.layout 'doorkeeper'
+      Doorkeeper::AuthorizationsController.layout "application"
-      Doorkeeper::AuthorizedApplicationsController.layout 'doorkeeper'
+      Doorkeeper::AuthorizedApplicationsController.layout "application"
       Doorkeeper::ApplicationController.helper ApplicationHelper
     end
 

frontend/src/components/App/NavBar.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+class NavBar extends Component {
+  render() {
+    return (
+      <div id="navBar">
+        <div className="navBarContainer">
+          <div className="navBarMenu">
+            <div className="navBarCenter">
+              {this.props.children}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default NavBar

frontend/src/components/App/NavBarLink.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router'
+import _ from 'lodash'
+
+const NavBarLink = props => {
+  const { show, text, href, linkClass } = props
+  const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
+  if (!show) {
+    return null
+  }
+
+  return (
+    <Link { ...otherProps } to={href} className={'navBarButton ' + linkClass}>
+      <div className="navBarIcon"></div>
+      {text}
+    </Link>
+  )
+}
+
+NavBarLink.propTypes = {
+  show: PropTypes.bool,
+  text: PropTypes.string,
+  href: PropTypes.string,
+  linkClass: PropTypes.string
+}
+
+export default NavBarLink

frontend/src/components/Apps/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import NavBar from '../App/Navbar'
+import NavBarLink from '../App/NavBarLink'
+
+class Apps extends Component {
+  render = () => {
+    const { currentUser } = this.props
+
+    return (
+      <NavBar>
+        {currentUser.get('admin') && <NavBarLink show href="/oauth/applications"
+          className="activeMaps" text="Registered Apps" />}
+        <NavBarLink show href="/oauth/authorized_applications"
+          linkClass="authedApps" text="Authorized Apps" />
+        <NavBarLink show href="/" linkClass="myMaps exploreMapsButton" text="Maps" />
+      </NavBar>
+    )
+  }
+}
+
+export default Apps

frontend/src/components/Maps/Header.js

@@ -1,30 +1,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router'
+import NavBar from '../App/Navbar'
-import _ from 'lodash'
+import NavBarLink from '../App/NavBarLink'
-
-const MapLink = props => {
-  const { show, text, href, linkClass } = props
-  const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
-  if (!show) {
-    return null
-  }
-
-  return (
-    <Link { ...otherProps } to={href} className={linkClass}>
-      <div className="exploreMapsIcon"></div>
-      {text}
-    </Link>
-  )
-}
 
 class Header extends Component {
   render = () => {
     const { signedIn, section, user } = this.props
 
     const activeClass = (title) => {
-      let forClass = 'exploreMapsButton'
+      let forClass = title + 'Maps'
-      forClass += ' ' + title + 'Maps'
       if (title === 'my' && section === 'mine' ||
           title === section) forClass += ' active'
       return forClass
@@ -34,47 +18,41 @@ class Header extends Component {
     const mapper = section === 'mapper'
 
     return (
-      <div id="exploreMapsHeader">
+      <NavBar>
-        <div className="exploreMapsBar exploreElement">
+				<NavBarLink show={explore}
-          <div className="exploreMapsMenu">
+					href={signedIn ? '/' : '/explore/active'}
-            <div className="exploreMapsCenter">
+					linkClass={activeClass('active')}
-              <MapLink show={explore}
+					text="All Maps"
-                href={signedIn ? '/' : '/explore/active'}
+				/>
-                linkClass={activeClass('active')}
+				<NavBarLink show={signedIn && explore}
-                text="All Maps"
+					href="/explore/mine"
-              />
+					linkClass={activeClass('my')}
-              <MapLink show={signedIn && explore}
+					text="My Maps"
-                href="/explore/mine"
+				/>
-                linkClass={activeClass('my')}
+				<NavBarLink show={signedIn && explore}
-                text="My Maps"
+					href="/explore/shared"
-              />
+					linkClass={activeClass('shared')}
-              <MapLink show={signedIn && explore}
+					text="Shared With Me"
-                href="/explore/shared"
+				/>
-                linkClass={activeClass('shared')}
+				<NavBarLink show={signedIn && explore}
-                text="Shared With Me"
+					href="/explore/starred"
-              />
+					linkClass={activeClass('starred')}
-              <MapLink show={signedIn && explore}
+					text="Starred By Me"
-                href="/explore/starred"
+				/>
-                linkClass={activeClass('starred')}
+				<NavBarLink show={!signedIn && explore}
-                text="Starred By Me"
+					href="/explore/featured"
-              />
+					linkClass={activeClass('featured')}
-              <MapLink show={!signedIn && explore}
+					text="Featured Maps"
-                href="/explore/featured"
+				/>
-                linkClass={activeClass('featured')}
-                text="Featured Maps"
-              />
 
-              {mapper ? (
+				{mapper ? (
-                <div className='exploreMapsButton active mapperButton'>
+					<div className='navBarButton active mapperButton'>
-                  {user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
+						{user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
-                  {user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>}
+						{user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>}
-                  <div className='clearfloat'></div>
+						<div className='clearfloat'></div>
-                </div>
+					</div>
-              ) : null }
+				) : null }
-            </div>
+      </NavBar>
-          </div>
-        </div>
-      </div>
     )
   }
 }

frontend/src/components/Maps/index.js

@@ -6,7 +6,6 @@ import MapperCard from './MapperCard'
 import MapCard from './MapCard'
 
 class Maps extends Component {
-
   static propTypes = {
     section: PropTypes.string,
     maps: PropTypes.object,

frontend/src/components/Notifications/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import NavBar from '../App/Navbar'
+import NavBarLink from '../App/NavBarLink'
+
+class Notifications extends Component {
+  render = () => {
+    const { currentUser } = this.props
+    return (
+      <NavBar>
+        <NavBarLink show href="/notifications"
+          linkClass="notificationsLink active" text="Notifications" />
+        <NavBarLink show href="/" linkClass="myMaps" text="Maps" />
+      </NavBar>
+    )
+  }
+}
+
+export default Notifications

frontend/src/components/makeRoutes.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Route, IndexRoute } from 'react-router'
 import App from './App'
+import Apps from './Apps'
 import Maps from './Maps'
 import MapView from './MapView'
+import Notifications from './Notifications'
 import TopicView from './TopicView'
 
 function nullComponent(props) {
@@ -31,8 +33,8 @@ export default function makeRoutes (currentUser) {
     <Route path="join" component={nullComponent} />
     <Route path="request" component={nullComponent} />
     <Route path="notifications">
-      <IndexRoute component={nullComponent} />
+      <IndexRoute component={Notifications} />
-      <Route path=":id" component={nullComponent} />
+      <Route path=":id" component={Notifications} />
     </Route>
     <Route path="users">
       <Route path=":id/edit" component={nullComponent} />
@@ -50,20 +52,20 @@ export default function makeRoutes (currentUser) {
       <Route path=":id/edit" component={nullComponent} />
     </Route>
     <Route path="oauth">
-      <Route path="token/info" component={nullComponent} />
+      <Route path="token/info" component={Apps} />
       <Route path="authorize">
-        <IndexRoute component={nullComponent} />
+        <IndexRoute component={Apps} />
-        <Route path=":code" component={nullComponent} />
+        <Route path=":code" component={Apps} />
       </Route>
       <Route path="authorized_applications">
-        <IndexRoute component={nullComponent} />
+        <IndexRoute component={Apps} />
-        <Route path=":id" component={nullComponent} />
+        <Route path=":id" component={Apps} />
       </Route>
       <Route path="applications">
-        <IndexRoute component={nullComponent} />
+        <IndexRoute component={Apps} />
-        <Route path="new" component={nullComponent} />
+        <Route path="new" component={Apps} />
-        <Route path=":id" component={nullComponent} />
+        <Route path=":id" component={Apps} />
-        <Route path=":id/edit" component={nullComponent} />
+        <Route path=":id/edit" component={Apps} />
       </Route>
     </Route>
   </Route>