Make list an actual list instead of accordion

client/less/jobs.less

@@ -0,0 +1,7 @@
+.jobs-list-highlight {
+  background-color: #ffc
+}
+
+a.jobs-list-highlight:hover {
+  background-color: #ffc
+}

client/less/main.less

@@ -955,11 +955,12 @@ code {
   margin: 0!important;
 }
 
-// gitter chat
 .gitter-chat-embed {
  z-index: 20000 !important;
 }
 
+@import "jobs.less";
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;

common/app/routes/Jobs/components/GoToPayPal.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Col, Well, Row } from 'react-bootstrap';
+import { Col, Panel, Row } from 'react-bootstrap';
 import { contain } from 'thundercats-react';
 
 export default contain(
@@ -23,12 +23,12 @@ export default contain(
         <div>
           <Row>
             <Col
-              xs={ 12 }
+              md={ 6 }
+              mdOffset={ 3 }
               sm={ 8 }
               smOffset={ 2 }
-              md={ 6 }
-              mdOffset={ 3 }>
-              <Well>
+              xs={ 12 }>
+              <Panel>
                 <form
                   action='https://www.sandbox.paypal.com/cgi-bin/webscr'
                   method='post'
@@ -61,7 +61,7 @@ export default contain(
                     src='https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif'
                     width='1' />
                 </form>
-              </Well>
+              </Panel>
             </Col>
           </Row>
         </div>

common/app/routes/Jobs/components/Jobs.jsx

@@ -1,7 +1,7 @@
 import React, { cloneElement, PropTypes } from 'react';
 import { contain } from 'thundercats-react';
 import { History } from 'react-router';
-import { Button, Jumbotron, Row } from 'react-bootstrap';
+import { Button, Panel, Row } from 'react-bootstrap';
 
 import CreateJobModal from './CreateJobModal.jsx';
 import ListJobs from './List.jsx';
@@ -60,31 +60,29 @@ export default contain(
       } = this.props;
 
       return (
-        <div>
+        <Panel>
+          <h1>Free Code Camps' Job Board</h1>
           <Row>
-            <Jumbotron>
-              <h1>Free Code Camps' Job Board</h1>
-              <p>
-                Need to find the best junior developers?
-                Want to find dedicated developers eager to join your company?
-                Sign up now to post your job!
-              </p>
-              <Button
-                bsSize='large'
-                className='signup-btn'
-                onClick={ jobActions.openModal }>
-                Try the first month 20% off!
-              </Button>
-            </Jumbotron>
+            <p>
+              Need to find the best junior developers?
+              Want to find dedicated developers eager to join your company?
+              Sign up now to post your job!
+            </p>
+            <Button
+              bsSize='large'
+              className='signup-btn'
+              onClick={ jobActions.openModal }>
+              Post a job: $200 for 60 days.
+            </Button>
           </Row>
           <Row>
-            { this.renderChild(children, jobs) ||
-              this.renderList(this.handleJobClick, jobs) }
+          { this.renderChild(children, jobs) ||
+            this.renderList(this.handleJobClick, jobs) }
           </Row>
           <CreateJobModal
             onHide={ jobActions.closeModal }
             showModal={ showModal } />
-        </div>
+        </Panel>
       );
     }
   })

common/app/routes/Jobs/components/List.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { PanelGroup, Thumbnail, Panel, Well } from 'react-bootstrap';
+import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import moment from 'moment';
 
 export default React.createClass({
@@ -10,64 +10,40 @@ export default React.createClass({
     jobs: PropTypes.array
   },
 
-  renderJobs(handleClick, jobs =[]) {
-    const thumbnailStyle = {
-      backgroundColor: 'white',
-      maxHeight: '100px',
-      maxWidth: '100px'
-    };
-
-    return jobs.map((
-      {
+  renderJobs(handleClick, jobs = []) {
+    return jobs
+      .filter(({ isPaid, isApproved, isFilled }) => {
+        return isPaid && isApproved && !isFilled;
+      })
+      .map(({
         id,
         company,
         position,
         isHighlighted,
-        description,
-        logo,
-        city,
-        state,
-        email,
-        phone,
         postedOn
-      },
-      index
-    ) => {
-      const header = (
-        <div>
-          <h4 style={{ display: 'inline-block' }}>{ company }</h4>
-          <h5
-            className='pull-right hidden-xs hidden-md'
-            style={{ display: 'inline-block' }}>
-            { position }
-          </h5>
-        </div>
-      );
-      return (
-        <Panel
-          bsStyle={ isHighlighted ? 'warning' : 'default' }
-          collapsible={ true }
-          eventKey={ index }
-          header={ header }
-          key={ id }>
-          <Well>
-            <Thumbnail
-              alt={ company + 'company logo' }
-              src={ logo }
-              style={ thumbnailStyle } />
-            <Panel>
-              Position: { position }
-              Location: { city }, { state }
-              <br />
-              Contact: { email || phone || 'N/A' }
-              <br />
-              Posted On: { moment(postedOn).format('MMMM Do, YYYY') }
-            </Panel>
-            <p onClick={ () => handleClick(id) }>{ description }</p>
-          </Well>
-        </Panel>
-      );
-    });
+      }) => {
+        return (
+          <ListGroupItem
+            className={ isHighlighted ? 'jobs-list-highlight' : '' }
+            onClick={ () => handleClick(id) }>
+            <div>
+              <h4 style={{ display: 'inline-block' }}>
+                <span>{ company }</span>
+                {' '}
+                <span className='hidden-xs hidden-sm'>
+                  - { position }
+                </span>
+                {' '}
+              </h4>
+              <h4
+                className='pull-right'
+                style={{ display: 'inline-block' }}>
+                { moment(new Date(postedOn)).format('MMM Do') }
+              </h4>
+            </div>
+          </ListGroupItem>
+        );
+      });
   },
 
   render() {
@@ -77,9 +53,9 @@ export default React.createClass({
     } = this.props;
 
     return (
-      <PanelGroup>
+      <ListGroup>
         { this.renderJobs(handleClick, jobs) }
-      </PanelGroup>
+      </ListGroup>
     );
   }
 });

common/models/job.json

@@ -48,13 +48,20 @@
       "type": "string"
     },
     "isApproved": {
-      "type": "boolean"
+      "type": "boolean",
+      "default": false
     },
     "isHighlighted": {
-      "type": "boolean"
+      "type": "boolean",
+      "default": false
     },
     "isPaid": {
-      "type": "boolean"
+      "type": "boolean",
+      "default": false
+    },
+    "isFilled": {
+      "type": "boolean",
+      "default": false
     },
     "postedOn": {
       "type": "date",