responsive and translations

Author: samuelcolvin

src/components/appointments/Appointments.js

@@ -2,11 +2,13 @@ import React, { Component } from 'react'
 import {Link, Route} from 'react-router-dom'
 import ReactTooltip from 'react-tooltip'
 import {colour_contrast, group_by} from '../../utils'
-import {If} from '../shared/Tools'
+import {If, Bull} from '../shared/Tools'
 import {CalendarCheck, CalendarPlus, CalendarTimes} from '../shared/Svgs'
 import AptModal from './AptModal'
 
 const LS_KEY = '_tcs_user_data_'
+// matches value in appointments.scss
+const NARROW = 750
 
 const group_appointments = apts => {
   // group appointments by month then day
@@ -19,6 +21,7 @@ const group_appointments = apts => {
 
 const Apt = ({apt, props, appointment_attendees}) => {
   const full = apt.attendees_max === apt.attendees_count
+  const narrow = window.innerWidth < NARROW
   const colour = full ? '#CCC' : apt.service_colour
   let Icon, tip
   const spaces_ctx = {spaces: apt.attendees_max - apt.attendees_count}
@@ -35,10 +38,13 @@ const Apt = ({apt, props, appointment_attendees}) => {
         <div>
           <Icon/>
           <span>{props.config.date_fns.format(apt.start, 'HH:mm')}</span>
-          <span>{apt.topic} ({apt.service_name})</span>
+          <span>{apt.topic}</span>
+          {narrow && <br/>}
+          <span>({apt.service_name})</span>
         </div>
-        <div>
-          <span>{props.config.format_time_diff(apt.finish, apt.start)}</span>&bull;
+        <div className="tcs-right">
+          <span>{props.config.format_time_diff(apt.finish, apt.start)}</span>
+          {narrow ? <br/> :<Bull/>}
           <span>{props.config.format_money(apt.price)}</span>
         </div>
       </div>

src/components/appointments/AptModal.js

@@ -11,16 +11,18 @@ const AptDetails = ({apt, spaces_available, props}) => (
     <div className="tcs-extra">
       <div className="tcs-price">
         {props.config.format_money(apt.price)}
-        <div className="tcs-label">Price</div>
+        <div className="tcs-label">{props.config.get_text('price')}</div>
       </div>
     </div>
     <div className="tcs-content">
       <DetailGrid>
-        <Detail label="Job">{apt.service_name}</Detail>
-        {apt.attendees_max && <Detail label="Spaces Available">{spaces_available}</Detail>}
-        <Detail label="Start" className="tcs-new-line">{props.config.format_datetime(apt.start)}</Detail>
-        <Detail label="Finish">{props.config.format_datetime(apt.finish)}</Detail>
-        {apt.location && <Detail label="Location">{apt.location}</Detail>}
+        <Detail label="job" config={props.config}>{apt.service_name}</Detail>
+        {apt.attendees_max && <Detail label="spaces_available" config={props.config}>{spaces_available}</Detail>}
+        <Detail label="start" config={props.config} className="tcs-new-line">
+          {props.config.format_datetime(apt.start)}
+        </Detail>
+        <Detail label="finish" config={props.config}>{props.config.format_datetime(apt.finish)}</Detail>
+        {apt.location && <Detail label="location" config={props.config}>{apt.location}</Detail>}
       </DetailGrid>
     </div>
   </div>
@@ -37,7 +39,7 @@ const AddExisting = ({students, book, booking_allowed, get_text}) => (
         </div>
         {already_on_apt ? (
           <div className="tcs-already-added">
-            Added <Tick/>
+            {get_text('added')} <Tick/>
           </div>
         ) : (
           <button className="tcs-button tcs-add-button"
@@ -53,7 +55,7 @@ const AddExisting = ({students, book, booking_allowed, get_text}) => (
 
 const AddNew = ({new_student, onChange, book, booking_allowed, get_text}) => (
   <div className="tcs-book-new">
-    <div>Add a new Student to the lesson</div>
+    <div>{get_text('add_new_student')}</div>
     <div className="tcs-book-item">
       <input type="text"
             className="tcs-default-input"
@@ -161,8 +163,8 @@ class AptModal extends Component {
     const apt = this.state.apt
     if (!apt) {
       return (
-        <Modal history={this.props.history} title="Appointment not Found">
-          <p>No Appointment found with id {this.props.id}.</p>
+        <Modal history={this.props.history} title={this.props.config.get_text('appointment_not_found')}>
+          <p>{this.props.config.get_text('appointment_not_found_id', {apt_id: this.props.id})}</p>
         </Modal>
       )
     }
@@ -206,7 +208,7 @@ class AptModal extends Component {
               {this.state.display_data.nm}
               <br/>
               <div className="tcs-signout" onClick={this.props.signout}>
-                Not you? sign out
+                {this.props.config.get_text('not_you_sign_out')}
               </div>
             </div>
           }

src/components/shared/Modal.js

@@ -48,8 +48,8 @@ class Modal extends Component {
       <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>
-            <div className="close" onClick={this.close}>
+            <h2 className="tcs-h2">{this.props.title}</h2>
+            <div className="tcs-close" onClick={this.close}>
               <Cross/>
             </div>
           </div>

src/components/shared/Tools.js

@@ -52,9 +52,9 @@ export const DetailGrid = ({children}) => (
   </div>
 )
 
-export const Detail = ({label, children, className}) => (
+export const Detail = ({label, children,config, className}) => (
   <div className={`tcs-detail ${className || ''}`}>
-    <div className="tcs-label">{label}</div>
+    <div className="tcs-label">{config.get_text(label)}</div>
     <div className="tcs-value">{children}</div>
   </div>
 )
@@ -73,3 +73,5 @@ export const DisplayExtraAttrs = ({extra_attributes}) => (
     ))}
   </div>
 )
+
+export const Bull = () => <span className="tcs-bull">&bull;</span>

src/conf.scss

@@ -27,3 +27,5 @@ $dft-border-color: #CCC;
 $label-colour: #666;
 // border colour used for inputs
 $input-border-colour: #aaa;
+// windows considered small / "mobile"
+$window-small: 750px;

src/index.js

@@ -63,6 +63,16 @@ const STRINGS = {
   no_spaces_attending: 'Already attending, no more spaces available',
   add_existing_students: 'Add your existing Students to the lesson',
   add_new_student: 'Add a new Student to the lesson',
+  appointment_not_found: 'Appointment not Found',
+  appointment_not_found_id: 'No Appointment found with id {apt_id}.',
+  price: 'Price',
+  job: 'Job',
+  spaces_available: 'Spaces Available',
+  start: 'Start',
+  finish: 'Finish',
+  location: 'Location',
+  not_you_sign_out: 'Not you? sign out',
+  added: 'Added',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal', 'appointments']

src/styles/appointments.scss

@@ -1,9 +1,5 @@
 @import '../conf';
 
-.tcs-appointments {
-  padding: 10px;
-}
-
 .tcs-apt-group-month {
   padding: 10px 8px;
   .tcs-title {
@@ -16,27 +12,43 @@
   padding-bottom: 12px;
   display: grid;
   grid-template-columns: 100px auto;
+  @media(max-width: $window-small) {
+    grid-template-columns: 60px auto;
+  }
   .tcs-day {
     border-right: 2px solid #DDD;
-    margin-right: 12px;
-    padding-right: 12px;
     text-align: right;
     font-size: 18px;
+    margin-right: 12px;
+    padding-right: 12px;
+    @media(max-width: $window-small) {
+      margin-right: 6px;
+      padding-right: 6px;
+    }
   }
   .tcs-apt {
     margin: 0 0 8px;
     padding: 8px 6px 8px 10px;
     border-radius: $border-radius;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: auto auto;
     color: black;
     vertical-align: top;
+    .tcs-svg {
+      margin-right: 5px;
+      @media(max-width: $window-small) {
+        display: none;
+      }
+    }
     span {
-      margin: 0 5px;
+      margin-right: 5px;
     }
     &.dark {
       color: white;
     }
+    .tcs-right {
+      text-align: right;
+    }
   }
   .tcs-item:last-child .tcs-apt {
     margin-bottom: 0;

src/styles/modal.scss

@@ -36,17 +36,25 @@
 
 .tcs-header {
   margin-bottom: 10px;
-  padding-bottom: 10px;
+  padding-bottom: 5px;
   border-bottom: 2px solid $dft-border-color;
-  h2 {
+  h2.tcs-h2 {
     margin-top: 0;
     margin-bottom: 0;
     display: inline-block;
     font-size: 29px;
     font-weight: 400;
-    height: 32px;
+    height: 39px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 40px);
+    @media(max-width: $window-small) {
+      font-size: 26px;
+      height: 35px;
+    }
   }
-  .close {
+  .tcs-close {
     float: right;
   }
 }

src/utils.js

@@ -176,8 +176,8 @@ export const slugify = text => (
    text
      .toLowerCase()
      .replace(/\s+/g, '-')     // Replace spaces with -
-     .replace(/[^\w-]+/g, '') // Remove all non-word chars
-     .replace(/--+/g, '-')   // Replace multiple - with single -
+     .replace(/[^\w-]+/g, '')  // Remove all non-word chars
+     .replace(/--+/g, '-')     // Replace multiple - with single -
      .replace(/^-+/, '')       // Trim - from start of text
      .replace(/-+$/, '')       // Trim - from end of text
 )