location search display

Author: samuelcolvin

src/components/contractors/Contractors.js

@@ -152,7 +152,7 @@ class Contractors extends Component {
           root={this.props.root}/>
         <If v={this.state.contractor_response && this.state.contractor_response.count === 0}>
           <div className="tcs-no-contractors">
-            {this.props.root.get_text('no_tutors_found')}
+            {this.props.root.get_text(this.state.location_str === null ? 'no_tutors_found' : 'no_tutors_found_loc')}
           </div>
         </If>
 

src/components/contractors/List.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import {Link} from 'react-router-dom'
-import {Location, Markdown} from '../shared/Tools'
+import {Location, Markdown, If} from '../shared/Tools'
 import Stars from './Stars'
 
 class AnimateLink extends Component {
@@ -64,6 +64,11 @@ export const List = ({contractors, root}) => (
           <div className="tcs-location">
             <Location/>
             <span>{contractor.town}</span>
+            <div className="tcs-distance">
+              <If v={contractor.distance !== null}>
+                {root.get_text('distance_away', {distance: Math.round(contractor.distance / 100) / 10})}
+              </If>
+            </div>
           </div>
         </div>
       </AnimateLink>

src/conf.scss

@@ -18,3 +18,4 @@ $size-sm: 768px;
 $button-colour: $highlight;
 // size used for images in grid and list view
 $dft-image-size: 150px;
+$grey-text: #888;

src/index.js

@@ -34,15 +34,17 @@ const STRINGS = {
   enquiry_title: 'Enquiry',
   grecaptcha_missing: 'This captcha is required',
   required: ' (Required)',
-  subject_filter_placeholder: 'Select a Subject...',
+  subject_filter_placeholder: 'Select a subject...',
   subject_filter_summary_single: '{subject}: showing 1 result',
   subject_filter_summary_plural: '{subject}: showing {count} results',
-  location_input_placeholder: 'Enter your Address or Postal code...',
+  location_input_placeholder: 'Enter your address or zip/postal code...',
   view_profile: 'View Profile',
   review_hours: '({hours} hours)',
   previous: 'Previous',
   next: 'Next',
   no_tutors_found: 'No more tutors found',
+  no_tutors_found_loc: 'No more tutors found near this location',
+  distance_away: '{distance}km away',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']

src/styles/contractors.scss

@@ -65,7 +65,7 @@ $pagination-radius: 4px;
   }
   .tcs-disable {
     pointer-events: none;
-    color: #888;
+    color: $grey-text;
   }
 }
 

src/styles/input.scss

@@ -40,7 +40,7 @@ $border-radius: 5px;
   }
   .help-text {
     font-size: 14px;
-    color: #888;
+    color: $grey-text;
     &.muted {
       display: none;
     }

src/styles/list.scss

@@ -27,7 +27,7 @@ $box-height: 186px;
     font-size: 26px;
   }
   .tcs-primary-description {
-    color: #888;
+    color: $grey-text;
     overflow: hidden;
     text-overflow: ellipsis;
     display: grid;
@@ -55,6 +55,10 @@ $box-height: 186px;
   }
 }
 
+.tcs-distance {
+  text-align: center;
+}
+
 @media(max-width: 600px) {
   .tcs-list {
     .tcs-item {

src/styles/stars.scss

@@ -8,7 +8,7 @@
     margin-top: 2px;
     display: inline-block;
     padding: 3px 6px;
-    color: #888;
+    color: $grey-text;
   }
 }
 

src/styles/tools.scss

@@ -68,7 +68,7 @@ svg.tcs-close {
   padding: 5px;
   box-sizing: content-box;
   path {
-    fill: #888;
+    fill: $grey-text;
     transition: all .5s ease;
   }
   &:hover {