add titles and grids

common/app/routes/Hikes/components/Hikes.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import stampit from 'react-stampit';
-import { Panel, Row } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
 // import debugFactory from 'debug';
 
 import HikesMap from './Map.jsx';
@@ -23,9 +23,6 @@ export default stampit(React, {
   render() {
     return (
       <div>
-        <Panel>
-          <h1>Hikes!</h1>
-        </Panel>
         <Row>
           { this.props.children || this.renderMap() }
         </Row>

common/app/routes/Hikes/components/Lecture.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { Col, Row, Panel } from 'react-bootstrap';
 import stampit from 'react-stampit';
 import Vimeo from 'react-vimeo';
 import debugFactory from 'debug';
@@ -12,7 +13,10 @@ export default stampit(React, {
     params: PropTypes.object
   },
 
-  onError: debug,
+  handleError: debug,
+  handleFinish() {
+    debug('loading questions');
+  },
 
   render() {
     const {
@@ -20,9 +24,19 @@ export default stampit(React, {
     } = this.props.params;
 
     return (
-      <Vimeo
+      <Col xs={ 12 }>
-        onError={ this.onError }
+        <Row>
-        videoId={ id } />
+          <Panel className={ 'text-center' }>
+            <h2>Title</h2>
+          </Panel>
+        </Row>
+        <Row>
+          <Vimeo
+            onError={ this.handleError }
+            onFinish= { this.handleFinish }
+            videoId={ id } />
+        </Row>
+      </Col>
     );
   }
 });

common/app/routes/Hikes/components/Map.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import stampit from 'react-stampit';
 import { Link } from 'react-router';
-import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { ListGroup, ListGroupItem, Panel } from 'react-bootstrap';
 import videos from '../videos.json';
 
 export default stampit(React, {
@@ -20,9 +20,14 @@ export default stampit(React, {
     });
 
     return (
-      <ListGroup>
+      <div>
-        { vidElements }
+        <Panel>
-      </ListGroup>
+          <h2>Welcome To Hikes!</h2>
+        </Panel>
+        <ListGroup>
+          { vidElements }
+        </ListGroup>
+      </div>
     );
   }
 });

common/app/routes/Hikes/videos.json

@@ -1,5 +1,5 @@
 [{
-  "title": "fcc computer basics 1: the 4 basic parts of a computer",
+  "title": "FCC Computer Basics 1: the 4 basic parts of a computer",
   "id": "132542064"
 }, {
   "title": "FCC Computer Basics 2: More Computer Hardware",