diff options
3 files changed, 179 insertions, 131 deletions
diff --git a/app/assets/stylesheets/modules/_jp_collection.sass b/app/assets/stylesheets/modules/_jp_collection.sass index 90005ac3d..ec7abc9de 100644 --- a/app/assets/stylesheets/modules/_jp_collection.sass +++ b/app/assets/stylesheets/modules/_jp_collection.sass @@ -5,6 +5,7 @@ #journey_patterns .table-2entries .t2e-head + > .td position: relative padding-left: 25px @@ -99,148 +100,191 @@ top: 50% margin-top: -8px - // Errors - .table-2entries .t2e-item-list - .t2e-item - position: relative - overflow: hidden + .table-2entries + .t2e-item-list + .t2e-item + position: relative + overflow: hidden - .th .vj_tt - display: inline-block - vertical-align: top + .th .vj_tt + display: inline-block + vertical-align: top - + .vj_tt - margin-left: 5px + + .vj_tt + margin-left: 5px - &.with-costs + &.with-costs + .td + padding: 15px 8px - & > div - position: relative - - .link - left: 35px - - .has_radio - margin-right: 150px - - .costs - background: $lightgrey - padding: 5px - color: white - position: absolute - cursor: not-allowed - left: 75px - top: -1px - transform: translateY(-50%) - font-size: 0.75em - transition: background 0.1s - border: 1px solid white - - &:hover + $link-size: 10px + .link + position: absolute + left: 50px + width: 10px + top: -15px + bottom: -15px background: $blue + z-index: 3 + opacity: 0.5 &:after - background: $blue - &:after - content: "" - height: 2px + content: "" + width: $link-size + height: $link-size + position: absolute + top: 50% + bottom: 50% + margin-top: -$link-size/2 + border-top: $link-size/2 solid transparent + border-left: $link-size/2 solid transparent + border-right: $link-size/2 solid $blue + border-bottom: $link-size/2 solid $blue + transform: rotate(135deg) + left: 0% + opacity: 0 + transition: left 0.2s, opacity 0.2s + + .headlined .link + top: 0 + bottom: -15px + + &:after + top: 75% + margin-top: -$link-size/2 - 1px + + .activated .link + &:after + left: -50% + opacity: 1 + + & > div + position: relative + + .link + left: 35px + + .has_radio + margin-right: 150px + + .costs + background: $blue + opacity: 0.5 + padding: 5px + color: white position: absolute - left: -30px - background: $lightgrey - right: 100% - top: 50% + cursor: not-allowed + left: 75px + top: -1px + transform: translateY(-50%) + font-size: 0.75em transition: background 0.1s + border: 1px solid white - p - display: block - border: none - margin-bottom: 0 - i - margin-right: 3px - width: 12px - & + p - position: relative - z-index: 2 - padding-right: 0 - margin: 0 - border-right: none - - input - display: inline-block - width: 40px + &:hover + opacity: 1 + &:after + opacity: 1 + + &:after + opacity: 0.5 + content: "" + height: 2px + position: absolute + left: -23px + background: $blue + right: 100% + top: 50% + transition: background 0.1s + + p + display: block border: none - margin-right: 5px - color: black - - .edit-mode .costs - cursor: pointer - p - margin-bottom: 5px - & + p - margin-bottom: 0 + margin-bottom: 0 + i + margin-right: 3px + width: 12px + & + p + position: relative + z-index: 2 + padding-right: 0 + margin: 0 + border-right: none + + input + display: inline-block + width: 40px + border: none + margin-right: 5px + color: black + + .edit-mode + .costs + cursor: pointer + p + margin-bottom: 5px + & + p + margin-bottom: 0 + + opacity: 1 + &:after + opacity: 1 - background: $blue - &:after - background: $blue + .link + opacity: 1 + .with-headline + .costs + top: 25% - .with-headline + .costs - top: 25% + .deactivated .costs + display: none - .deactivated .costs - display: none + &.has-error + &:before + content: '' + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + border: 2px solid $red - $link-size: 10px - .link - position: absolute - left: 50px - width: 10px - top: -7px - bottom: -7px - background: $blue - z-index: 3 - &:after - content: "" - width: $link-size - height: $link-size - position: absolute - top: 50% - bottom: 50% - margin-top: -$link-size/2 - border-top: $link-size/2 solid transparent - border-left: $link-size/2 solid transparent - border-right: $link-size/2 solid $blue - border-bottom: $link-size/2 solid $blue - transform: rotate(135deg) - left: 0% - opacity: 0 - transition: left 0.2s, opacity 0.2s - - .activated .link - &:after - left: -50% - opacity: 1 + > .th + > div:first-child, > div:first-child + div + color: $red - .headlined - .link - top: 0 - &:after - top: 75% - margin-top: -$link-size/2 - 1px + // Reset default behaviour + .form-control + border-color: #ccc - &.has-error - &:before - content: '' - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - border: 2px solid $red - - > .th - > div:first-child, > div:first-child + div - color: $red - - // Reset default behaviour - .form-control - border-color: #ccc + .t2e-head + .td.with-costs + & > div + &:not(.headlined) + height: calc(100% + 6px) + & > span + &:after + top: -15px + bottom: -9px + + div.headlined + &:before + margin-bottom: 0 + & > span + height: calc(100% - (1.4em + 15px)) + &:after + top: calc((1.4em + 30px) * -1) + bottom: 0 + + .td.with-costs, .with-costs .td + padding-top: 15px + padding-bottom: 15px + + & > div + height: calc(100% + 15px) + &.headlined + &:before + padding-top: 15px + padding-bottom: 15px + height: calc(1.4em + 30px) + margin-top: -15px + margin-bottom: 15px diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js index 40a6899e2..69eff978e 100644 --- a/app/javascript/journey_patterns/components/JourneyPattern.js +++ b/app/javascript/journey_patterns/components/JourneyPattern.js @@ -12,7 +12,7 @@ export default class JourneyPattern extends Component{ updateCosts(e) { let costs = { [e.target.dataset.costsKey]: { - [e.target.name]: parseInt(e.target.value) + [e.target.name]: parseFloat(e.target.value) } } this.props.onUpdateJourneyPatternCosts(costs) @@ -163,7 +163,7 @@ export default class JourneyPattern extends Component{ {this.hasFeature('costs_in_journey_patterns') && costs && <div className='costs' id={'costs-' + this.props.value.id + '-' + costsKey }> {this.props.editMode && <div> <p> - <input type="number" value={costs['distance'] || 0} min='0' name="distance" onChange={this.updateCosts} data-costs-key={costsKey}/> + <input type="number" value={costs['distance'] || 0} min='0' name="distance" step="0.01" onChange={this.updateCosts} data-costs-key={costsKey}/> <span>km</span> </p> <p> diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js index 69024050f..1e391b0c2 100644 --- a/app/javascript/journey_patterns/components/JourneyPatterns.js +++ b/app/javascript/journey_patterns/components/JourneyPatterns.js @@ -54,6 +54,10 @@ export default class JourneyPatterns extends Component { } } + hasFeature(key) { + return this.props.status.features[key] + } + cityNameChecker(sp) { let bool = false if(sp.city_name != this.previousCity){ @@ -115,7 +119,7 @@ export default class JourneyPatterns extends Component { </div> {this.props.stopPointsList.map((sp, i) =>{ return ( - <div key={i} className='td'> + <div key={i} className={'td' + (this.hasFeature('costs_in_journey_patterns') ? ' with-costs' : '')}> {this.cityNameChecker(sp)} </div> ) |