gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finish up hikes

Browse Source
This commit is contained in:
Berkeley Martinez
2016-01-15 03:09:31 -08:00
parent b5d9ba1a4d
commit 039f68b548
5 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/less/lib/bootstrap/variables.less
View File

@ -144,9 +144,9 @@
@btn-font-weight: normal; @btn-font-weight: normal;
@btn-default-color: @gray-lighter; @btn-default-color: #000000;
@btn-default-bg: @gray-lighter; @btn-default-bg: @body-bg;
@btn-default-border: #ccc; @btn-default-border: #000000;
@btn-primary-color: @brand-primary; @btn-primary-color: @brand-primary;
@btn-primary-bg: @brand-primary; @btn-primary-bg: @brand-primary;

18
common/app/routes/Hikes/components/Hike.jsx
View File

@ -1,10 +1,6 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { contain } from 'thundercats-react'; import { contain } from 'thundercats-react';
import { import { Col, Row } from 'react-bootstrap';
Col,
Panel,
Row
} from 'react-bootstrap';
import Lecture from './Lecture.jsx'; import Lecture from './Lecture.jsx';
import Questions from './Questions.jsx'; import Questions from './Questions.jsx';
@ -46,17 +42,19 @@ export default contain(
showQuestions showQuestions
} = this.props; } = this.props;
const videoTitle = <h4>{ title }</h4>;
return ( return (
<Col xs={ 12 }> <Col xs={ 12 }>
<Row> <Row>
<Panel <header className='text-center'>
<h4>{ title }</h4>
</header>
<hr />
<div className='spacer' />
<section
className={ 'text-center' } className={ 'text-center' }
header={ videoTitle }
title={ title }> title={ title }>
{ this.renderBody(showQuestions) } { this.renderBody(showQuestions) }
</Panel> </section>
</Row> </Row>
</Col> </Col>
); );

3
common/app/routes/Hikes/components/Lecture.jsx
View File

@ -77,10 +77,13 @@ export default contain(
videoId={ id } /> videoId={ id } />
</Row> </Row>
<Row> <Row>
<article>
{ this.renderTranscript(description, dashedName) } { this.renderTranscript(description, dashedName) }
</article>
<Button <Button
block={ true } block={ true }
bsSize='large' bsSize='large'
bsStyle='primary'
onClick={ () => this.handleFinish(hikesActions) }> onClick={ () => this.handleFinish(hikesActions) }>
Take me to the Questions Take me to the Questions
</Button> </Button>

7
common/app/routes/Hikes/components/Map.jsx
View File

@ -1,6 +1,6 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { ListGroup, ListGroupItem, Panel } from 'react-bootstrap'; import { ListGroup, ListGroupItem } from 'react-bootstrap';
export default React.createClass({ export default React.createClass({
displayName: 'HikesMap', displayName: 'HikesMap',
@ -26,9 +26,10 @@ export default React.createClass({
return ( return (
<div> <div>
<Panel> <div className='text-center'>
<h2>Welcome To Hikes!</h2> <h2>Welcome To Hikes!</h2>
</Panel> </div>
<hr />
<ListGroup> <ListGroup>
{ vidElements } { vidElements }
</ListGroup> </ListGroup>

17
common/app/routes/Hikes/components/Questions.jsx
View File

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { spring, Motion } from 'react-motion'; import { spring, Motion } from 'react-motion';
import { contain } from 'thundercats-react'; import { contain } from 'thundercats-react';
import { Button, Col, Panel, Row } from 'react-bootstrap'; import { Button, Col, Row } from 'react-bootstrap';
const answerThreshold = 100; const answerThreshold = 100;
@ -107,11 +107,9 @@ export default contain(
WebkitTransform: `translate3d(${ x }px, 0, 0)`, WebkitTransform: `translate3d(${ x }px, 0, 0)`,
transform: `translate3d(${ x }px, 0, 0)` transform: `translate3d(${ x }px, 0, 0)`
}; };
const title = <h4>Question { number }</h4>;
return ( return (
<Panel <article
className={ shake ? 'animated swing shake' : '' } className={ shake ? 'animated swing shake' : '' }
header={ title }
onMouseDown={ hikesActions.grabQuestion } onMouseDown={ hikesActions.grabQuestion }
onMouseLeave={ mouseUp } onMouseLeave={ mouseUp }
onMouseMove={ this.handleMouseMove } onMouseMove={ this.handleMouseMove }
@ -120,8 +118,9 @@ export default contain(
onTouchMove={ this.handleMouseMove } onTouchMove={ this.handleMouseMove }
onTouchStart={ hikesActions.grabQuestion } onTouchStart={ hikesActions.grabQuestion }
style={ style }> style={ style }>
<h4>Question { number }</h4>
<p>{ question }</p> <p>{ question }</p>
</Panel> </article>
); );
}; };
}, },
@ -152,20 +151,24 @@ export default contain(
<Motion style={{ x: spring(x, [120, 10]) }}> <Motion style={{ x: spring(x, [120, 10]) }}>
{ questionElement } { questionElement }
</Motion> </Motion>
<Panel> <div className='spacer' />
<hr />
<div>
<Button <Button
bsSize='large' bsSize='large'
bsStyle='primary'
className='pull-left' className='pull-left'
onClick={ this.onAnswer(answer, false, info) }> onClick={ this.onAnswer(answer, false, info) }>
false false
</Button> </Button>
<Button <Button
bsSize='large' bsSize='large'
bsStyle='primary'
className='pull-right' className='pull-right'
onClick={ this.onAnswer(answer, true, info) }> onClick={ this.onAnswer(answer, true, info) }>
true true
</Button> </Button>
</Panel> </div>
</Row> </Row>
</Col> </Col>
); );