Merge branch 'dev' into otp-ui-humanize-distance

Author: binh-dam-ibigroup

lib/components/narrative/line-itin/connected-itinerary-body.js

@@ -7,6 +7,7 @@ import PlaceName from '@opentripplanner/itinerary-body/lib/otp-react-redux/place
 import RouteDescription from '@opentripplanner/itinerary-body/lib/otp-react-redux/route-description'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 
 import { showLegDiagram } from '../../../actions/map'
 import { setActiveLeg } from '../../../actions/narrative'
@@ -17,6 +18,10 @@ import TripTools from '../trip-tools'
 
 const noop = () => {}
 
+const ItineraryBodyContainer = styled.div`
+  padding: 20px 0px;
+`
+
 class ConnectedItineraryBody extends Component {
   /** avoid rerendering if the itinerary to display hasn't changed */
   shouldComponentUpdate (nextProps, nextState) {
@@ -34,7 +39,7 @@ class ConnectedItineraryBody extends Component {
     } = this.props
 
     return (
-      <div className='itin-body'>
+      <ItineraryBodyContainer>
         <ItineraryBody
           config={config}
           diagramVisible={diagramVisible}
@@ -57,7 +62,7 @@ class ConnectedItineraryBody extends Component {
         />
         <TripDetails itinerary={itinerary} />
         <TripTools itinerary={itinerary} />
-      </div>
+      </ItineraryBodyContainer>
     )
   }
 }

lib/components/narrative/line-itin/itin-summary.js

@@ -1,12 +1,82 @@
-import React, { Component } from 'react'
+import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
-
-import { calculateFares, calculatePhysicalActivity, getLegIcon, isTransit } from '../../../util/itinerary'
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+import {
+  calculateFares,
+  calculatePhysicalActivity,
+  getLegIcon,
+  isTransit
+} from '../../../util/itinerary'
 import { formatDuration, formatTime } from '../../../util/time'
 
 // TODO: make this a prop
 const defaultRouteColor = '#008'
 
+const Container = styled.div`
+  display: ${() => coreUtils.ui.isMobile() ? 'table' : 'none'};
+  height: 60px;
+  margin-bottom: 15px;
+  padding-right: 5px;
+  width: 100%;
+`
+
+const Detail = styled.div`
+  color: #999999;
+  font-size: 13px;
+`
+
+const Details = styled.div`
+  display: table-cell;
+  vertical-align: top;
+`
+
+const Header = styled.div`
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: -3px;
+`
+
+const ModeIcon = styled.div`
+  height: 30px;
+  width: 30px;
+`
+
+const NonTransitSpacer = styled.div`
+  height: 30px;
+  overflow: hidden
+`
+
+const RoutePreivew = styled.div`
+  display: inline-block;
+  margin-left: 8px;
+  vertical-align: top;
+`
+
+const Routes = styled.div`
+  display: table-cell;
+  text-align: right;
+`
+
+const ShortName = styled.div`
+  background-color: ${props => getRouteColorForBadge(props.leg)};
+  border-radius: 15px;
+  border: 2px solid white;
+  box-shadow: 0 0 0.5em #000;
+  color: white;
+  font-size: 15px;
+  font-weight: 500;
+  height: 30px;
+  margin-top: 6px;
+  overflow: hidden;
+  padding-top: 4px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 30px;
+`
+
 export default class ItinerarySummary extends Component {
   static propTypes = {
     itinerary: PropTypes.object
@@ -31,52 +101,54 @@ export default class ItinerarySummary extends Component {
     const { caloriesBurned } = calculatePhysicalActivity(itinerary)
 
     return (
-      <div className='itin-summary' onClick={this._onSummaryClicked}>
-        <div className='details'>
+      <Container onClick={this._onSummaryClicked}>
+        <Details>
           {/* Travel time in hrs/mins */}
-          <div className='header'>{formatDuration(itinerary.duration)}</div>
+          <Header>{formatDuration(itinerary.duration)}</Header>
 
           {/* Duration as time range */}
-          <div className='detail'>
+          <Detail>
             {formatTime(itinerary.startTime, timeOptions)} - {formatTime(itinerary.endTime, timeOptions)}
-          </div>
+          </Detail>
 
           {/* Fare / Calories */}
-          <div className='detail'>
+          <Detail>
             {minTotalFare > 0 && <span>
               {centsToString(minTotalFare)}
               {minTotalFare !== maxTotalFare && <span> - {centsToString(maxTotalFare)}</span>}
               <span> &bull; </span>
             </span>}
             {Math.round(caloriesBurned)} Cals
-          </div>
+          </Detail>
 
           {/* Number of transfers, if applicable */}
           {itinerary.transfers > 0 && (
-            <div className='detail'>
+            <Detail>
               {itinerary.transfers} transfer{itinerary.transfers > 1 ? 's' : ''}
-            </div>
+            </Detail>
           )}
 
-        </div>
-        <div className='routes'>
+        </Details>
+        <Routes>
           {itinerary.legs.filter(leg => {
             return !(leg.mode === 'WALK' && itinerary.transitTime > 0)
           }).map((leg, k) => {
-            return <div className='route-preview' key={k}>
-              <div className='mode-icon'>{getLegIcon(leg, customIcons)}</div>
-              {isTransit(leg.mode)
-                ? (
-                  <div className='short-name' style={{ backgroundColor: getRouteColorForBadge(leg) }}>
-                    {getRouteNameForBadge(leg)}
-                  </div>
-                )
-                : (<div style={{ height: 30, overflow: 'hidden' }} />)
-              }
-            </div>
+            return (
+              <RoutePreivew key={k}>
+                <ModeIcon>{getLegIcon(leg, customIcons)}</ModeIcon>
+                {isTransit(leg.mode)
+                  ? (
+                    <ShortName leg={leg} >
+                      {getRouteNameForBadge(leg)}
+                    </ShortName>
+                  )
+                  : (<NonTransitSpacer />)
+                }
+              </RoutePreivew>
+            )
           })}
-        </div>
-      </div>
+        </Routes>
+      </Container>
     )
   }
 }

lib/components/narrative/line-itin/line-itinerary.js

@@ -1,11 +1,15 @@
 import React from 'react'
+import styled from 'styled-components'
 
+import ItineraryBody from './connected-itinerary-body'
+import ItinerarySummary from './itin-summary'
 import NarrativeItinerary from '../narrative-itinerary'
 import SimpleRealtimeAnnotation from '../simple-realtime-annotation'
 import { getLegModeLabel, getTimeZoneOffset, isTransit } from '../../../util/itinerary'
 
-import ItinerarySummary from './itin-summary'
-import ItineraryBody from './connected-itinerary-body'
+export const LineItineraryContainer = styled.div`
+  margin-bottom: 20px;
+`
 
 export default class LineItinerary extends NarrativeItinerary {
   _headerText () {
@@ -59,7 +63,7 @@ export default class LineItinerary extends NarrativeItinerary {
     }
 
     return (
-      <div className='line-itin'>
+      <LineItineraryContainer>
         <ItinerarySummary
           companies={companies}
           itinerary={itinerary}
@@ -71,7 +75,7 @@ export default class LineItinerary extends NarrativeItinerary {
           ? <ItineraryBody itinerary={itinerary} />
           : null}
         {itineraryFooter}
-      </div>
+      </LineItineraryContainer>
     )
   }
 }

lib/index.css

@@ -11,7 +11,6 @@
 @import url(lib/components/form/form.css);
 @import url(lib/components/narrative/narrative.css);
 @import url(lib/components/narrative/default/itinerary.css);
-@import url(lib/components/narrative/line-itin/itinerary.css);
 @import url(lib/components/mobile/mobile.css);
 @import url(lib/components/viewers/viewers.css);