greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add map drawer 

This commit break map css. Will need to refactor how the map renders
pull/7430/head
Berkeley Martinez 2016-06-03 13:43:42 -07:00
parent ad93e49b7d
commit 8169e9e785
11 changed files with 284 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
client/less/drawers.less Normal file
View File

@ -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=)
}

7
client/less/main.less
View File

@ -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";
ul > li {
list-style-type: disc;
}
@import "drawers.less";

3
client/less/map.less
View File

@ -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%;

41
common/app/App.jsx
View File

@ -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 navProps = { username, points, picture, updateNavHeight };
const {
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'

37
common/app/components/Drawer.jsx Normal file
View File

@ -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>
);
}
}

30
common/app/components/Map-Drawer.jsx Normal file
View File

@ -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>
);
}
}

46
common/app/components/Nav/Nav.jsx
View File

@ -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) }

3
common/app/components/Nav/links.json
View File

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

7
common/app/redux/actions.js
View File

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

27
common/app/redux/reducer.js
View File

@ -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
})
},
{
title: 'Learn To Code | Free Code Camp',
username: null,
picture: null,
points: 0,
isSignedIn: false,
csrfToken: '',
windowHeight: 0,
navHeight: 0
}
initialState
);

5
common/app/redux/types.js
View File

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