diff options
4 files changed, 109 insertions, 44 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 e92285a74..a2d596168 100644 --- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js +++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js @@ -37,49 +37,61 @@ class VehicleJourney extends Component { {this.props.value.vehicle_journey_at_stops.map((vj, i) => <div key={i} className='td'> - {this.props.filters.toggleArrivals && - <span> - <input - type='number' - min='00' - max='23' - disabled = {this.props.value.deletable} - onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'hour', false, false)}} - value={vj.arrival_time['hour']} - /> - <span>:</span> - <input - type='number' - min='00' - max='59' - disabled = {this.props.value.deletable} - onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'minute', false, false)}} - value={vj.arrival_time['minute']} - /> - </span> - } - {(vj.delta != 0) && - <span>Delta: {vj.delta}</span> - } - <span> - <input - type='number' - min='00' - max='23' - disabled = {this.props.value.deletable} - onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'hour', true, this.props.filters.toggleArrivals)}} - value={vj.departure_time['hour']} - /> - <span>:</span> - <input - type='number' - min='00' - max='59' - disabled = {this.props.value.deletable} - onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, "minute", true, this.props.filters.toggleArrivals)}} - value={vj.departure_time['minute']} - /> - </span> + <div className='inline-table'> + {this.props.filters.toggleArrivals && + <div> + <span className='input-group time'> + <input + type='number' + min='00' + max='23' + className='form-control' + disabled={this.props.value.deletable} + onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'hour', false, false)}} + value={vj.arrival_time['hour']} + /> + <span>:</span> + <input + type='number' + min='00' + max='59' + className='form-control' + disabled={this.props.value.deletable} + onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'minute', false, false)}} + value={vj.arrival_time['minute']} + /> + </span> + </div> + } + {(vj.delta != 0) && + <div> + <span className='sb sb-chrono sb-lg text-warning' data-textinside={vj.delta}></span> + </div> + } + <div> + <span className='input-group time'> + <input + type='number' + min='00' + max='23' + className='form-control' + disabled={this.props.value.deletable} + onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, 'hour', true, this.props.filters.toggleArrivals)}} + value={vj.departure_time['hour']} + /> + <span>:</span> + <input + type='number' + min='00' + max='59' + className='form-control' + disabled={this.props.value.deletable} + onChange={(e) => {this.props.onUpdateTime(e, i, this.props.index, "minute", true, this.props.filters.toggleArrivals)}} + value={vj.departure_time['minute']} + /> + </span> + </div> + </div> </div> )} </div> diff --git a/app/assets/stylesheets/base/_config.sass b/app/assets/stylesheets/base/_config.sass index 2660ae3cb..1b8038725 100644 --- a/app/assets/stylesheets/base/_config.sass +++ b/app/assets/stylesheets/base/_config.sass @@ -19,3 +19,5 @@ $grey: #a4a4a4 $green: #006d5c $red: #e22019 + +$orange: #ed7f00 diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass index de0d88af0..14d797f20 100644 --- a/app/assets/stylesheets/components/_forms.sass +++ b/app/assets/stylesheets/components/_forms.sass @@ -38,6 +38,25 @@ input .input-group-btn > .btn-link padding-right: 0 +// Time input groups +.input-group.time + > .form-control + float: none + width: auto + padding: 6px 8px + + &:first-child + border-right: none + &:last-child + border-left: none + + + span + display: table-cell + width: 1px + border-top: 1px solid #ccc + border-bottom: 1px solid #ccc + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) + // Validations .control-label &.is-required @@ -146,8 +165,17 @@ $cbx-size-xs: 15px &[type='checkbox']:checked + label:before background-color: $blue -// Table checkboxes +// Table adjustments table, .table + .td, td, .th, th + .form-control + height: 30px + padding: 4px 12px + + .input-group.time > .form-control + padding: 4px 6px + + // Table checkboxes &.table-2entries .t2e-item > .th position: relative diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass index fb93b0593..0fea4670c 100644 --- a/app/assets/stylesheets/components/_tables.sass +++ b/app/assets/stylesheets/components/_tables.sass @@ -144,6 +144,29 @@ 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) // //-----------------------------// |