From f786d0f183b389d0f20a48ece60439adb14185bc Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 12 Jan 2018 15:28:22 +0000
Subject: [PATCH 01/15] list view

---
 src/components/App.js                        |  8 ++--
 src/components/contractors/Contractors.js    | 22 +++++----
 src/components/contractors/Grid.js           | 47 --------------------
 src/components/contractors/List.js           | 30 +++++++++++++
 src/components/contractors/SelectSubjects.js | 29 ++++++++++++
 src/index.js                                 |  2 +-
 src/main.scss                                |  1 +
 src/styles/contractors.scss                  | 25 +++++++++++
 src/styles/grid.scss                         | 23 ----------
 src/tests/index.test.js                      |  2 +-
 10 files changed, 104 insertions(+), 85 deletions(-)
 delete mode 100644 src/components/contractors/Grid.js
 create mode 100644 src/components/contractors/List.js
 create mode 100644 src/components/contractors/SelectSubjects.js
 create mode 100644 src/styles/contractors.scss

diff --git a/src/components/App.js b/src/components/App.js
index 0a36f685..99d6bb5e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -61,13 +61,13 @@ class App extends Component {
   render () {
     if (this.state.error) {
       return <Error>{this.state.error}</Error>
-    } else if (this.props.config.mode === 'grid') {
-      return <Contractors root={this} config={this.props.config} history={this.props.history}/>
     } else if (this.props.config.mode === 'enquiry') {
       return <PlainEnquiry root={this} config={this.props.config}/>
-    } else {
-      // enquiry-modal
+    } else if (this.props.config.mode === 'enquiry-modal') {
       return <EnquiryButton root={this} config={this.props.config}/>
+    } else {
+      // grid or list
+      return <Contractors root={this} config={this.props.config} history={this.props.history}/>
     }
   }
 }
diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
index 628e8090..557553c5 100644
--- a/src/components/contractors/Contractors.js
+++ b/src/components/contractors/Contractors.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react'
 import {Route} from 'react-router-dom'
 import {async_start, slugify} from '../../utils'
-import Grid from './Grid'
+import {If} from '../shared/Tools'
+import {Grid, List} from './List'
 import ConModal from './ConModal'
+import SelectSubjects from './SelectSubjects'
 
 class Contractors extends Component {
   constructor (props) {
@@ -75,15 +77,17 @@ class Contractors extends Component {
   }
 
   render () {
+    const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
     return (
-      <div className="tcs-app">
-        <Grid config={this.props.config}
-              history={this.props.history}
-              contractors={this.state.contractors}
-              subjects={this.state.subjects}
-              selected_subject={this.state.selected_subject}
-              subject_change={this.subject_change}
-              root={this.props.root}/>
+      <div className="tcs-app tcs-contractors">
+        <If v={this.props.config.subject_filter}>
+          <SelectSubjects get_text={this.props.root.get_text}
+                          contractors={this.state.contractors}
+                          subjects={this.state.subjects}
+                          selected_subject={this.state.selected_subject}
+                          subject_change={this.subject_change}/>
+        </If>
+        <DisplayComponent contractors={this.state.contractors} url={this.props.root.url}/>
 
         <Route path={this.props.root.url(':id(\\d+):_extra')} render={props => (
           <ConModal id={props.match.params.id}
diff --git a/src/components/contractors/Grid.js b/src/components/contractors/Grid.js
deleted file mode 100644
index 0bb89e48..00000000
--- a/src/components/contractors/Grid.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import {Link} from 'react-router-dom'
-import Select from 'react-select'
-import 'react-select/dist/react-select.css'
-import { If } from '../shared/Tools'
-
-const Grid = props => {
-  let description = ''
-  if (props.selected_subject) {
-    const msg_id_suffix = props.contractors.length === 1 ? 'single' : 'plural'
-    description = props.root.get_text('subject_filter_summary_' + msg_id_suffix, {
-      count: props.contractors.length,
-      subject: props.selected_subject.name,
-    })
-  }
-  return (
-    <div className="tcs-grid">
-      <If v={props.config.subject_filter}>
-        <div className="subject-select">
-          <Select
-            value={props.selected_subject && props.selected_subject.id}
-            onChange={props.subject_change}
-            labelKey='name'
-            valueKey='id'
-            options={props.subjects}/>
-        </div>
-        <div className="tcs-summary">
-          {description}
-        </div>
-      </If>
-
-      <div className="tcs-flex">
-        {props.contractors.map((contractor, i) => (
-          <div key={i} className="tcs-col">
-            <Link to={props.root.url(contractor.link)} className="tcs-box">
-              <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
-              <h3 className="tcs-name">{contractor.name}</h3>
-            </Link>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default Grid
-
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
new file mode 100644
index 00000000..7ef5d073
--- /dev/null
+++ b/src/components/contractors/List.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import {Link} from 'react-router-dom'
+
+export const Grid = ({contractors, url}) => (
+  <div className="tcs-flex">
+    {contractors.map((contractor, i) => (
+      <div key={i} className="tcs-col">
+        <Link to={url(contractor.link)} className="tcs-box">
+          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+          <h3 className="tcs-name">{contractor.name}</h3>
+        </Link>
+      </div>
+    ))}
+  </div>
+)
+
+export const List = ({contractors, url}) => (
+  <div className="tcs-list">
+    {contractors.map((contractor, i) => (
+      <div key={i}>
+        <Link to={url(contractor.link)}>
+          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+          <h3 className="tcs-name">{contractor.name}</h3>
+          <div><b>{contractor.tag_line}</b></div>
+          <div>{contractor.primary_description}</div>
+        </Link>
+      </div>
+    ))}
+  </div>
+)
diff --git a/src/components/contractors/SelectSubjects.js b/src/components/contractors/SelectSubjects.js
new file mode 100644
index 00000000..0920e1f4
--- /dev/null
+++ b/src/components/contractors/SelectSubjects.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import Select from 'react-select'
+import 'react-select/dist/react-select.css'
+
+const SelectSubject = ({get_text, contractors, subjects, selected_subject, subject_change}) => {
+  let description = ''
+  if (selected_subject) {
+    const msg_id_suffix = contractors.length === 1 ? 'single' : 'plural'
+    description = get_text('subject_filter_summary_' + msg_id_suffix, {
+      count: contractors.length,
+      subject: selected_subject.name,
+    })
+  }
+  return [
+    <div key="select" className="subject-select">
+      <Select
+        value={selected_subject && selected_subject.id}
+        onChange={subject_change}
+        labelKey='name'
+        valueKey='id'
+        options={subjects}/>
+    </div>,
+    <div key="summary" className="tcs-summary">
+      {description}
+    </div>
+  ]
+}
+
+export default SelectSubject
diff --git a/src/index.js b/src/index.js
index f5fb49ba..2d262117 100644
--- a/src/index.js
+++ b/src/index.js
@@ -40,7 +40,7 @@ const STRINGS = {
   subject_filter_summary_plural: '{subject}: showing {count} results',
 }
 
-const MODES = ['grid', 'enquiry', 'enquiry-modal']
+const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
 const ROUTER_MODES = ['hash', 'history']
 
 window.socket = function (public_key, config) {
diff --git a/src/main.scss b/src/main.scss
index e232225e..c0041936 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -22,6 +22,7 @@
 @import './styles/enquiry';
 @import './styles/enquiry-button';
 @import './styles/tools';
+@import './styles/contractors';
 @import './styles/grid';
 @import './styles/input';
 @import './styles/modal';
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
new file mode 100644
index 00000000..4fa24a3c
--- /dev/null
+++ b/src/styles/contractors.scss
@@ -0,0 +1,25 @@
+.tcs-contractors {
+  padding: 10px;
+}
+
+.subject-select {
+  width: 50%;
+  margin: 0 0 0 auto;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+
+@media(max-width: 600px) {
+  .subject-select {
+    width: 100%;
+  }
+}
+
+@media(max-width: 400px) {
+  .subject-select {
+    width: 100%;
+  }
+  .tcs-contractors {
+    padding: 10px 2px;
+  }
+}
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
index f48fff20..3f0fea94 100644
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -1,16 +1,5 @@
 @import '../conf';
 
-.tcs-grid {
-  padding: 10px;
-}
-
-.subject-select {
-  width: 50%;
-  margin: 0 0 0 auto;
-  padding: 0 2px;
-  box-sizing: border-box;
-}
-
 .tcs-summary {
   padding: 5px 2px 0;
   text-align: right;
@@ -19,12 +8,6 @@
   min-height: 18px;
 }
 
-@media(max-width: 600px) {
-  .subject-select {
-    width: 100%;
-  }
-}
-
 .tcs-flex {
   display: flex;
   flex-wrap: wrap;
@@ -68,12 +51,6 @@
 }
 
 @media(max-width: 400px) {
-  .subject-select {
-    width: 100%;
-  }
-  .tcs-grid {
-    padding: 10px 2px;
-  }
   .tcs-col {
     padding: 10px 2px 20px;
   }
diff --git a/src/tests/index.test.js b/src/tests/index.test.js
index 8ef94250..e822a139 100644
--- a/src/tests/index.test.js
+++ b/src/tests/index.test.js
@@ -12,7 +12,7 @@ it('renders grid', () => {
   const r = window.socket('good')
   expect(r.goto).toBeTruthy()
   expect(r.config.contractor_filter).toEqual({})
-  expect(div.querySelectorAll('.tcs-grid').length).toBe(1)
+  expect(div.querySelectorAll('.tcs-contractors').length).toBe(1)
   // console.log(pretty_html(div.innerHTML))
 })
 

From cb6c528e0ff3fe709dcbb545d4b0b5c9fc4ef525 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 12 Jan 2018 18:06:35 +0000
Subject: [PATCH 02/15] pretty list view

---
 public/index.html                         |  9 +++-
 src/components/contractors/Contractors.js |  2 +-
 src/components/contractors/List.js        | 38 ++++++++++++----
 src/conf.scss                             |  4 +-
 src/index.js                              |  1 +
 src/main.scss                             |  1 +
 src/styles/con-modal.scss                 | 16 -------
 src/styles/contractors.scss               | 42 ++++++++++++++++++
 src/styles/grid.scss                      | 48 ++++++++------------
 src/styles/list.scss                      | 53 +++++++++++++++++++++++
 10 files changed, 157 insertions(+), 57 deletions(-)
 create mode 100644 src/styles/list.scss

diff --git a/public/index.html b/public/index.html
index 25907bcf..c4968693 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,6 +27,7 @@
       <div id="socket1"></div>
       <div id="socket2"></div>
       <div id="socket3"></div>
+      <div id="socket4"></div>
     </main>
   </body>
   <script>
@@ -46,12 +47,18 @@
     socket(public_key, {
       element: '#socket2',
       router_mode: 'history',
-      mode: 'enquiry',
       api_root: api_root,
+      mode: 'list',
     })
     socket(public_key, {
       element: '#socket3',
       router_mode: 'history',
+      mode: 'enquiry',
+      api_root: api_root,
+    })
+    socket(public_key, {
+      element: '#socket4',
+      router_mode: 'history',
       mode: 'enquiry-modal',
       api_root: api_root,
     })
diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
index 557553c5..4b3ba965 100644
--- a/src/components/contractors/Contractors.js
+++ b/src/components/contractors/Contractors.js
@@ -87,7 +87,7 @@ class Contractors extends Component {
                           selected_subject={this.state.selected_subject}
                           subject_change={this.subject_change}/>
         </If>
-        <DisplayComponent contractors={this.state.contractors} url={this.props.root.url}/>
+        <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
 
         <Route path={this.props.root.url(':id(\\d+):_extra')} render={props => (
           <ConModal id={props.match.params.id}
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 7ef5d073..1e55167f 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -1,11 +1,12 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
+import { Location, Markdown } from '../shared/Tools'
 
-export const Grid = ({contractors, url}) => (
+export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
     {contractors.map((contractor, i) => (
       <div key={i} className="tcs-col">
-        <Link to={url(contractor.link)} className="tcs-box">
+        <Link to={root.url(contractor.link)} className="tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <h3 className="tcs-name">{contractor.name}</h3>
         </Link>
@@ -14,15 +15,36 @@ export const Grid = ({contractors, url}) => (
   </div>
 )
 
-export const List = ({contractors, url}) => (
+export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
       <div key={i}>
-        <Link to={url(contractor.link)}>
-          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
-          <h3 className="tcs-name">{contractor.name}</h3>
-          <div><b>{contractor.tag_line}</b></div>
-          <div>{contractor.primary_description}</div>
+        <Link to={root.url(contractor.link)} className="tcs-box">
+          <div>
+            <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+            <div className="tcs-location">
+              <Location/>
+              <span>{contractor.town}</span>
+            </div>
+          </div>
+
+          <div className="tcs-info">
+            <h3 className="tcs-name">{contractor.name}</h3>
+            <div className="tcs-aside">
+              {contractor.tag_line}
+            </div>
+            <div className="tcs-primary-description">
+              <Markdown content={contractor.primary_description}/>
+            </div>
+            <div className="tcs-fadeout"/>
+          </div>
+
+          <div className="tcs-box-extra">
+            <div className="tcs-shim"/>
+            <button>
+              {root.get_text('view_profile')}
+            </button>
+          </div>
         </Link>
       </div>
     ))}
diff --git a/src/conf.scss b/src/conf.scss
index 339986f2..4bb754fd 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -6,6 +6,8 @@ $back-colour: 35;
 $brand-colour: #016997;
 // highlight sections of modals
 $highlight: $brand-colour;
+// ligher, greyer variant of $brand-colour
+$location-fill: #6f9aad;
 // svgs on modals
 $svg-size: 22px;
 // section on right (with image) on modals
@@ -19,7 +21,7 @@ $button-colour: $highlight;
   display: inline-block;
   background-color: $button-colour;
   color: white;
-  border-radius: 5px;
+  border-radius: 4px;
   font-size: 17px;
   padding: 8px 12px;
   border: none;
diff --git a/src/index.js b/src/index.js
index 2d262117..7f7ccd44 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,6 +38,7 @@ const STRINGS = {
   subject_filter: 'Filter by subject',
   subject_filter_summary_single: '{subject}: showing 1 result',
   subject_filter_summary_plural: '{subject}: showing {count} results',
+  view_profile: 'View Profile',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
diff --git a/src/main.scss b/src/main.scss
index c0041936..6cf0800d 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -24,6 +24,7 @@
 @import './styles/tools';
 @import './styles/contractors';
 @import './styles/grid';
+@import './styles/list';
 @import './styles/input';
 @import './styles/modal';
 @import './styles/subject-select';
diff --git a/src/styles/con-modal.scss b/src/styles/con-modal.scss
index c39a5202..216298a9 100644
--- a/src/styles/con-modal.scss
+++ b/src/styles/con-modal.scss
@@ -1,12 +1,5 @@
 @import '../conf';
 
-.tcs-aside {
-  font-size: 22px;
-  margin-bottom: 10px;
-  color: $highlight;
-  min-height: 28px;
-}
-
 .tcs-body {
   max-height: calc(94vh - 140px);
   overflow-y: auto;
@@ -43,15 +36,6 @@
     margin: auto;
   }
 
-  .tcs-location {
-    margin: 10px 0;
-    span {
-      padding-top: 4px;
-      vertical-align: top;
-      font-weight: 500;
-    }
-  }
-
   button {
     @extend %tcs-button;
     margin: 10px auto 0;
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 4fa24a3c..523f34b4 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -1,3 +1,5 @@
+@import '../conf';
+
 .tcs-contractors {
   padding: 10px;
 }
@@ -23,3 +25,43 @@
     padding: 10px 2px;
   }
 }
+
+.tcs-box {
+  text-decoration: none;
+  user-select: none;
+  h3.tcs-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    padding: 0 0 3px;
+  }
+  img.tcs-thumb {
+    border-radius: $border-radius;
+    width: 150px;
+    height: 150px;
+    margin: 0;
+  }
+}
+
+.tcs-aside {
+  font-size: 20px;
+  margin-bottom: 10px;
+  max-height: 28px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tcs-location {
+  text-align: center;
+  margin: 5px 0;
+  span {
+    padding-top: 4px;
+    vertical-align: top;
+    font-weight: 500;
+  }
+  .tcs-svg {
+    fill: $location-fill;
+  }
+}
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
index 3f0fea94..d53f7e8a 100644
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -11,43 +11,31 @@
 .tcs-flex {
   display: flex;
   flex-wrap: wrap;
-}
-
-.tcs-col {
-  flex-grow: 1;
-  padding: 10px 15px 20px;
-}
-
-.tcs-box {
-  border-radius: $border-radius;
-  display: block;
-  background-color: #005377;
-  color: white;
-  text-decoration: none;
-  width: 150px;
-  margin: 0 auto;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
-  user-select: none;
-  h3 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  img.tcs-thumb {
-    border-radius: $border-radius $border-radius 0 0;
+  .tcs-box {
+    display: block;
+    border-radius: $border-radius;
+    background-color: #005377;
+    color: white;
     width: 150px;
-    height: 150px;
-    margin: 0;
+    margin: 0 auto;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
+    user-select: none;
   }
-  .tcs-name {
+  h3.tcs-name {
     display: block;
     width: 100%;
     font-size: 15px;
     font-weight: 500;
-    margin: 0;
-    padding: 0 0 3px;
   }
+  img.tcs-thumb {
+    border-radius: $border-radius $border-radius 0 0;
+  }
+}
+
+.tcs-col {
+  flex-grow: 1;
+  padding: 10px 15px 20px;
 }
 
 @media(max-width: 400px) {
diff --git a/src/styles/list.scss b/src/styles/list.scss
new file mode 100644
index 00000000..98dd4702
--- /dev/null
+++ b/src/styles/list.scss
@@ -0,0 +1,53 @@
+@import '../conf';
+$box-height: 220px;
+.tcs-list {
+  .tcs-box {
+    color: #444;
+    display: flex;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+    max-height: $box-height;
+    //border: 1px dashed black;
+  }
+  h3.tcs-name {
+    font-size: 26px;
+  }
+  .tcs-info {
+    max-width: 480px;
+    padding: 0 10px;
+  }
+  // height of title and tag line and tcs-box padding
+  $other-height: 100px;
+  .tcs-primary-description {
+    color: #888;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $box-height - $other-height;
+  }
+  .tcs-fadeout {
+    position: relative;
+    bottom: 60px;
+    height: 60px;
+    width: 100%;
+    background: linear-gradient(
+                    rgba(255, 255, 255, 0) 0%,
+                    rgba(255, 255, 255, 1) 100%
+    );
+  }
+
+  .tcs-box-extra {
+    flex: 0 0 140px;
+    .tcs-shim {
+      height: 150px;
+    }
+  }
+
+  .tcs-location, button {
+    height: 40px;
+  }
+  button {
+    @extend %tcs-button;
+    margin: 0;
+    width: 100%;
+  }
+}

From c94ac7da01845b3c59242c6f8e1abe3cd840b9b2 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 12 Jan 2018 20:31:12 +0000
Subject: [PATCH 03/15] prettier list view

---
 src/components/contractors/ConModal.js  | 10 +++---
 src/components/contractors/List.js      | 17 +++++-----
 src/components/enquiry/EnquiryButton.js |  2 +-
 src/components/shared/EnquiryForm.js    |  2 +-
 src/conf.scss                           | 18 +---------
 src/main.scss                           |  3 +-
 src/styles/con-modal.scss               |  5 ++-
 src/styles/contractors.scss             |  7 ++--
 src/styles/enquiry-button.scss          |  5 ---
 src/styles/enquiry.scss                 |  3 +-
 src/styles/grid.scss                    |  3 --
 src/styles/list.scss                    | 45 ++++++++++++-------------
 12 files changed, 46 insertions(+), 74 deletions(-)
 delete mode 100644 src/styles/enquiry-button.scss

diff --git a/src/components/contractors/ConModal.js b/src/components/contractors/ConModal.js
index d6706da0..459aba17 100644
--- a/src/components/contractors/ConModal.js
+++ b/src/components/contractors/ConModal.js
@@ -12,7 +12,7 @@ class ConModal extends Component {
     this.con_id = parseInt(this.props.id, 10)
     this.state = {
       show_enquiry: false,
-      transition_class: ''
+      transition_class: '',
     }
     this.get_contractor = this.get_contractor.bind(this)
     this.switch_view = this.switch_view.bind(this)
@@ -27,7 +27,7 @@ class ConModal extends Component {
   }
 
   switch_view () {
-    this.setState({transition_class: ' leave'})
+    this.setState({transition_class: ' in-trans'})
     setTimeout(() => {
       this.setState({show_enquiry: !this.state.show_enquiry, transition_class: ''})
     }, TRANSITION_TIME)
@@ -62,10 +62,10 @@ class ConModal extends Component {
             </div>
 
             <IfElse v={this.state.show_enquiry}>
-              <button onClick={this.switch_view}>
+              <button className="tcs-button" onClick={this.switch_view}>
                 {this.props.root.get_text('contractor_details_button', {contractor_name: contractor.name})}
               </button>
-              <button onClick={this.switch_view}>
+              <button className="tcs-button" onClick={this.switch_view}>
                 {this.props.root.get_text('contractor_enquiry_button', {contractor_name: contractor.name})}
               </button>
             </IfElse>
@@ -73,7 +73,7 @@ class ConModal extends Component {
           <div className="tcs-content">
             <div className="tcs-aside tcs-md">{contractor.tag_line}</div>
             <div className={'tcs-scroll con-modal-transition' + this.state.transition_class}
-                 style={{transition: `all ${TRANSITION_TIME}ms ease`}}>
+                 style={{transition: `all ${TRANSITION_TIME}ms ease-in-out`}}>
 
               <IfElse v={this.state.show_enquiry}>
                 <EnquiryForm contractor={contractor} root={this.props.root} config={this.props.config}/>
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 1e55167f..e2d2994f 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -20,12 +20,11 @@ export const List = ({contractors, root}) => (
     {contractors.map((contractor, i) => (
       <div key={i}>
         <Link to={root.url(contractor.link)} className="tcs-box">
-          <div>
+          <div className="tcs-image-col">
             <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
-            <div className="tcs-location">
-              <Location/>
-              <span>{contractor.town}</span>
-            </div>
+            <button className="tcs-button">
+              {root.get_text('view_profile')}
+            </button>
           </div>
 
           <div className="tcs-info">
@@ -40,10 +39,10 @@ export const List = ({contractors, root}) => (
           </div>
 
           <div className="tcs-box-extra">
-            <div className="tcs-shim"/>
-            <button>
-              {root.get_text('view_profile')}
-            </button>
+            <div className="tcs-location">
+              <Location/>
+              <span>{contractor.town}</span>
+            </div>
           </div>
         </Link>
       </div>
diff --git a/src/components/enquiry/EnquiryButton.js b/src/components/enquiry/EnquiryButton.js
index cd24e756..1921a714 100644
--- a/src/components/enquiry/EnquiryButton.js
+++ b/src/components/enquiry/EnquiryButton.js
@@ -5,7 +5,7 @@ import EnquiryModal from './EnquiryModal'
 const EnquiryButton = ({root, config}) => (
   <div className="tcs-app">
     <div className="tcs-enquiry-modal">
-      <Link to={root.url('enquiry')} className="tcs-enquiry-button">
+      <Link to={root.url('enquiry')} className="tcs-button">
         {root.get_text('enquiry_button')}
       </Link>
 
diff --git a/src/components/shared/EnquiryForm.js b/src/components/shared/EnquiryForm.js
index 79a87472..3978772f 100644
--- a/src/components/shared/EnquiryForm.js
+++ b/src/components/shared/EnquiryForm.js
@@ -120,7 +120,7 @@ class EnquiryForm extends Component {
               </If>
 
               <div className="tcs-field tcs-submit">
-                <button type="submit">
+                <button className="tcs-button" type="submit">
                   {this.props.root.get_text('submit_enquiry')}
                 </button>
               </div>
diff --git a/src/conf.scss b/src/conf.scss
index 4bb754fd..0d365e1a 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -16,20 +16,4 @@ $extra-width: 200px;
 $size-sm: 768px;
 // contact button on modals
 $button-colour: $highlight;
-
-%tcs-button {
-  display: inline-block;
-  background-color: $button-colour;
-  color: white;
-  border-radius: 4px;
-  font-size: 17px;
-  padding: 8px 12px;
-  border: none;
-  transition: all .3s ease;
-  outline: none;
-  cursor: pointer;
-  text-decoration: none;
-  &:hover {
-    background-color: darken($button-colour, 20%);
-  }
-}
+$dft-image-size: 150px;
diff --git a/src/main.scss b/src/main.scss
index 6cf0800d..54208a12 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,7 +4,7 @@
   display: inline-block;
   background-color: $button-colour;
   color: white;
-  border-radius: 5px;
+  border-radius: 4px;
   font-size: 17px;
   padding: 8px 12px;
   border: none;
@@ -20,7 +20,6 @@
 @import './styles/con-details';
 @import './styles/con-modal';
 @import './styles/enquiry';
-@import './styles/enquiry-button';
 @import './styles/tools';
 @import './styles/contractors';
 @import './styles/grid';
diff --git a/src/styles/con-modal.scss b/src/styles/con-modal.scss
index 216298a9..d6275a1b 100644
--- a/src/styles/con-modal.scss
+++ b/src/styles/con-modal.scss
@@ -36,8 +36,7 @@
     margin: auto;
   }
 
-  button {
-    @extend %tcs-button;
+  .tcs-button {
     margin: 10px auto 0;
     width: 100%;
   }
@@ -46,7 +45,7 @@
 .con-modal-transition {
   opacity: 1;
   transform: translate(0, 0);
-  &.leave {
+  &.in-trans {
     opacity: 0;
     transform: translate(0, -10px);
   }
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 523f34b4..bf146697 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -37,10 +37,11 @@
     padding: 0 0 3px;
   }
   img.tcs-thumb {
-    border-radius: $border-radius;
-    width: 150px;
-    height: 150px;
+    border-radius: $border-radius $border-radius 0 0;
+    width: $dft-image-size;
+    height: $dft-image-size;
     margin: 0;
+    display: block;
   }
 }
 
diff --git a/src/styles/enquiry-button.scss b/src/styles/enquiry-button.scss
deleted file mode 100644
index 47b5ef7b..00000000
--- a/src/styles/enquiry-button.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../conf';
-
-.tcs-enquiry-button {
-  @extend %tcs-button;
-}
diff --git a/src/styles/enquiry.scss b/src/styles/enquiry.scss
index 7772a142..336d5fa1 100644
--- a/src/styles/enquiry.scss
+++ b/src/styles/enquiry.scss
@@ -18,8 +18,7 @@ form.tcs {
 
 .tcs-submit {
   text-align: center;
-  button {
-    @extend %tcs-button;
+  .tcs-button {
     font-size: 17px;
     padding: 10px 12px;
   }
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
index d53f7e8a..5f46a038 100644
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -28,9 +28,6 @@
     font-size: 15px;
     font-weight: 500;
   }
-  img.tcs-thumb {
-    border-radius: $border-radius $border-radius 0 0;
-  }
 }
 
 .tcs-col {
diff --git a/src/styles/list.scss b/src/styles/list.scss
index 98dd4702..8987f25f 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -1,23 +1,34 @@
 @import '../conf';
-$box-height: 220px;
+$box-height: 186px;
+
 .tcs-list {
   .tcs-box {
+    box-sizing: content-box;
     color: #444;
     display: flex;
-    padding: 10px 0;
-    border-bottom: 1px solid #ccc;
-    max-height: $box-height;
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+    height: $box-height;
     //border: 1px dashed black;
   }
-  h3.tcs-name {
-    font-size: 26px;
+  .tcs-image-col {
+    flex: 0 0 $dft-image-size;
+  }
+  .tcs-button {
+    width: 100%;
+    border-radius: 0 0 $border-radius $border-radius;
+    height: $box-height - $dft-image-size;
   }
+
   .tcs-info {
     max-width: 480px;
     padding: 0 10px;
   }
-  // height of title and tag line and tcs-box padding
-  $other-height: 100px;
+  h3.tcs-name {
+    font-size: 26px;
+  }
+  // height of title and tag line
+  $other-height: 80px;
   .tcs-primary-description {
     color: #888;
     overflow: hidden;
@@ -26,8 +37,8 @@ $box-height: 220px;
   }
   .tcs-fadeout {
     position: relative;
-    bottom: 60px;
-    height: 60px;
+    bottom: 40px;
+    height: 40px;
     width: 100%;
     background: linear-gradient(
                     rgba(255, 255, 255, 0) 0%,
@@ -36,18 +47,6 @@ $box-height: 220px;
   }
 
   .tcs-box-extra {
-    flex: 0 0 140px;
-    .tcs-shim {
-      height: 150px;
-    }
-  }
-
-  .tcs-location, button {
-    height: 40px;
-  }
-  button {
-    @extend %tcs-button;
-    margin: 0;
-    width: 100%;
+    flex: 0 0 150px;
   }
 }

From 0c2c7d3b6b17244c33f3692442ad46804c9f971b Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 12 Jan 2018 22:17:48 +0000
Subject: [PATCH 04/15] sexy stars for lists

---
 src/components/contractors/List.js |  4 +-
 src/components/shared/Tools.js     | 61 ++++++++++++++++++++++++++++++
 src/conf.scss                      |  1 +
 src/styles/tools.scss              |  6 +++
 4 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index e2d2994f..58246de4 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
-import { Location, Markdown } from '../shared/Tools'
+import {Footer, Location, Markdown, Stars} from '../shared/Tools'
 
 export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
@@ -39,6 +39,7 @@ export const List = ({contractors, root}) => (
           </div>
 
           <div className="tcs-box-extra">
+            <Stars score={3 + Math.random() * 2} />
             <div className="tcs-location">
               <Location/>
               <span>{contractor.town}</span>
@@ -47,5 +48,6 @@ export const List = ({contractors, root}) => (
         </Link>
       </div>
     ))}
+    <Footer/>
   </div>
 )
diff --git a/src/components/shared/Tools.js b/src/components/shared/Tools.js
index 7081c235..9af0b7eb 100644
--- a/src/components/shared/Tools.js
+++ b/src/components/shared/Tools.js
@@ -45,6 +45,67 @@ export const Location = () => (
   </svg>
 )
 
+const STAR_PATH = 'M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 ' +
+  '236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 ' +
+  '49-41t49 41l225 455 502 73q56 9 56 46z'
+const STAR_COLOUR = '#f8be15'
+const RAW_STAR_GAP = 200
+// standard svg size
+const RAW_STAR_SIZE = 1792
+const RAW_STAR_STEP = RAW_STAR_SIZE + RAW_STAR_GAP
+const NO_STARS = 5
+// makes 5 stars 140 px wide
+const STAR_SIZE = 31
+const STAR_WIDTH = Math.round(RAW_STAR_SIZE / RAW_STAR_STEP * STAR_SIZE)
+let star_def_id = 0
+const int_range = v => Array.apply(null, {length: v}).map(Number.call, Number)
+
+export const Stars = ({score}) => {
+  // defined shapes need globally unique ids
+  const clip_id = `fill-clip-${star_def_id}`
+  const stroked_id =`stroked-${star_def_id}`
+  const filled_id =`filled-${star_def_id}`
+  star_def_id += 1
+  score = score || 5
+  const stroke_stars = int_range(NO_STARS)
+  const full_stars = int_range(Math.ceil(score))
+  // // tweak score to make it fit in better with stroke
+  let score_stars = score
+  let score_prop = score % 1
+  if (0.95 > score_prop && score_prop > 0.7) {
+    score_stars -= 0.15
+  } else if (0.05 < score_prop && score_prop < 0.3) {
+    score_stars += 0.15
+  }
+  return (
+    <div className="tcs-stars">
+      <svg style={{width: STAR_WIDTH * NO_STARS, height: STAR_SIZE}}
+           className='tcs-svg'
+           viewBox={`0 0 ${RAW_STAR_STEP * NO_STARS} 1792`}
+           xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <path id={stroked_id} d={STAR_PATH} fill="white" fillOpacity="0" stroke={STAR_COLOUR} strokeWidth={80}/>
+          <path id={filled_id} d={STAR_PATH} fill={STAR_COLOUR}/>
+          <clipPath id={clip_id}>
+            <rect x="0" y="0" width={RAW_STAR_STEP * score_stars} height="1792" />
+          </clipPath>
+        </defs>
+        {stroke_stars.map(i => (
+          <use key={i} xlinkHref={`#${stroked_id}`} x={RAW_STAR_STEP * i} y="0" />
+        ))}
+        <g style={{clipPath: `url(#${clip_id})`}}>
+          {full_stars.map(i => (
+            <use key={i} xlinkHref={`#${filled_id}`} x={RAW_STAR_STEP * i} y="0" />
+          ))}
+        </g>
+      </svg>
+      <div>
+        {Math.round(score * 10) / 10} / {NO_STARS}
+      </div>
+    </div>
+  )
+}
+
 export const If = ({v, children}) => (v ? children : <div/>)
 
 export const IfElse = ({v, children}) => {
diff --git a/src/conf.scss b/src/conf.scss
index 0d365e1a..8cc63d7e 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -16,4 +16,5 @@ $extra-width: 200px;
 $size-sm: 768px;
 // contact button on modals
 $button-colour: $highlight;
+// size used for images in grid and list view
 $dft-image-size: 150px;
diff --git a/src/styles/tools.scss b/src/styles/tools.scss
index 4732ff23..b6625401 100644
--- a/src/styles/tools.scss
+++ b/src/styles/tools.scss
@@ -77,3 +77,9 @@ svg.tcs-close {
     }
   }
 }
+
+.tcs-stars {
+  text-align: center;
+  line-height: 16px;
+  margin-bottom: 10px;
+}

From 42422a42d1d866dc23d1ccabc0202811daf9a6dc Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 19 Jan 2018 15:40:58 +0000
Subject: [PATCH 05/15] css grid and proper stars

---
 src/components/contractors/Contractors.js |  1 +
 src/components/contractors/List.js        | 50 ++++++++--------
 src/components/contractors/Stars.js       | 70 +++++++++++++++++++++++
 src/components/shared/Tools.js            | 61 --------------------
 src/index.js                              |  1 +
 src/styles/list.scss                      | 31 +++++-----
 src/styles/tools.scss                     |  8 ++-
 7 files changed, 120 insertions(+), 102 deletions(-)
 create mode 100644 src/components/contractors/Stars.js

diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
index 4b3ba965..b3636a43 100644
--- a/src/components/contractors/Contractors.js
+++ b/src/components/contractors/Contractors.js
@@ -53,6 +53,7 @@ class Contractors extends Component {
     const sub_id = selected_subject && selected_subject.id
     const args = Object.assign({}, this.props.config.contractor_filter, {subject: sub_id || null})
     const contractors = await this.props.root.requests.get('contractors', args)
+    contractors.reverse()
     this.props.config.event_callback('updated_contractors', contractors)
     this.setState({
       contractors,
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 58246de4..302ee105 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
-import {Footer, Location, Markdown, Stars} from '../shared/Tools'
+import {Footer, Location, Markdown} from '../shared/Tools'
+import Stars from './Stars'
 
 export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
@@ -18,35 +19,34 @@ export const Grid = ({contractors, root}) => (
 export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
-      <div key={i}>
-        <Link to={root.url(contractor.link)} className="tcs-box">
-          <div className="tcs-image-col">
-            <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
-            <button className="tcs-button">
-              {root.get_text('view_profile')}
-            </button>
-          </div>
+      <Link key={i} to={root.url(contractor.link)} className="tcs-box">
+        <div className="tcs-image-col">
+          <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
+          <button className="tcs-button">
+            {root.get_text('view_profile')}
+          </button>
+        </div>
 
-          <div className="tcs-info">
-            <h3 className="tcs-name">{contractor.name}</h3>
-            <div className="tcs-aside">
-              {contractor.tag_line}
-            </div>
-            <div className="tcs-primary-description">
-              <Markdown content={contractor.primary_description}/>
-            </div>
+        <div className="tcs-info">
+          <h3 className="tcs-name">{contractor.name}</h3>
+          <div className="tcs-aside">
+            {contractor.tag_line}
+          </div>
+          <div className="tcs-primary-description">
+            <Markdown content={contractor.primary_description}/>
             <div className="tcs-fadeout"/>
           </div>
+        </div>
+
+        <div className="tcs-box-extra">
+          <Stars contractor={contractor} root={root}/>
 
-          <div className="tcs-box-extra">
-            <Stars score={3 + Math.random() * 2} />
-            <div className="tcs-location">
-              <Location/>
-              <span>{contractor.town}</span>
-            </div>
+          <div className="tcs-location">
+            <Location/>
+            <span>{contractor.town}</span>
           </div>
-        </Link>
-      </div>
+        </div>
+      </Link>
     ))}
     <Footer/>
   </div>
diff --git a/src/components/contractors/Stars.js b/src/components/contractors/Stars.js
new file mode 100644
index 00000000..78caee00
--- /dev/null
+++ b/src/components/contractors/Stars.js
@@ -0,0 +1,70 @@
+import React from 'react'
+
+const STAR_PATH = 'M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 ' +
+  '236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 ' +
+  '49-41t49 41l225 455 502 73q56 9 56 46z'
+const STAR_COLOUR = '#f8be15'
+const RAW_STAR_GAP = 200
+// standard svg size
+const RAW_STAR_SIZE = 1792
+const RAW_STAR_STEP = RAW_STAR_SIZE + RAW_STAR_GAP
+const NO_STARS = 5
+// makes 5 stars 140 px wide
+const STAR_SIZE = 31
+const STAR_WIDTH = Math.round(RAW_STAR_SIZE / RAW_STAR_STEP * STAR_SIZE)
+let star_def_id = 0
+const int_range = v => Array.apply(null, {length: v}).map(Number.call, Number)
+
+const Stars = ({contractor, root}) => {
+  if (typeof contractor.review_rating !== 'number') {
+    return null
+  }
+  // defined shapes need globally unique ids
+  const clip_id = `fill-clip-${star_def_id}`
+  const stroked_id =`stroked-${star_def_id}`
+  const filled_id =`filled-${star_def_id}`
+  star_def_id += 1
+  const score = contractor.review_rating
+  const stroke_stars = int_range(NO_STARS)
+  const full_stars = int_range(Math.ceil(score))
+  // tweak score to make it fit in better with stroke
+  let score_stars = score
+  let score_prop = score % 1
+  if (0.95 > score_prop && score_prop > 0.7) {
+    score_stars -= 0.15
+  } else if (0.05 < score_prop && score_prop < 0.3) {
+    score_stars += 0.15
+  }
+  const comment = typeof contractor.review_duration === 'number' &&
+    root.get_text('review_hours', {hours: Math.round(contractor.review_duration / 3600)})
+  return (
+    <div className="tcs-stars">
+      <svg style={{width: STAR_WIDTH * NO_STARS, height: STAR_SIZE}}
+           className='tcs-svg'
+           viewBox={`0 0 ${RAW_STAR_STEP * NO_STARS} 1792`}
+           xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <path id={stroked_id} d={STAR_PATH} fill="white" fillOpacity="0" stroke={STAR_COLOUR} strokeWidth={80}/>
+          <path id={filled_id} d={STAR_PATH} fill={STAR_COLOUR}/>
+          <clipPath id={clip_id}>
+            <rect x="0" y="0" width={RAW_STAR_STEP * score_stars} height="1792" />
+          </clipPath>
+        </defs>
+        {stroke_stars.map(i => (
+          <use key={i} xlinkHref={`#${stroked_id}`} x={RAW_STAR_STEP * i} y="0" />
+        ))}
+        <g style={{clipPath: `url(#${clip_id})`}}>
+          {full_stars.map(i => (
+            <use key={i} xlinkHref={`#${filled_id}`} x={RAW_STAR_STEP * i} y="0" />
+          ))}
+        </g>
+      </svg>
+      <div>
+        {/*<span className="tcs-number">{Math.round(score * 10) / 10}</span>*/}
+        {comment && <span className="tcs-comment">{comment}</span>}
+      </div>
+    </div>
+  )
+}
+
+export default Stars
diff --git a/src/components/shared/Tools.js b/src/components/shared/Tools.js
index 9af0b7eb..7081c235 100644
--- a/src/components/shared/Tools.js
+++ b/src/components/shared/Tools.js
@@ -45,67 +45,6 @@ export const Location = () => (
   </svg>
 )
 
-const STAR_PATH = 'M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 ' +
-  '236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 ' +
-  '49-41t49 41l225 455 502 73q56 9 56 46z'
-const STAR_COLOUR = '#f8be15'
-const RAW_STAR_GAP = 200
-// standard svg size
-const RAW_STAR_SIZE = 1792
-const RAW_STAR_STEP = RAW_STAR_SIZE + RAW_STAR_GAP
-const NO_STARS = 5
-// makes 5 stars 140 px wide
-const STAR_SIZE = 31
-const STAR_WIDTH = Math.round(RAW_STAR_SIZE / RAW_STAR_STEP * STAR_SIZE)
-let star_def_id = 0
-const int_range = v => Array.apply(null, {length: v}).map(Number.call, Number)
-
-export const Stars = ({score}) => {
-  // defined shapes need globally unique ids
-  const clip_id = `fill-clip-${star_def_id}`
-  const stroked_id =`stroked-${star_def_id}`
-  const filled_id =`filled-${star_def_id}`
-  star_def_id += 1
-  score = score || 5
-  const stroke_stars = int_range(NO_STARS)
-  const full_stars = int_range(Math.ceil(score))
-  // // tweak score to make it fit in better with stroke
-  let score_stars = score
-  let score_prop = score % 1
-  if (0.95 > score_prop && score_prop > 0.7) {
-    score_stars -= 0.15
-  } else if (0.05 < score_prop && score_prop < 0.3) {
-    score_stars += 0.15
-  }
-  return (
-    <div className="tcs-stars">
-      <svg style={{width: STAR_WIDTH * NO_STARS, height: STAR_SIZE}}
-           className='tcs-svg'
-           viewBox={`0 0 ${RAW_STAR_STEP * NO_STARS} 1792`}
-           xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <path id={stroked_id} d={STAR_PATH} fill="white" fillOpacity="0" stroke={STAR_COLOUR} strokeWidth={80}/>
-          <path id={filled_id} d={STAR_PATH} fill={STAR_COLOUR}/>
-          <clipPath id={clip_id}>
-            <rect x="0" y="0" width={RAW_STAR_STEP * score_stars} height="1792" />
-          </clipPath>
-        </defs>
-        {stroke_stars.map(i => (
-          <use key={i} xlinkHref={`#${stroked_id}`} x={RAW_STAR_STEP * i} y="0" />
-        ))}
-        <g style={{clipPath: `url(#${clip_id})`}}>
-          {full_stars.map(i => (
-            <use key={i} xlinkHref={`#${filled_id}`} x={RAW_STAR_STEP * i} y="0" />
-          ))}
-        </g>
-      </svg>
-      <div>
-        {Math.round(score * 10) / 10} / {NO_STARS}
-      </div>
-    </div>
-  )
-}
-
 export const If = ({v, children}) => (v ? children : <div/>)
 
 export const IfElse = ({v, children}) => {
diff --git a/src/index.js b/src/index.js
index 7f7ccd44..c897aaba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,6 +39,7 @@ const STRINGS = {
   subject_filter_summary_single: '{subject}: showing 1 result',
   subject_filter_summary_plural: '{subject}: showing {count} results',
   view_profile: 'View Profile',
+  review_hours: '({hours} hours)',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
diff --git a/src/styles/list.scss b/src/styles/list.scss
index 8987f25f..c8528af1 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -5,41 +5,38 @@ $box-height: 186px;
   .tcs-box {
     box-sizing: content-box;
     color: #444;
-    display: flex;
     padding: 15px 0;
     border-bottom: 1px solid #ddd;
-    height: $box-height;
+    display: grid;
+    grid-template-columns: $dft-image-size auto 180px;
     //border: 1px dashed black;
   }
-  .tcs-image-col {
-    flex: 0 0 $dft-image-size;
-  }
   .tcs-button {
     width: 100%;
     border-radius: 0 0 $border-radius $border-radius;
-    height: $box-height - $dft-image-size;
   }
 
   .tcs-info {
-    max-width: 480px;
+    min-width: 0;
     padding: 0 10px;
   }
   h3.tcs-name {
     font-size: 26px;
   }
-  // height of title and tag line
-  $other-height: 80px;
   .tcs-primary-description {
     color: #888;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: $box-height - $other-height;
+    display: grid;
+    grid-template-rows: 70px 40px;
+  }
+  .tcs-md {
+    grid-column: 1;
+    grid-row: 1 / span 2;
   }
   .tcs-fadeout {
-    position: relative;
-    bottom: 40px;
-    height: 40px;
-    width: 100%;
+    grid-column: 1;
+    grid-row: 2;
     background: linear-gradient(
                     rgba(255, 255, 255, 0) 0%,
                     rgba(255, 255, 255, 1) 100%
@@ -47,6 +44,10 @@ $box-height: 186px;
   }
 
   .tcs-box-extra {
-    flex: 0 0 150px;
+    display: grid;
+    grid-template-rows: 100px 1fr auto;
+    .tcs-stars {
+      grid-row: span 2;
+    }
   }
 }
diff --git a/src/styles/tools.scss b/src/styles/tools.scss
index b6625401..316c9254 100644
--- a/src/styles/tools.scss
+++ b/src/styles/tools.scss
@@ -81,5 +81,11 @@ svg.tcs-close {
 .tcs-stars {
   text-align: center;
   line-height: 16px;
-  margin-bottom: 10px;
+  margin-bottom: 4px;
+  .tcs-comment {
+    margin-top: 2px;
+    display: inline-block;
+    padding: 3px 6px;
+    color: #888;
+  }
 }

From b007c4b3d797cd1d5f3b93edcd0c2f00769b0622 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 19 Jan 2018 16:33:41 +0000
Subject: [PATCH 06/15] stars on modal

---
 package.json                           |  1 +
 src/components/contractors/ConModal.js |  3 +++
 src/components/contractors/Stars.js    | 15 +++++++++------
 src/main.scss                          |  1 +
 src/styles/con-modal.scss              |  4 ++++
 src/styles/contractors.scss            |  2 +-
 src/styles/stars.scss                  | 26 ++++++++++++++++++++++++++
 src/styles/tools.scss                  | 12 ------------
 yarn.lock                              | 11 +++++++++--
 9 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 src/styles/stars.scss

diff --git a/package.json b/package.json
index 5c951f8d..3c8a8cd2 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
     "react-select": "1.2.0",
+    "react-tooltip": "^3.4.0",
     "sass-loader": "^6.0.6",
     "shelljs": "0.8.0",
     "webpack": "^3.10.0",
diff --git a/src/components/contractors/ConModal.js b/src/components/contractors/ConModal.js
index 459aba17..a79c7e0b 100644
--- a/src/components/contractors/ConModal.js
+++ b/src/components/contractors/ConModal.js
@@ -3,6 +3,7 @@ import Modal from '../shared/Modal'
 import { Location, IfElse } from '../shared/Tools'
 import ConDetails from './ConDetails'
 import EnquiryForm from '../shared/EnquiryForm'
+import Stars from './Stars'
 
 const TRANSITION_TIME = 500
 
@@ -56,6 +57,8 @@ class ConModal extends Component {
           <div className="tcs-extra">
             <img src={contractor.photo} alt={contractor.name}/>
 
+            <Stars contractor={contractor} root={this.props.root}/>
+
             <div className="tcs-location">
               <Location/>
               <span>{contractor.town}</span>
diff --git a/src/components/contractors/Stars.js b/src/components/contractors/Stars.js
index 78caee00..14dfe5bc 100644
--- a/src/components/contractors/Stars.js
+++ b/src/components/contractors/Stars.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactTooltip from 'react-tooltip'
 
 const STAR_PATH = 'M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 ' +
   '236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 ' +
@@ -8,7 +9,7 @@ const RAW_STAR_GAP = 200
 // standard svg size
 const RAW_STAR_SIZE = 1792
 const RAW_STAR_STEP = RAW_STAR_SIZE + RAW_STAR_GAP
-const NO_STARS = 5
+const MAX_STARS = 5
 // makes 5 stars 140 px wide
 const STAR_SIZE = 31
 const STAR_WIDTH = Math.round(RAW_STAR_SIZE / RAW_STAR_STEP * STAR_SIZE)
@@ -25,7 +26,7 @@ const Stars = ({contractor, root}) => {
   const filled_id =`filled-${star_def_id}`
   star_def_id += 1
   const score = contractor.review_rating
-  const stroke_stars = int_range(NO_STARS)
+  const stroke_stars = int_range(MAX_STARS)
   const full_stars = int_range(Math.ceil(score))
   // tweak score to make it fit in better with stroke
   let score_stars = score
@@ -37,11 +38,13 @@ const Stars = ({contractor, root}) => {
   }
   const comment = typeof contractor.review_duration === 'number' &&
     root.get_text('review_hours', {hours: Math.round(contractor.review_duration / 3600)})
+  const star_display = `${Math.round(score * 10) / 10} Stars`
   return (
     <div className="tcs-stars">
-      <svg style={{width: STAR_WIDTH * NO_STARS, height: STAR_SIZE}}
-           className='tcs-svg'
-           viewBox={`0 0 ${RAW_STAR_STEP * NO_STARS} 1792`}
+      <svg style={{width: STAR_WIDTH * MAX_STARS, height: STAR_SIZE}}
+           className="tcs-svg"
+           data-tip={star_display}
+           viewBox={`0 0 ${RAW_STAR_STEP * MAX_STARS} 1792`}
            xmlns="http://www.w3.org/2000/svg">
         <defs>
           <path id={stroked_id} d={STAR_PATH} fill="white" fillOpacity="0" stroke={STAR_COLOUR} strokeWidth={80}/>
@@ -60,9 +63,9 @@ const Stars = ({contractor, root}) => {
         </g>
       </svg>
       <div>
-        {/*<span className="tcs-number">{Math.round(score * 10) / 10}</span>*/}
         {comment && <span className="tcs-comment">{comment}</span>}
       </div>
+      <ReactTooltip effect="solid"/>
     </div>
   )
 }
diff --git a/src/main.scss b/src/main.scss
index 54208a12..0fdb4de6 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -20,6 +20,7 @@
 @import './styles/con-details';
 @import './styles/con-modal';
 @import './styles/enquiry';
+@import './styles/stars';
 @import './styles/tools';
 @import './styles/contractors';
 @import './styles/grid';
diff --git a/src/styles/con-modal.scss b/src/styles/con-modal.scss
index d6275a1b..ef9a9f74 100644
--- a/src/styles/con-modal.scss
+++ b/src/styles/con-modal.scss
@@ -36,6 +36,10 @@
     margin: auto;
   }
 
+  .tcs-stars {
+    margin-top: 10px;
+  }
+
   .tcs-button {
     margin: 10px auto 0;
     width: 100%;
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index bf146697..5a72d0c8 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -56,7 +56,7 @@
 
 .tcs-location {
   text-align: center;
-  margin: 5px 0;
+  margin: 15px 0 5px;
   span {
     padding-top: 4px;
     vertical-align: top;
diff --git a/src/styles/stars.scss b/src/styles/stars.scss
new file mode 100644
index 00000000..a714846a
--- /dev/null
+++ b/src/styles/stars.scss
@@ -0,0 +1,26 @@
+@import '../conf';
+
+.tcs-stars {
+  text-align: center;
+  line-height: 16px;
+  margin-bottom: 4px;
+  .tcs-comment {
+    margin-top: 2px;
+    display: inline-block;
+    padding: 3px 6px;
+    color: #888;
+  }
+}
+
+div.__react_component_tooltip.type-dark {
+  background-color: $highlight;
+  padding: 5px 15px;
+  opacity: 0;
+  transition: opacity .4s ease, visibility .3s ease;
+  &.show {
+    opacity: 1;
+  }
+  &:after {
+    border-top-color: $highlight !important;
+  }
+}
diff --git a/src/styles/tools.scss b/src/styles/tools.scss
index 316c9254..4732ff23 100644
--- a/src/styles/tools.scss
+++ b/src/styles/tools.scss
@@ -77,15 +77,3 @@ svg.tcs-close {
     }
   }
 }
-
-.tcs-stars {
-  text-align: center;
-  line-height: 16px;
-  margin-bottom: 4px;
-  .tcs-comment {
-    margin-top: 2px;
-    display: inline-block;
-    padding: 3px 6px;
-    color: #888;
-  }
-}
diff --git a/yarn.lock b/yarn.lock
index a95fb37f..bdc4e031 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1350,7 +1350,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.2.4:
+classnames@^2.2.4, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -5729,6 +5729,13 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-tooltip@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
@@ -7007,7 +7014,7 @@ webidl-conversions@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
-webpack-bundle-analyzer@^2.9.2:
+webpack-bundle-analyzer@^2.9.1:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
   dependencies:

From b4dd556b046738dc71c00713da18161649d5dbec Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 19 Jan 2018 17:25:21 +0000
Subject: [PATCH 07/15] company options working!

---
 public/index.html | 21 +++++++++++++--------
 src/index.js      | 29 +++++++++++++++++++++++++----
 src/utils.js      | 24 ++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/public/index.html b/public/index.html
index c4968693..ea7a7208 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,12 @@
       * {
         box-sizing: border-box;  /* bootstrap does this on most sites. */
       }
-      main > div {
-        background-color: white;
+      main {
         max-width: 800px;
         margin: 20px auto;
+      }
+      main > div {
+        background-color: white;
         border: 1px solid #aaa;
       }
     </style>
@@ -24,9 +26,13 @@
   <body>
     <main>
       <a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a>
+      <p>mode defined by options:</p>
       <div id="socket1"></div>
+      <p>Grid mode:</p>
       <div id="socket2"></div>
+      <p>Enquiry:</p>
       <div id="socket3"></div>
+      <p>Enquiry Modal:</p>
       <div id="socket4"></div>
     </main>
   </body>
@@ -37,6 +43,11 @@
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
+    })
+    socket(public_key, {
+      element: '#socket2',
+      router_mode: 'history',
+      api_root: api_root,
       mode: 'grid',
       labels_include: [],
       labels_exclude: [],
@@ -44,12 +55,6 @@
         console.log(name, v)
       }
     })
-    socket(public_key, {
-      element: '#socket2',
-      router_mode: 'history',
-      api_root: api_root,
-      mode: 'list',
-    })
     socket(public_key, {
       element: '#socket3',
       router_mode: 'history',
diff --git a/src/index.js b/src/index.js
index c897aaba..f9de0daf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import './main.scss'
 import App from './components/App'
 import {BrowserRouter, HashRouter} from 'react-router-dom'
-import {auto_url_root} from './utils'
+import {auto_url_root, get_company_options} from './utils'
 
 const raven_config = {
   release: process.env.REACT_APP_RELEASE,
@@ -45,7 +45,7 @@ const STRINGS = {
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
 const ROUTER_MODES = ['hash', 'history']
 
-window.socket = function (public_key, config) {
+window.socket = async function (public_key, config) {
   config = config || {}
   Raven.setExtraContext({
     public_key: public_key,
@@ -64,9 +64,10 @@ window.socket = function (public_key, config) {
     }
   }
 
+  let options_required = false
   let error = null
   if (!config.mode) {
-    config.mode = 'grid'
+    options_required = true
   } else if (MODES.indexOf(config.mode) === -1) {
     error = `invalid mode "${config.mode}", options are: ${MODES.join(', ')}`
     config.mode = 'grid'
@@ -89,7 +90,11 @@ window.socket = function (public_key, config) {
 
   if (!config.router_mode) {
     // use history mode with enquiry so it doesn't add the hash
-    config.router_mode = config.mode === 'enquiry' ? 'history' : 'hash'
+    if (config.mode === 'enquiry') {
+      config.router_mode = 'history'
+    } else {
+      options_required = true
+    }
   } else if (ROUTER_MODES.indexOf(config.router_mode) === -1) {
     error = `invalid router mode "${config.router_mode}", options are: ${ROUTER_MODES.join(', ')}`
     config.router_mode = 'hash'
@@ -132,6 +137,22 @@ window.socket = function (public_key, config) {
   config.random_id = Math.random().toString(36).substring(2, 10)
   config.grecaptcha_key = process.env.REACT_APP_GRECAPTCHA_KEY
 
+  if (options_required) {
+    let company_options
+    try {
+      company_options = await get_company_options(public_key, config)
+    } catch(e) {
+        error = e
+      company_options = {
+        display_mode: 'grid',
+        router_mode: 'hash',
+      }
+    }
+    console.debug('company options:', company_options)
+    config.mode = config.mode || company_options.display_mode
+    config.router_mode = config.router_mode || company_options.router_mode
+  }
+
   console.debug('using config:', config)
 
   const url_base = config.router_mode === 'history' ? config.url_root : '/'
diff --git a/src/utils.js b/src/utils.js
index 5cf49096..7710f72b 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -79,6 +79,30 @@ const clean = obj => {
   return new_obj
 }
 
+export function get_company_options (public_key, config) {
+  const url = `${config.api_root}/${public_key}/options`
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    const on_error = msg => {
+      console.error('request error', msg, url, xhr)
+      reject(msg)
+    }
+    xhr.open('GET', url)
+    xhr.setRequestHeader('Accept', 'application/json')
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        const data = JSON.parse(xhr.responseText)
+        resolve(data)
+      } else {
+        on_error(`wrong response code ${xhr.status}, Response: ${xhr.responseText.substr(0, 500)}`)
+      }
+    }
+    xhr.onerror = () => on_error(`Error requesting data ${xhr.statusText}: ${xhr.status}`)
+    xhr.send()
+  })
+}
+
 function request (app, path, send_data, method, expected_statuses) {
   let url = path
   if (!url.startsWith('http')) {

From 6372dbd149e4864c03eb9e754b8b6d861cda85d2 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 19 Jan 2018 17:38:25 +0000
Subject: [PATCH 08/15] fix tests

---
 src/index.js            |  2 +-
 src/tests/index.test.js | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index f9de0daf..03e7e375 100644
--- a/src/index.js
+++ b/src/index.js
@@ -142,7 +142,7 @@ window.socket = async function (public_key, config) {
     try {
       company_options = await get_company_options(public_key, config)
     } catch(e) {
-        error = e
+        error = e.toString()
       company_options = {
         display_mode: 'grid',
         router_mode: 'hash',
diff --git a/src/tests/index.test.js b/src/tests/index.test.js
index e822a139..a16b2515 100644
--- a/src/tests/index.test.js
+++ b/src/tests/index.test.js
@@ -5,11 +5,14 @@ beforeEach(() => {
   xhr_setup()
 })
 
-it('renders grid', () => {
+it('renders grid', async () => {
   const div = document.createElement('div')
   div.setAttribute('id', 'socket')
   document.body.appendChild(div)
-  const r = window.socket('good')
+  const r = await window.socket('good', {
+    router_mode: 'hash',
+    mode: 'grid',
+  })
   expect(r.goto).toBeTruthy()
   expect(r.config.contractor_filter).toEqual({})
   expect(div.querySelectorAll('.tcs-contractors').length).toBe(1)
@@ -17,13 +20,13 @@ it('renders grid', () => {
 })
 
 
-it('converts contractor filter', () => {
+it('converts contractor filter', async () => {
   const div = document.createElement('div')
   div.setAttribute('id', 'socket')
   document.body.appendChild(div)
-  const r = window.socket('good', {
+  const r = await window.socket('good', {
     router_mode: 'history',
-    mode: 'grid',
+    mode: 'list',
     labels_include: ['foobar'],
     labels_exclude: ['spam'],
     event_callback: () => null,

From 5246909350833b8a8641b567b1acba0f4258039c Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 13:25:01 +0000
Subject: [PATCH 09/15] fix css classes, add simple.html

---
 config-overrides.js                |  7 +++++++
 public/index.html                  |  5 +++--
 src/components/contractors/List.js |  6 +++---
 src/styles/contractors.scss        |  2 +-
 src/styles/grid.scss               |  4 ++--
 src/styles/list.scss               | 14 +++++++-------
 6 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/config-overrides.js b/config-overrides.js
index 73dafb17..67e64d2c 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -48,6 +48,13 @@ module.exports = function override (config, env) {
         filename: 'foobar/index.html'
       })
     )
+    config.plugins.splice(2, 0,
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.resolve(__dirname, 'public', 'simple.html'),
+        filename: 'simple.html'
+      })
+    )
   }
   // console.dir(config, { depth: 10, colors: true })
   return config
diff --git a/public/index.html b/public/index.html
index ea7a7208..852475cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,8 @@
   </head>
   <body>
     <main>
-      <a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/simple.html">view simple socket panel</a></p>
       <p>mode defined by options:</p>
       <div id="socket1"></div>
       <p>Grid mode:</p>
@@ -39,7 +40,7 @@
   <script>
     var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    var socket1 = socket(public_key, {
+    window.socket = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 302ee105..a9bb2f1c 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -7,7 +7,7 @@ export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
     {contractors.map((contractor, i) => (
       <div key={i} className="tcs-col">
-        <Link to={root.url(contractor.link)} className="tcs-box">
+        <Link to={root.url(contractor.link)} className="tcs-item tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <h3 className="tcs-name">{contractor.name}</h3>
         </Link>
@@ -19,7 +19,7 @@ export const Grid = ({contractors, root}) => (
 export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
-      <Link key={i} to={root.url(contractor.link)} className="tcs-box">
+      <Link key={i} to={root.url(contractor.link)} className="tcs-item">
         <div className="tcs-image-col">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
@@ -38,7 +38,7 @@ export const List = ({contractors, root}) => (
           </div>
         </div>
 
-        <div className="tcs-box-extra">
+        <div className="tcs-list-extra">
           <Stars contractor={contractor} root={root}/>
 
           <div className="tcs-location">
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 5a72d0c8..03b39f42 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -26,7 +26,7 @@
   }
 }
 
-.tcs-box {
+.tcs-item {
   text-decoration: none;
   user-select: none;
   h3.tcs-name {
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
index 5f46a038..1887aa6e 100644
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -11,7 +11,7 @@
 .tcs-flex {
   display: flex;
   flex-wrap: wrap;
-  .tcs-box {
+  .tcs-item {
     display: block;
     border-radius: $border-radius;
     background-color: #005377;
@@ -39,7 +39,7 @@
   .tcs-col {
     padding: 10px 2px 20px;
   }
-  .tcs-box {
+  .tcs-item {
     width: 140px;
   }
 }
diff --git a/src/styles/list.scss b/src/styles/list.scss
index c8528af1..14bf98d1 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -2,7 +2,7 @@
 $box-height: 186px;
 
 .tcs-list {
-  .tcs-box {
+  .tcs-item {
     box-sizing: content-box;
     color: #444;
     padding: 15px 0;
@@ -42,12 +42,12 @@ $box-height: 186px;
                     rgba(255, 255, 255, 1) 100%
     );
   }
+}
 
-  .tcs-box-extra {
-    display: grid;
-    grid-template-rows: 100px 1fr auto;
-    .tcs-stars {
-      grid-row: span 2;
-    }
+.tcs-list-extra {
+  display: grid;
+  grid-template-rows: 100px 1fr auto;
+  .tcs-stars {
+    grid-row: span 2;
   }
 }

From 89f1bdaee3915e90c395f3276aa0a97112ad14c4 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 13:37:14 +0000
Subject: [PATCH 10/15] fix list view for mobile

---
 public/simple.html   | 37 +++++++++++++++++++++++++++++++++++++
 src/styles/list.scss | 29 ++++++++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 public/simple.html

diff --git a/public/simple.html b/public/simple.html
new file mode 100644
index 00000000..1b18fb7e
--- /dev/null
+++ b/public/simple.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>tutorcruncher-socket</title>
+    <style>
+      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500);
+      body {
+        background: #eee;
+        font-family: 'Open Sans', sans-serif;
+      }
+      * {
+        box-sizing: border-box;  /* bootstrap does this on most sites. */
+      }
+      main {
+        max-width: 800px;
+        margin: 20px auto;
+      }
+      main > div {
+        background-color: white;
+        border: 1px solid #aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/">back to index</a></p>
+      <p>simple socket view:</p>
+      <div id="socket"></div>
+    </main>
+  </body>
+  <script>
+    window.socket = socket('9c79f14df986a1ec693c')
+  </script>
+</html>
diff --git a/src/styles/list.scss b/src/styles/list.scss
index 14bf98d1..f83037f1 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -46,8 +46,35 @@ $box-height: 186px;
 
 .tcs-list-extra {
   display: grid;
-  grid-template-rows: 100px 1fr auto;
+  grid-template-rows: auto 1fr;
   .tcs-stars {
     grid-row: span 2;
   }
 }
+
+@media(max-width: 600px) {
+  .tcs-list {
+    .tcs-item {
+      grid-template-columns: $dft-image-size auto;
+    }
+    .tcs-primary-description {
+      display: none;
+    }
+    h3.tcs-name {
+      font-size: 20px;
+    }
+    .tcs-aside {
+      font-size: 16px;
+    }
+  }
+  .tcs-image-col {
+    grid-row: 1 / span 2;
+  }
+
+  .tcs-list-extra {
+    grid-template-rows: auto;
+    .tcs-stars {
+      grid-row: span 1;
+    }
+  }
+}

From 294bf7b39a618d49022db422ae232fb5001cdd01 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 13:47:34 +0000
Subject: [PATCH 11/15] more css similarity fixes

---
 src/components/enquiry/EnquiryButton.js | 2 +-
 src/styles/contractors.scss             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/enquiry/EnquiryButton.js b/src/components/enquiry/EnquiryButton.js
index 1921a714..bce00782 100644
--- a/src/components/enquiry/EnquiryButton.js
+++ b/src/components/enquiry/EnquiryButton.js
@@ -5,7 +5,7 @@ import EnquiryModal from './EnquiryModal'
 const EnquiryButton = ({root, config}) => (
   <div className="tcs-app">
     <div className="tcs-enquiry-modal">
-      <Link to={root.url('enquiry')} className="tcs-button">
+      <Link to={root.url('enquiry')} className="tcs-button tcs-enquiry-button">
         {root.get_text('enquiry_button')}
       </Link>
 
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 03b39f42..8ebd810a 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -27,8 +27,8 @@
 }
 
 .tcs-item {
-  text-decoration: none;
-  user-select: none;
+  text-decoration: none !important;
+  user-select: none !important;
   h3.tcs-name {
     white-space: nowrap;
     overflow: hidden;

From b84dadc7f5672b5c72a4be32f9086c45da67f9bd Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 16:48:21 +0000
Subject: [PATCH 12/15] adding pagination

---
 public/index.html                         |  3 +-
 src/components/contractors/Contractors.js | 53 +++++++++++++++++++----
 src/components/contractors/List.js        |  5 +--
 src/index.js                              |  6 ++-
 src/styles/contractors.scss               | 25 +++++++++++
 src/utils.js                              |  2 +
 6 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index 852475cd..a4a749dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,10 +40,11 @@
   <script>
     var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    window.socket = socket(public_key, {
+    window.socket1 = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
+      pagination: 8,
     })
     socket(public_key, {
       element: '#socket2',
diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
index b3636a43..da662b91 100644
--- a/src/components/contractors/Contractors.js
+++ b/src/components/contractors/Contractors.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Route} from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'
 import {async_start, slugify} from '../../utils'
 import {If} from '../shared/Tools'
 import {Grid, List} from './List'
@@ -12,12 +12,16 @@ class Contractors extends Component {
     this.state = {
       contractors: [],
       got_contractors: false,
+      page: 1,
+      more_pages: false,
       subjects: [],
       selected_subject: null,
     }
     this.update_contractors = this.update_contractors.bind(this)
     this.get_contractor_details = this.get_contractor_details.bind(this)
     this.set_contractor_details = this.set_contractor_details.bind(this)
+    this.subject_url = this.subject_url.bind(this)
+    this.page_url = this.page_url.bind(this)
     this.subject_change = this.subject_change.bind(this)
   }
 
@@ -31,12 +35,24 @@ class Contractors extends Component {
     await this.update_contractors()
   }
 
-  subject_change (selected_subject) {
+  subject_url (selected_subject) {
     if (selected_subject) {
-      this.props.history.push(this.props.root.url(`subject/${selected_subject.id}-${slugify(selected_subject.name)}`))
+      return this.props.root.url(`subject/${selected_subject.id}-${slugify(selected_subject.name)}`)
     } else {
-      this.props.history.push(this.props.root.url(''))
+      return this.props.root.url('')
     }
+  }
+
+  page_url (new_page) {
+    let url = this.subject_url(this.state.selected_subject)
+    if (new_page > 1) {
+      url += `${url.substr(-1) === '/' ? '' : '/'}page/${new_page}`
+    }
+    return url
+  }
+
+  subject_change (selected_subject) {
+    this.props.history.push(this.subject_url(selected_subject))
     this.update_contractors(selected_subject)
   }
 
@@ -49,14 +65,19 @@ class Contractors extends Component {
       }
     }
 
-    this.setState({selected_subject})
-    const sub_id = selected_subject && selected_subject.id
-    const args = Object.assign({}, this.props.config.contractor_filter, {subject: sub_id || null})
+    const m = this.props.history.location.pathname.match(/page\/(\d+)/)
+    const page = m ? parseInt(m[1], 10) : 1
+    this.setState({selected_subject, page})
+    const args = Object.assign({}, this.props.config.contractor_filter, {
+      subject: selected_subject ? selected_subject.id : null,
+      pagination: this.props.config.pagination,
+      page: page,
+    })
     const contractors = await this.props.root.requests.get('contractors', args)
-    contractors.reverse()
     this.props.config.event_callback('updated_contractors', contractors)
     this.setState({
       contractors,
+      more_pages: contractors.length === this.props.config.pagination,
       got_contractors: true
     })
   }
@@ -90,6 +111,22 @@ class Contractors extends Component {
         </If>
         <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
 
+        <If v={this.state.page > 1 || this.state.more_pages}>
+          <div className="tcs-pagination">
+            <Link
+              to={this.page_url(this.state.page - 1)}
+              onClick={() => setTimeout(() => this.update_contractors(), 0)}
+              className={'tcs-previous' + (this.state.page > 1 ? '' : ' tcs-disable')}>
+              &lsaquo;&lsaquo; {this.props.root.get_text('previous')}
+            </Link>
+            <Link
+              to={this.page_url(this.state.page + 1)}
+              onClick={() => setTimeout(() => this.update_contractors(), 0)}
+              className={'tcs-next' + (this.state.more_pages ? '' : ' tcs-disable')}>
+              {this.props.root.get_text('next')} &rsaquo;&rsaquo;
+            </Link>
+          </div>
+        </If>
         <Route path={this.props.root.url(':id(\\d+):_extra')} render={props => (
           <ConModal id={props.match.params.id}
                     contractors={this.state.contractors}
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index a9bb2f1c..28bdbf8c 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
-import {Footer, Location, Markdown} from '../shared/Tools'
+import {Location, Markdown} from '../shared/Tools'
 import Stars from './Stars'
 
 export const Grid = ({contractors, root}) => (
@@ -20,7 +20,7 @@ export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
       <Link key={i} to={root.url(contractor.link)} className="tcs-item">
-        <div className="tcs-image-col">
+        <div className="tcs-image-col tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
             {root.get_text('view_profile')}
@@ -48,6 +48,5 @@ export const List = ({contractors, root}) => (
         </div>
       </Link>
     ))}
-    <Footer/>
   </div>
 )
diff --git a/src/index.js b/src/index.js
index 03e7e375..646377bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,7 +21,6 @@ const raven_config = {
 }
 Raven.config(process.env.REACT_APP_RAVEN_DSN, raven_config).install()
 
-// TODO these need a consist prefix
 const STRINGS = {
   skills_label: 'Skills',
   contractor_enquiry: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
@@ -40,6 +39,8 @@ const STRINGS = {
   subject_filter_summary_plural: '{subject}: showing {count} results',
   view_profile: 'View Profile',
   review_hours: '({hours} hours)',
+  previous: 'Previous',
+  next: 'Next',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
@@ -128,6 +129,7 @@ window.socket = async function (public_key, config) {
     return
   }
 
+  config.pagination = config.pagination || 100
   config.messages = config.messages || {}
   for (let k of Object.keys(STRINGS)) {
     if (!config.messages[k]) {
@@ -156,7 +158,7 @@ window.socket = async function (public_key, config) {
   console.debug('using config:', config)
 
   const url_base = config.router_mode === 'history' ? config.url_root : '/'
-  const url_generator = (url_) => url_base + url_
+  const url_generator = (url_) => url_base + (url_ || '')
 
   window._tcs_grecaptcha_loaded = () => (
     document.dispatchEvent(new Event('_tcs_grecaptcha_loaded'))
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 8ebd810a..f34cffe9 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -45,6 +45,31 @@
   }
 }
 
+$pagination-radius: 4px;
+.tcs-pagination {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0 0;
+  .tcs-previous, .tcs-next {
+    display: inline-block;
+    padding: 8px;
+    border: 1px solid #ccc;
+    text-decoration: none !important;
+    color: $brand-colour;
+  }
+  .tcs-previous {
+    border-right: 0;
+    border-radius: $pagination-radius 0 0 $pagination-radius;
+  }
+  .tcs-next {
+    border-radius: 0 $pagination-radius $pagination-radius 0;
+  }
+  .tcs-disable {
+    pointer-events: none;
+    color: #888;
+  }
+}
+
 .tcs-aside {
   font-size: 20px;
   margin-bottom: 10px;
diff --git a/src/utils.js b/src/utils.js
index 7710f72b..dc6ee619 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -17,10 +17,12 @@ export const to_markdown = t => {
 export const auto_url_root = path => {
   // remove :
   // * /subject/.*
+  // * /page/.*
   // * contractor slug
   // * /enquiry
   path = path
     .replace(/\/subject\/\d+-[^/]+$/, '/')
+    .replace(/\/page\/\d+-[^/]+$/, '/')
     .replace(/\/\d+-[^/]+$/, '/')
     .replace(/\/enquiry$/, '/')
   return path

From ed8f4f8d1ba0e0177b8ee9baa06d246dad37b917 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 17:42:24 +0000
Subject: [PATCH 13/15] animated load lists

---
 config-overrides.js                       |  4 +--
 public/index.html                         |  2 +-
 public/{simple.html => simple/index.html} |  0
 src/components/contractors/Contractors.js | 14 +++++++---
 src/components/contractors/List.js        | 34 ++++++++++++++++++-----
 src/index.js                              |  1 +
 src/styles/contractors.scss               | 15 ++++++++++
 src/styles/list.scss                      |  3 ++
 8 files changed, 59 insertions(+), 14 deletions(-)
 rename public/{simple.html => simple/index.html} (100%)

diff --git a/config-overrides.js b/config-overrides.js
index 67e64d2c..00014955 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -51,8 +51,8 @@ module.exports = function override (config, env) {
     config.plugins.splice(2, 0,
       new HtmlWebpackPlugin({
         inject: true,
-        template: path.resolve(__dirname, 'public', 'simple.html'),
-        filename: 'simple.html'
+        template: path.resolve(__dirname, 'public', 'simple/index.html'),
+        filename: 'simple/index.html'
       })
     )
   }
diff --git a/public/index.html b/public/index.html
index a4a749dc..4f10b590 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
   <body>
     <main>
       <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
-      <p><a href="/simple.html">view simple socket panel</a></p>
+      <p><a href="/simple/">view simple socket panel</a></p>
       <p>mode defined by options:</p>
       <div id="socket1"></div>
       <p>Grid mode:</p>
diff --git a/public/simple.html b/public/simple/index.html
similarity index 100%
rename from public/simple.html
rename to public/simple/index.html
diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
index da662b91..b37c3266 100644
--- a/src/components/contractors/Contractors.js
+++ b/src/components/contractors/Contractors.js
@@ -75,11 +75,12 @@ class Contractors extends Component {
     })
     const contractors = await this.props.root.requests.get('contractors', args)
     this.props.config.event_callback('updated_contractors', contractors)
-    this.setState({
+    this.setState({contractors: []})
+    setTimeout(() => this.setState({
       contractors,
+      got_contractors: true,
       more_pages: contractors.length === this.props.config.pagination,
-      got_contractors: true
-    })
+    }), 0)
   }
 
   get_contractor_details (con) {
@@ -102,7 +103,7 @@ class Contractors extends Component {
     const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
     return (
       <div className="tcs-app tcs-contractors">
-        <If v={this.props.config.subject_filter}>
+        <If v={this.state.got_contractors && this.props.config.subject_filter}>
           <SelectSubjects get_text={this.props.root.get_text}
                           contractors={this.state.contractors}
                           subjects={this.state.subjects}
@@ -110,6 +111,11 @@ class Contractors extends Component {
                           subject_change={this.subject_change}/>
         </If>
         <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
+        <If v={this.state.got_contractors && this.state.contractors.length === 0}>
+          <div className="tcs-no-contractors">
+            {this.props.root.get_text('no_tutors_found')}
+          </div>
+        </If>
 
         <If v={this.state.page > 1 || this.state.more_pages}>
           <div className="tcs-pagination">
diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 28bdbf8c..0735cef2 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -1,17 +1,37 @@
-import React from 'react'
+import React, { Component } from 'react'
 import {Link} from 'react-router-dom'
 import {Location, Markdown} from '../shared/Tools'
 import Stars from './Stars'
 
+class AnimateLink extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {show: false}
+  }
+
+  async componentDidMount () {
+    setTimeout(() => this.setState({show: true}), this.props.delay || 0)
+  }
+
+  render () {
+    const extra_classes = this.props.className ? this.props.className + ' ' : ''
+    return (
+      <Link to={this.props.to} className={extra_classes + 'tcs-animate-entry' + (this.state.show ? ' show' : '')}>
+        {this.props.children}
+      </Link>
+    )
+  }
+}
+
 export const Grid = ({contractors, root}) => (
   <div className="tcs-flex">
     {contractors.map((contractor, i) => (
-      <div key={i} className="tcs-col">
-        <Link to={root.url(contractor.link)} className="tcs-item tcs-box">
+      <AnimateLink key={i} delay={i * 50} to={root.url(contractor.link)} className="tcs-col">
+        <div className="tcs-item tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <h3 className="tcs-name">{contractor.name}</h3>
-        </Link>
-      </div>
+        </div>
+      </AnimateLink>
     ))}
   </div>
 )
@@ -19,7 +39,7 @@ export const Grid = ({contractors, root}) => (
 export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
-      <Link key={i} to={root.url(contractor.link)} className="tcs-item">
+      <AnimateLink key={i} delay={i * 80} to={root.url(contractor.link)} className="tcs-item">
         <div className="tcs-image-col tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
@@ -46,7 +66,7 @@ export const List = ({contractors, root}) => (
             <span>{contractor.town}</span>
           </div>
         </div>
-      </Link>
+      </AnimateLink>
     ))}
   </div>
 )
diff --git a/src/index.js b/src/index.js
index 646377bf..ac5cac92 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,6 +41,7 @@ const STRINGS = {
   review_hours: '({hours} hours)',
   previous: 'Previous',
   next: 'Next',
+  no_tutors_found: 'No more tutors found',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index f34cffe9..3c0efe81 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -45,6 +45,21 @@
   }
 }
 
+.tcs-animate-entry {
+  opacity: 0;
+  transition: all .5s ease;
+  &.show {
+    opacity: 1;
+  }
+}
+
+.tcs-no-contractors {
+  display: flex;
+  justify-content: center;
+  color: #aaa;
+  padding: 0 0 8px;
+}
+
 $pagination-radius: 4px;
 .tcs-pagination {
   display: flex;
diff --git a/src/styles/list.scss b/src/styles/list.scss
index f83037f1..551b9563 100644
--- a/src/styles/list.scss
+++ b/src/styles/list.scss
@@ -10,6 +10,9 @@ $box-height: 186px;
     display: grid;
     grid-template-columns: $dft-image-size auto 180px;
     //border: 1px dashed black;
+    &:last-child {
+      border-bottom: none;
+    }
   }
   .tcs-button {
     width: 100%;

From 3572631c4177ecb94948313db0fe29de2c17e887 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 18:17:33 +0000
Subject: [PATCH 14/15] fixing tests

---
 src/components/contractors/List.js |  2 +-
 src/tests/App.test.js              | 10 ++++++----
 src/tests/utils.js                 |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index 0735cef2..d916c0c9 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -40,7 +40,7 @@ export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
       <AnimateLink key={i} delay={i * 80} to={root.url(contractor.link)} className="tcs-item">
-        <div className="tcs-image-col tcs-box">
+        <div className="tcs-image-col">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
             {root.get_text('view_profile')}
diff --git a/src/tests/App.test.js b/src/tests/App.test.js
index f098864c..2602fb52 100644
--- a/src/tests/App.test.js
+++ b/src/tests/App.test.js
@@ -12,6 +12,7 @@ it('shows tutors', async () => {
     router_mode: 'history',
     api_root: 'https://socket.tutorcruncher.com',
     mode: 'grid',
+    messages: {no_tutors_found: 'xx'},
     event_callback: () => null,
   }
   const wrapper = enz.mount(<Router><App config={config} public_key={'good'} url_generator={u => u}/></Router>)
@@ -22,9 +23,9 @@ it('shows tutors', async () => {
   expect(xhr_calls[1]).toEqual({
     method: 'GET',
     url: 'https://socket.tutorcruncher.com/good/contractors',
-    args: null
+    args: 'page=1'
   })
-  expect(wrapper.find('.tcs-col').length).toBe(2)
+  expect(wrapper.find('.tcs-item').length).toBe(2)
 })
 
 it('with con filter', async () => {
@@ -32,6 +33,7 @@ it('with con filter', async () => {
     router_mode: 'history',
     api_root: 'https://socket.tutorcruncher.com',
     mode: 'grid',
+    messages: {no_tutors_found: 'xx'},
     contractor_filter: {
       label: ['foobar'],
       label_exclude: ['spam'],
@@ -45,7 +47,7 @@ it('with con filter', async () => {
   expect(xhr_calls[1]).toEqual({
     method: 'GET',
     url: 'https://socket.tutorcruncher.com/good/contractors',
-    args: 'label=foobar&label_exclude=spam'
+    args: 'label=foobar&label_exclude=spam&page=1'
   })
-  expect(wrapper.find('.tcs-col').length).toBe(2)
+  expect(wrapper.find('.tcs-item').length).toBe(2)
 })
diff --git a/src/tests/utils.js b/src/tests/utils.js
index b749ef5a..a38e4feb 100644
--- a/src/tests/utils.js
+++ b/src/tests/utils.js
@@ -78,7 +78,7 @@ function MockXMLHttpRequest () {
 }
 
 export function tick () {
-  return new Promise(resolve => setTimeout(resolve, 0))
+  return new Promise(resolve => setTimeout(resolve, 50))
 }
 
 export function xhr_setup () {

From fbbe8d187ae5cdd1d3f016d8b173f18444b0684d Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 22 Jan 2018 18:29:16 +0000
Subject: [PATCH 15/15] fix conflict with 'show' class

---
 src/components/contractors/List.js | 2 +-
 src/components/shared/Modal.js     | 2 +-
 src/styles/contractors.scss        | 2 +-
 src/styles/modal.scss              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/contractors/List.js b/src/components/contractors/List.js
index d916c0c9..5d958099 100644
--- a/src/components/contractors/List.js
+++ b/src/components/contractors/List.js
@@ -16,7 +16,7 @@ class AnimateLink extends Component {
   render () {
     const extra_classes = this.props.className ? this.props.className + ' ' : ''
     return (
-      <Link to={this.props.to} className={extra_classes + 'tcs-animate-entry' + (this.state.show ? ' show' : '')}>
+      <Link to={this.props.to} className={extra_classes + 'tcs-animate-entry' + (this.state.show ? ' tcs-show' : '')}>
         {this.props.children}
       </Link>
     )
diff --git a/src/components/shared/Modal.js b/src/components/shared/Modal.js
index 0d936910..c4e8d72c 100644
--- a/src/components/shared/Modal.js
+++ b/src/components/shared/Modal.js
@@ -42,7 +42,7 @@ class Modal extends Component {
 
   render () {
     return (
-      <div className={'tcs-modal-mask' + (this.state.show ? ' show' : '')} onClick={this.close}>
+      <div className={'tcs-modal-mask' + (this.state.show ? ' tcs-show' : '')} onClick={this.close}>
         <div className="tcs-modal" onClick={e => e.stopPropagation()}>
           <div className="tcs-header">
             <h2>{this.props.title}</h2>
diff --git a/src/styles/contractors.scss b/src/styles/contractors.scss
index 3c0efe81..28b10dac 100644
--- a/src/styles/contractors.scss
+++ b/src/styles/contractors.scss
@@ -48,7 +48,7 @@
 .tcs-animate-entry {
   opacity: 0;
   transition: all .5s ease;
-  &.show {
+  &.tcs-show {
     opacity: 1;
   }
 }
diff --git a/src/styles/modal.scss b/src/styles/modal.scss
index cba8aab1..8085d042 100644
--- a/src/styles/modal.scss
+++ b/src/styles/modal.scss
@@ -26,7 +26,7 @@
   background-color: rgba($back-colour, $back-colour, $back-colour, .6);
   opacity: 0;
   transition: all .3s ease;
-  &.show {
+  &.tcs-show {
     opacity: 1;
     .tcs-modal {
       transform: translate(0, 0);