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 }
+              xs={ 12 }>
-              mdOffset={ 3 }>
+              <Panel>
-              <Well>
                 <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,10 +60,9 @@ export default contain(
       } = this.props;
 
       return (
-        <div>
+        <Panel>
-          <Row>
-            <Jumbotron>
           <h1>Free Code Camps' Job Board</h1>
+          <Row>
             <p>
               Need to find the best junior developers?
               Want to find dedicated developers eager to join your company?
@@ -73,9 +72,8 @@ export default contain(
               bsSize='large'
               className='signup-btn'
               onClick={ jobActions.openModal }>
-                Try the first month 20% off!
+              Post a job: $200 for 60 days.
             </Button>
-            </Jumbotron>
           </Row>
           <Row>
           { this.renderChild(children, jobs) ||
@@ -84,7 +82,7 @@ export default contain(
           <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({
@@ -11,61 +11,37 @@ export default React.createClass({
   },
 
   renderJobs(handleClick, jobs = []) {
-    const thumbnailStyle = {
+    return jobs
-      backgroundColor: 'white',
+      .filter(({ isPaid, isApproved, isFilled }) => {
-      maxHeight: '100px',
+        return isPaid && isApproved && !isFilled;
-      maxWidth: '100px'
+      })
-    };
+      .map(({
-
-    return jobs.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
+          <ListGroupItem
-          bsStyle={ isHighlighted ? 'warning' : 'default' }
+            className={ isHighlighted ? 'jobs-list-highlight' : '' }
-          collapsible={ true }
+            onClick={ () => handleClick(id) }>
-          eventKey={ index }
+            <div>
-          header={ header }
+              <h4 style={{ display: 'inline-block' }}>
-          key={ id }>
+                <span>{ company }</span>
-          <Well>
+                {' '}
-            <Thumbnail
+                <span className='hidden-xs hidden-sm'>
-              alt={ company + 'company logo' }
+                  - { position }
-              src={ logo }
+                </span>
-              style={ thumbnailStyle } />
+                {' '}
-            <Panel>
+              </h4>
-              Position: { position }
+              <h4
-              Location: { city }, { state }
+                className='pull-right'
-              <br />
+                style={{ display: 'inline-block' }}>
-              Contact: { email || phone || 'N/A' }
+                { moment(new Date(postedOn)).format('MMM Do') }
-              <br />
+              </h4>
-              Posted On: { moment(postedOn).format('MMMM Do, YYYY') }
+            </div>
-            </Panel>
+          </ListGroupItem>
-            <p onClick={ () => handleClick(id) }>{ description }</p>
-          </Well>
-        </Panel>
         );
       });
   },
@@ -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",