fix(example): Fix bundled example

Author: David Emory

example-config.yml

@@ -23,5 +23,12 @@ geocoder:
       maxLat: 45.7445
   MAPZEN_KEY: MAPZEN_KEY
 
-modes:
-  - TRANSIT,WALK
+modeGroups:
+  - name: Transit
+    modes:
+      - TRAM
+      - BUS
+  - name: Walk/Bike
+    modes:
+      - WALK
+      - BICYCLE

example.css

@@ -1,4 +1,4 @@
-.row {
+.main-row {
   position: fixed;
   top: 52px;
   bottom: 0px;
@@ -18,3 +18,7 @@
   margin: 0px;
   padding: 0px;
 }
+
+.date-time-selector {
+  margin-top: 20px;
+}

example.js

@@ -11,20 +11,19 @@ import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
 // import OTP-RR components
 import {
+  BaseLayers,
+  BaseMap,
+  DateTimeSelector,
   EndpointsOverlay,
-  ItineraryCarousel,
+  ErrorMessage,
   ItineraryOverlay,
   LocationField,
-  ModeSelector,
-  DateTimeSelector,
-  // NarrativeItineraries,
-  BaseMap,
-  BaseLayers,
-  // OsmBaseLayer,
+  NarrativeItineraries,
   PlanTripButton,
-  createOtpReducer,
-  ErrorMessage,
-  SwitchButton
+  SettingsSelectorPanel,
+  SwitchButton,
+
+  createOtpReducer
 } from './lib'
 
 // load the OTP configuration
@@ -61,17 +60,16 @@ class OtpRRExample extends Component {
         <Navbar.Brand>OpenTripPlanner</Navbar.Brand>
       </Navbar>
       <Grid fluid>
-        <Row>
+        <Row className='main-row'>
           <Col xs={12} md={4} className='sidebar'>
             <LocationField type='from' label='Enter start location or click on map...' />
             <LocationField type='to' label='Enter destination or click on map...' />
             <SwitchButton />
-            <ModeSelector />
             <DateTimeSelector />
+            <SettingsSelectorPanel />
             <ErrorMessage />
             <PlanTripButton />
-            {/* <NarrativeItineraries /> */}
-            <ItineraryCarousel />
+            <NarrativeItineraries />
           </Col>
 
           <Col xsHidden md={8} className='map-container'>

lib/components/narrative/default/default-itinerary.js

@@ -18,7 +18,7 @@ export default class DefaultItinerary extends NarrativeItinerary {
       setActiveStep
     } = this.props
     return (
-      <div className={`option itinerary${active ? ' active' : ''}`}>
+      <div className={`option default-itin${active ? ' active' : ''}`}>
         <button
           className='header'
           onClick={this._onHeaderClick}

lib/components/narrative/narrative.css

@@ -22,10 +22,9 @@
 
 /* ITINERARY OPTION */
 
-.otp .option .default-itin {
+.otp .option.default-itin {
   margin-bottom: 16px;
   padding: 10px;
-  background-color: green;
   border: 1px solid #e3e3e3;
   border-radius: 4px
 }
@@ -38,51 +37,51 @@
   background-color: #EAF3F2;
 }
 
-.otp .option .default-itin > .header {
+.otp .option.default-itin > .header {
   font-size: 16px;
   /*padding-bottom: 4px;*/
   /*border-bottom: 1px solid black;*/
   /*margin-bottom: 6px;*/
   cursor: pointer;
 }
 
-.otp .option .default-itin > .header > .title {
+.otp .option.default-itin > .header > .title {
   font-weight: bold;
 }
 
-.otp .option .default-itin > .header > .summary {
+.otp .option.default-itin > .header > .summary {
   text-align: center;
   margin: 8px 0px;
 }
 
 /* ITINERARY LEG */
 
-.otp .option .default-itin .leg {
+.otp .option.default-itin .leg {
   background-color: #d0d0d0;
   padding: 6px;
   margin-bottom: 8px;
 }
 
-.otp .option .default-itin .leg:hover {
+.otp .option.default-itin .leg:hover {
   background-color: var(--hover-color);
 }
 
-.otp .option .default-itin .leg.active {
+.otp .option.default-itin .leg.active {
   background-color: #ddd;
 }
 
-.otp .option .default-itin .leg > .header {
+.otp .option.default-itin .leg > .header {
   cursor: pointer;
 }
 
-.otp .option .default-itin .leg .stop-count {
+.otp .option.default-itin .leg .stop-count {
   cursor: pointer;
   /*margin-bottom: 4px;*/
   padding: 4px;
   margin-left: 8px;
 }
 
-.otp .option .default-itin .leg .stop-list {
+.otp .option.default-itin .leg .stop-list {
   cursor: pointer;
   margin-bottom: 4px;
   padding: 4px;
@@ -91,42 +90,42 @@
   list-style: none;
 }
 
-.otp .Itin .option .default-itin .leg .item {
+.otp .Itin .option.default-itin .leg .item {
   padding: 2px;
   font-size: small;
 }
 
-.otp .option .default-itin .leg .alert-item {
+.otp .option.default-itin .leg .alert-item {
   padding-left: 22px;
 }
 
-.otp .option .default-itin .leg .stop-list .stop-item {
+.otp .option.default-itin .leg .stop-list .stop-item {
   padding-left: 0px;
 }
 
-.otp .option .default-itin .leg .stop-list .info-item {
+.otp .option.default-itin .leg .stop-list .info-item {
   padding-left: 12px;
 }
 
 /* ITINERARY STEP */
 
-.otp .option .default-itin .step {
+.otp .option.default-itin .step {
   cursor: pointer;
   background-color: #eee;
   margin-bottom: 4px;
   padding: 4px;
   font-size: x-small;
 }
 
-.otp .option .default-itin .step:hover {
+.otp .option.default-itin .step:hover {
   background-color: var(--hover-color);
 }
 
-.otp .option .default-itin .step.active {
+.otp .option.default-itin .step.active {
   background-color: #ccc;
   /*border: 1px dotted;*/
 }
 
-.otp .option .default-itin .step .step-distance {
+.otp .option.default-itin .step .step-distance {
   float: right;
 }