tweaks css, fix location search messages

Author: samuelcolvin

config-overrides.js

@@ -19,7 +19,8 @@ module.exports = function override (config, env) {
           {
             loader: 'sass-loader',
             options: {
-              outputStyle: 'compressed'
+              outputStyle: 'compressed',
+              includePaths: [path.resolve(__dirname, 'node_modules')],
             }
           }
         ]

src/components/contractors/Contractors.js

@@ -119,11 +119,23 @@ class Contractors extends Component {
   render () {
     let description = ''
     const con_count = this.state.contractor_response && this.state.contractor_response.count
-    if (con_count && this.state.selected_subject) {
-      const msg_id_suffix = con_count === 1 ? 'single' : 'plural'
-      description = this.props.root.get_text('subject_filter_summary_' + msg_id_suffix, {
+    const location_pretty = (
+      this.state.contractor_response &&
+      this.state.contractor_response.location &&
+      this.state.contractor_response.location.pretty
+    )
+
+    if (con_count) {
+      const description_prefix = []
+      if (location_pretty) {
+        description_prefix.push(location_pretty)
+      }
+      if (this.state.selected_subject) {
+        description_prefix.push(this.state.selected_subject.name)
+      }
+      description = this.props.root.get_text('filter_summary_' + (con_count === 1 ? 'single' : 'plural'), {
         count: con_count,
-        subject: this.state.selected_subject.name,
+        prefix: description_prefix.join('; '),
       })
     }
     const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
@@ -152,7 +164,9 @@ 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(this.state.location_str === null ? 'no_tutors_found' : 'no_tutors_found_loc')}
+            {this.props.root.get_text(
+              this.state.location_str === null ? 'no_tutors_found' : 'no_tutors_found_loc', {location_pretty}
+            )}
           </div>
         </If>
 

src/components/contractors/Filters.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import Select from 'react-select'
-import 'react-select/dist/react-select.css'
 import {If} from '../shared/Tools'
 
 export const SubjectSelect = ({get_text, show, subjects, selected_subject, subject_change}) => {

src/index.js

@@ -35,15 +35,15 @@ const STRINGS = {
   grecaptcha_missing: 'This captcha is required',
   required: ' (Required)',
   subject_filter_placeholder: 'Select a subject...',
-  subject_filter_summary_single: '{subject}: showing 1 result',
-  subject_filter_summary_plural: '{subject}: showing {count} results',
+  filter_summary_single: '{prefix}: showing 1 result',
+  filter_summary_plural: '{prefix}: showing {count} results',
   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',
+  no_tutors_found_loc: 'No more tutors found near "{location_pretty}"',
   distance_away: '{distance}km away',
 }
 

src/styles/contractor-filters.scss

@@ -1,4 +1,4 @@
-//@import './vue-multiselect/dist/vue-multiselect.min';
+@import 'react-select/dist/react-select.min';
 @import '../conf';
 
 .multiselect__select {
@@ -41,6 +41,7 @@
   padding: 8px;
   font-size: 16px;
   outline: none !important;
+  line-height: 1;
   &::placeholder {
     color: #aaa;
   }