Refs #45455 @1h; CR updates #1

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>
                   )