Add map drawer

This commit break map css. Will need to refactor how the map renders

client/less/drawers.less

@@ -0,0 +1,108 @@
+/*
+ * based off of https://github.com/gitterHQ/sidecar
+ * license: MIT
+ */
+.drawer {
+    width:500px;
+
+    z-index: 20000;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    background-color: @body-bg;
+    border-left: 1px solid #ddd;
+    box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1);
+
+    transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);
+
+    &.is-collapsed:not(.is-loading) {
+      -webkit-transform: translateX(110%);
+      transform: translateX(110%);
+    }
+
+    /* Add some "extension" so that there isn't a gap
+     * when we translate(via animation) more than 100% */
+    &:after {
+      content: '';
+
+      z-index: -1;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      bottom: 0;
+      right: -100%;
+
+      background-color: @body-bg;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+}
+
+.drawer-action-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    display: -webkit-flex;
+    display: flex;
+    justify-content: flex-end;
+
+    padding-bottom: 5px;
+    padding-right:10px;
+    padding-top:5px;
+    z-index: 100;
+}
+
+.drawer-action-item {
+    display: -webkit-flex;
+    display: flex;
+    /* main axis */
+    justify-content: center;
+    /* cross axis */
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+
+    padding-left: 0;
+    padding-right: 0;
+
+    opacity: 0.65;
+    background: none;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 22px 22px;
+    border: 0;
+    outline: none;
+
+    cursor: pointer;
+    cursor: hand;
+
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:active {
+      filter: hue-rotate(80deg) saturate(150);
+    }
+}
+
+.drawer-action-pop-out {
+    margin-right: -4px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=)
+}
+
+.drawer-action-collapse {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
+}

client/less/main.less

@@ -1,4 +1,4 @@
-            @import "lib/bootstrap/bootstrap";
+@import "lib/bootstrap/bootstrap";
 @import "lib/bootstrap-social/bootstrap-social";
 @import "lib/ionicons/ionicons";
 @import "lib/animate.min.less";
@@ -1171,7 +1171,4 @@ and (max-width : 400px)  {
 @import "challenge.less";
 @import "toastr.less";
 @import "map.less";
-
+@import "drawers.less";
-ul > li {
-  list-style-type: disc;
-}

client/less/map.less

@@ -63,7 +63,7 @@
 }
 
 .map-fixed-header {
-  position: fixed;
+  position: absolute;
   background: white;
   padding-top: 5px;
   width: 100%;
@@ -158,7 +158,6 @@
 }
 
 .map-wrapper {
-  position: absolute;
   display: block;
   height: 100%;
   width: 100%;

common/app/App.jsx

@@ -6,10 +6,12 @@ import { connect } from 'react-redux';
 import { contain } from 'redux-epic';
 import { createSelector } from 'reselect';
 
+import MapDrawer from './components/Map-Drawer.jsx';
 import {
   fetchUser,
   initWindowHeight,
-  updateNavHeight
+  updateNavHeight,
+  toggleMapDrawer
 } from './redux/actions';
 
 import { submitChallenge } from './routes/challenges/redux/actions';
@@ -24,18 +26,24 @@ const mapStateToProps = createSelector(
   state => state.app.points,
   state => state.app.picture,
   state => state.app.toast,
+  state => state.app.isMapDrawerOpen,
+  state => state.app.isMapAlreadyLoaded,
   state => state.challengesApp.toast,
   (
     username,
     points,
     picture,
     toast,
+    isMapDrawerOpen,
+    isMapAlreadyLoaded,
     showChallengeComplete
   ) => ({
     username,
     points,
     picture,
     toast,
+    isMapDrawerOpen,
+    isMapAlreadyLoaded,
     showChallengeComplete
   })
 );
@@ -44,7 +52,8 @@ const bindableActions = {
   initWindowHeight,
   updateNavHeight,
   fetchUser,
-  submitChallenge
+  submitChallenge,
+  toggleMapDrawer
 };
 
 const fetchContainerOptions = {
@@ -67,7 +76,10 @@ export class FreeCodeCamp extends React.Component {
     updateNavHeight: PropTypes.func,
     initWindowHeight: PropTypes.func,
     showChallengeComplete: PropTypes.number,
-    submitChallenge: PropTypes.func
+    submitChallenge: PropTypes.func,
+    isMapDrawerOpen: PropTypes.bool,
+    isMapAlreadyLoaded: PropTypes.bool,
+    toggleMapDrawer: PropTypes.func
   };
 
   componentWillReceiveProps({
@@ -122,8 +134,22 @@ export class FreeCodeCamp extends React.Component {
   }
 
   render() {
-    const { username, points, picture, updateNavHeight } = this.props;
+    const {
-    const navProps = { username, points, picture, updateNavHeight };
+      username,
+      points,
+      picture,
+      updateNavHeight,
+      isMapDrawerOpen,
+      isMapAlreadyLoaded,
+      toggleMapDrawer
+    } = this.props;
+    const navProps = {
+      username,
+      points,
+      picture,
+      updateNavHeight,
+      toggleMapDrawer
+    };
 
     return (
       <div>
@@ -131,6 +157,11 @@ export class FreeCodeCamp extends React.Component {
         <Row>
           { this.props.children }
         </Row>
+        <MapDrawer
+          isAlreadyLoaded={ isMapAlreadyLoaded }
+          isOpen={ isMapDrawerOpen }
+          toggleMapDrawer={ toggleMapDrawer }
+        />
         <ToastContainer
           className='toast-bottom-right'
           ref='toaster'

common/app/components/Drawer.jsx

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+export default class Drawer extends React.Component {
+  static displayName = 'Drawer';
+  static propTypes = {
+    children: PropTypes.node,
+    isOpen: PropTypes.bool,
+    closeDrawer: PropTypes.func
+  };
+
+  render() {
+    const { isOpen, closeDrawer, children } = this.props;
+    const drawerClass = classnames({
+      drawer: true,
+      'is-collapsed': !isOpen
+    });
+    return (
+      <aside className={ drawerClass }>
+        <div className='drawer-action-bar'>
+          <a
+            aria-label='open map in new tab'
+            className='drawer-action-item drawer-action-pop-out'
+          />
+          <button
+            aria-label='close map aside'
+            className='drawer-action-item drawer-action-collapse'
+            onClick={ closeDrawer }
+          />
+        </div>
+        <div className='drawer-content'>
+          { children }
+        </div>
+      </aside>
+    );
+  }
+}

common/app/components/Map-Drawer.jsx

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import NoSSR from 'react-no-ssr';
+
+import Drawer from './Drawer.jsx';
+import ShowMap from '../routes/challenges/components/map/Show.jsx';
+
+export default class MapDrawer extends React.Component {
+  static displayName = 'MapDrawer';
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    isAlreadyLoaded: PropTypes.bool,
+    toggleMapDrawer: PropTypes.func
+  };
+
+  render() {
+    const { isOpen, isAlreadyLoaded, toggleMapDrawer } = this.props;
+    return (
+      <Drawer
+        closeDrawer={ toggleMapDrawer }
+        isOpen={ isOpen }
+      >
+        <NoSSR>
+          <div>
+            { isAlreadyLoaded || isOpen ? <ShowMap /> : null }
+          </div>
+        </NoSSR>
+      </Drawer>
+    );
+  }
+}

common/app/components/Nav/Nav.jsx

@@ -31,13 +31,16 @@ const toggleButtonChild = (
 
 export default class extends React.Component {
   static displayName = 'Nav';
-
+  static contextTypes = {
+    router: PropTypes.object
+  };
   static propTypes = {
     points: PropTypes.number,
     picture: PropTypes.string,
     signedIn: PropTypes.bool,
     username: PropTypes.string,
-    updateNavHeight: PropTypes.func
+    updateNavHeight: PropTypes.func,
+    toggleMapDrawer: PropTypes.func
   };
 
   componentDidMount() {
@@ -45,12 +48,39 @@ export default class extends React.Component {
     this.props.updateNavHeight(navBar.clientHeight);
   }
 
+  renderMapLink(isOnMap, toggleMapDrawer) {
+    if (isOnMap) {
+      return (
+        <li role='presentation'>
+          <a
+            href='#'
+            onClick={ e => e.preventDefault()}
+          >
+            Map
+          </a>
+        </li>
+      );
+    }
+    return (
+      <LinkContainer
+        eventKey={ 1 }
+        to='/map'>
+        <NavItem
+          onClick={ toggleMapDrawer }
+          target='/map'
+        >
+          Map
+        </NavItem>
+      </LinkContainer>
+    );
+  }
+
   renderLinks() {
     return navLinks.map(({ content, link, react, target }, index) => {
       if (react) {
         return (
           <LinkContainer
-            eventKey={ index + 1 }
+            eventKey={ index + 2 }
             key={ content }
             to={ link }>
             <NavItem
@@ -110,7 +140,14 @@ export default class extends React.Component {
   }
 
   render() {
-    const { username, points, picture } = this.props;
+    const {
+      username,
+      points,
+      picture,
+      toggleMapDrawer
+    } = this.props;
+    const { router } = this.context;
+    const isOnMap = router.isActive('/map');
 
     return (
       <Navbar
@@ -123,6 +160,7 @@ export default class extends React.Component {
             className='hamburger-dropdown'
             navbar={ true }
             pullRight={ true }>
+            { this.renderMapLink(isOnMap, toggleMapDrawer) }
             { this.renderLinks() }
             { this.renderPoints(username, points) }
             { this.renderSignin(username, picture) }

common/app/components/Nav/links.json

@@ -1,7 +1,4 @@
 [{
-  "content": "Map",
-  "link": "/map"
-}, {
   "content": "Chat",
   "link": "//gitter.im/FreeCodeCamp/FreeCodeCamp",
   "target": "_blank"

common/app/redux/actions.js

@@ -46,3 +46,10 @@ export const createErrorObservable = error => Observable.just({
   type: types.handleError,
   error
 });
+
+
+// drawers
+export const toggleMapDrawer = createAction(
+  types.toggleMapDrawer,
+  e => e.preventDefault()
+);

common/app/redux/reducer.js

@@ -1,6 +1,17 @@
 import { handleActions } from 'redux-actions';
 import types from './types';
 
+const initialState = {
+  title: 'Learn To Code | Free Code Camp',
+  username: null,
+  picture: null,
+  points: 0,
+  isSignedIn: false,
+  csrfToken: '',
+  windowHeight: 0,
+  navHeight: 0
+};
+
 export default handleActions(
   {
     [types.updateTitle]: (state, { payload = 'Learn To Code' }) => ({
@@ -30,16 +41,12 @@ export default handleActions(
     [types.updateNavHeight]: (state, { payload: navHeight }) => ({
       ...state,
       navHeight
+    }),
+    [types.toggleMapDrawer]: state => ({
+      ...state,
+      isMapAlreadyLoaded: true,
+      isMapDrawerOpen: !state.isMapDrawerOpen
     })
   },
-  {
+  initialState
-    title: 'Learn To Code | Free Code Camp',
-    username: null,
-    picture: null,
-    points: 0,
-    isSignedIn: false,
-    csrfToken: '',
-    windowHeight: 0,
-    navHeight: 0
-  }
 );

common/app/redux/types.js

@@ -19,5 +19,8 @@ export default createTypes([
   // data handling
   'updateChallengesData',
   'updateJobsData',
-  'updateHikesData'
+  'updateHikesData',
+
+  // drawers
+  'toggleMapDrawer'
 ], 'app');