Refs #2728: updating td input cells on VJ t2e comp.

3 files changed, 41 insertions, 35 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
index a2d596168..8fda42dc1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
@@ -7,10 +7,21 @@ class VehicleJourney extends Component {
     super(props)
   }
 
+  columnHasDelta() {
+    let a = []
+    this.props.value.vehicle_journey_at_stops.map((vj, i) => {
+      a.push(vj.delta)
+    })
+    let b = a.reduce((p, c) => p+c, 0)
+
+    if(b > 0) {
+      return true
+    }
+  }
+
   render() {
     return (
-      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '')} >
-
+      <div className={'t2e-item' + (this.props.value.deletable ? ' disabled' : '')}>
         <div className='th'>
           <div className='strong mb-xs'>{this.props.value.objectid ? this.props.value.objectid : '-'}</div>
           <div>{this.props.value.journey_pattern.objectid}</div>
@@ -20,9 +31,7 @@ class VehicleJourney extends Component {
             )}
           </div>
 
-          <div
-            className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}
-          >
+          <div className={(this.props.value.deletable ? 'disabled ' : '') + 'checkbox'}>
             <input
               id={this.props.index}
               name={this.props.index}
@@ -31,13 +40,13 @@ class VehicleJourney extends Component {
               disabled={this.props.value.deletable}
               checked={this.props.value.selected}
             ></input>
-          <label htmlFor={this.props.index}></label>
+            <label htmlFor={this.props.index}></label>
           </div>
         </div>
 
         {this.props.value.vehicle_journey_at_stops.map((vj, i) =>
-          <div key={i} className='td'>
-            <div className='inline-table'>
+          <div key={i} className='td text-center'>
+            <div className='cellwrap'>
               {this.props.filters.toggleArrivals &&
                 <div>
                   <span className='input-group time'>
@@ -63,11 +72,11 @@ class VehicleJourney extends Component {
                   </span>
                 </div>
                 }
-                {(vj.delta != 0) &&
-                  <div>
+                <div className={(this.columnHasDelta() ? '' : 'hidden')}>
+                  {(vj.delta != 0) &&
                     <span className='sb sb-chrono sb-lg text-warning' data-textinside={vj.delta}></span>
-                  </div>
-                }
+                  }
+                </div>
                 <div>
                   <span className='input-group time'>
                     <input
diff --git a/app/assets/stylesheets/base/_utilities.sass b/app/assets/stylesheets/base/_utilities.sass
index 65091e904..ae2901231 100644
--- a/app/assets/stylesheets/base/_utilities.sass
+++ b/app/assets/stylesheets/base/_utilities.sass
@@ -46,3 +46,23 @@
 =emptyzone($col1, $col2)
   background-image: linear-gradient(-45deg, $col1 25%, $col2 25%, $col2 50%, $col1 50%, $col1 75%, $col2 75%, transparent)
   background-size: 40px 40px
+
+.cellwrap
+  display: block
+  // To avoid white spaces between childrend inline-block
+  letter-spacing: -0.31em
+  text-rendering: optimizespeed
+  font-weight: 400
+
+  > div
+    display: inline-block
+    // To avoid white spaces between children inline-block
+    letter-spacing: normal
+    word-spacing: normal
+    text-rendering: auto
+    overflow: hidden
+    vertical-align: middle
+    min-width: 20px
+
+    + div
+      margin-left: 5px
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 0fea4670c..fb93b0593 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -144,29 +144,6 @@
     font-size: 0.85em
 
 
-//-----------------//
-//  Inline tables  //
-//-----------------//
-
-.inline-table
-  display: table
-  width: 100%
-
-  > *
-    display: table-cell
-
-    > .fa, > .sb
-      padding: 0 10px
-
-    &:first-child
-      > .fa, > .sb
-        padding-left: 0
-
-    &:last-child
-      > .fa, > .sb
-        padding-right: 0
-
-
 //-----------------------------//
 //  Tables (column by column)  //
 //-----------------------------//