UI WIP

src/components/FloatPane.js

@@ -37,6 +37,7 @@ const StyledLRPaddingNav = styled.nav`
 padding-right: 10px;
 padding-left: 0;
 margin-bottom: 5px !important;
+min-height: 44px;
 `
 
 const StyledPaneToggler = styled.div`

src/components/StopList.js

@@ -10,7 +10,6 @@ const StyledBox = styled.div`
 background: #fafafa;
 `
 
-
 class StopList extends Component {
 
   componentWillMount() {
@@ -60,7 +59,7 @@ class StopList extends Component {
             <Link to={`/map/stop/${ele.stop_id}`}>{ele.stop_id} - {ele.name}</Link>
           </span>
         ))}
-        {results.length === 0 && <span key="empty-farerule" className="panel-block">
+        {results.length === 0 && <span key="empty-stop" className="panel-block">
           No stop found</span>}
       </nav>
       </StyledBox>

src/components/StopTimeOne.js

@@ -33,6 +33,7 @@ class StopTimeOne extends Component {
             Stop <a onClick={() => this.toggleEditMode()}>EDIT</a>
           </p>
           <p className="title">{item.sequence}. {item.stop.stop_id}</p>
+          <div style={{maxWidth: '11rem'}}><small>{item.stop.name}</small></div>
         </div>
       </div>
       <div className="level-item has-text-centered">

src/components/TripForm.js

@@ -223,7 +223,7 @@ class TripForm extends Component {
 
   render () {
     const one = this.state
-    const { frequency } = this.props
+    const { frequency, stoptime } = this.props
     const { fetching } = this.props.trip
     // redirect to view page if no data
     const { agencyId, routeId } = this.props.match.params
@@ -247,8 +247,9 @@ class TripForm extends Component {
             trip={this.state.id}
             toggleEditMode={this.toggleNewStopTime} /> }
         </StyleBox>
-        {this.props.stoptime.results.map(
+        {stoptime.results
-          ele => <StopTimeOne key={`stb-${ele.id}`} item={ele} />)}
+          .sort((a, b) => a.sequence - b.sequence)
+          .map(ele => <StopTimeOne key={`stb-${ele.id}`} item={ele} />)}
       </div>
       )
     }