Refs #2720: updating pagination

5 files changed, 646 insertions, 64 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
index 65990a52d..07108c01f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -9,15 +9,21 @@ var Tools = require('../containers/Tools')
 
 const App = () => (
   <div>
-    <div>
-      <Filters />
-      <ToggleArrivals />
-      <Navigate />
-      <Tools />
+    <Filters />
+    <div className="row">
+      <div className='col-lg-4 col-md-4 col-sm-4 col-xs-6'>
+        <ToggleArrivals />
+      </div>
+      <div className='col-lg-8 col-md-8 col-sm-8 col-xs-6 text-right'>
+        <Navigate />
+      </div>
     </div>
+
     <VehicleJourneysList />
     <SaveVehicleJourneys />
     <ConfirmModal />
+
+    <Tools />
   </div>
 )
 
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
index a1223abae..2830cc67c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
@@ -13,35 +13,28 @@ let Navigate = ({ dispatch, vehicleJourneys, pagination, status }) => {
   }
   if(status.fetchSuccess == true) {
     return (
-      <div className="vj_wrapper">
-        <div className="page_info">
-          <span className="search">Résultats : {minVJ} - {maxVJ} sur {pagination.totalCount}</span>
-        </div>
-        <form className='btn-group btn-group-sm' onSubmit={e => {
-            e.preventDefault()
-          }}>
+      <div className="pagination">
+        Liste des horaires {minVJ} à {maxVJ} sur {pagination.totalCount}
+
+        <form className='page_links' onSubmit={e => {e.preventDefault()}}>
           <button
             onClick={e => {
               e.preventDefault()
               dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
             }}
-            type="submit"
-            data-toggle=''
+            type='button'
             data-target='#ConfirmModal'
-            className={ (pagination.page == firstPage ? "hidden" : "") + " btn btn-default" }>
-            <span className="fa fa-chevron-left"></span>
-          </button>
+            className={(pagination.page == firstPage ? 'disabled ' : '') + 'previous_page'}
+          ></button>
           <button
             onClick={e => {
               e.preventDefault()
               dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
             }}
-            type="submit"
-            data-toggle=''
+            type='button'
             data-target='#ConfirmModal'
-            className={ (pagination.page == lastPage ? "hidden" : "") + " btn btn-default" }>
-            <span className="fa fa-chevron-right"></span>
-          </button>
+            className={(pagination.page == lastPage ? 'disabled ' : '') + 'next_page'}
+          ></button>
         </form>
       </div>
     )
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
index a04a6253f..7102ebb40 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
@@ -4,12 +4,13 @@ var PropTypes = require('react').PropTypes
 const ToggleArrivals = ({filters, onToggleArrivals}) => {
   return (
     <div className='list-group'>
-        <span> Afficher les horaires d'arrivée</span>
-        <input
-          onChange = {onToggleArrivals}
-          type = 'checkbox'
-          checked = {filters.toggleArrivals}
-        ></input>
+      <span> Afficher les horaires d'arrivée</span>
+      <input
+        onChange = {onToggleArrivals}
+        type = 'checkbox'
+        checked = {filters.toggleArrivals}
+      >
+      </input>
     </div>
   )
 }
diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index 9ef1fd6d4..307182082 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -2,8 +2,31 @@
 // FORMS //
 //-------//
 
+input
+  &::-moz-placeholder
+    color: rgba($grey, 0.65)
+    font-style: italic
+  &::-webkit-input-placeholder
+    color: rgba($grey, 0.65)
+    font-style: italic
+  &:-ms-input-placeholder
+    color: rgba($grey, 0.65)
+    font-style: italic
+  &::-ms-input-placeholder
+    color: rgba($grey, 0.65)
+    font-style: italic
+
+.control-label.required
+  abbr[title], abbr[data-original-title]
+    border: none
+    color: $red
+
 .form-control
   &.form-control-link
+    &, &:first-child
+      border-bottom-right-radius: 4px
+      border-top-right-radius: 4px
+
     &:hover, &:focus
       // Reset default link styles
       text-decoration: none
@@ -12,6 +35,9 @@
       color: #555
       background-color: #f5f5f5
 
+.input-group-btn > .btn-link
+  padding-right: 0
+
 // Validations
 .control-label
   &.is-required
@@ -30,48 +56,602 @@
       box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #5cb85c
 
 // Search bar
-.page_header
-  .search_bar
-    position: relative
-    width: 100%
+.search_bar
+  position: relative
+  background-color: rgba($grey, 0.15)
+  padding: 7px 15px
+  width: 100%
+  padding-right: 60%
 
+  > .form-control
+    vertical-align: top
+    border-color: rgba($grey, 0.3)
+    border-radius: 4px
+    height: 31px
+    padding: 4px 31px 5px 12px
 
-    > .form-control
-      background-color: rgba(#fff, 0.15)
-      color: #fff
-      border: none
+    &:first-child, &:last-child
       border-radius: 4px
-      padding-right: 31px
-
-      &::-moz-placeholder
-        color: rgba(#fff, 0.65)
-        font-style: italic
-      &::-webkit-input-placeholder
-        color: rgba(#fff, 0.65)
-        font-style: italic
-      &:-ms-input-placeholder
-        color: rgba(#fff, 0.65)
-        font-style: italic
-      &::-ms-input-placeholder
-        color: rgba(#fff, 0.65)
-        font-style: italic
-
-      &:focus, &:active
-        box-shadow: none
-
-    .input-group-btn
+
+  .input-group-btn
+    position: absolute
+    top: 0
+    bottom: 0
+    right: 60%
+    z-index: 2
+    width: auto
+
+    > .btn
+      margin: 0
+      padding: 4px 9px 5px 9px
+      border: none
+      border-radius: 0
+      background-color: transparent
+      height: 100%
+
+// Checkbox
+$cbx-size: 20px
+.checkbox
+  position: relative
+  display: block
+  height: $cbx-size
+  width: $cbx-size
+  margin: 0 auto
+
+  > input
+    &[type='checkbox']:not(:checked), &[type='checkbox']:checked
       position: absolute
+      margin: 0
+      left: -9999px
+
+      + label
+        position: relative
+        cursor: pointer
+        display: inline-block
+        height: $cbx-size
+        margin: 0
+        padding-left: $cbx-size
+
+        &:before
+          content: ''
+          position: absolute
+          left: 0
+          top: 50%
+          margin-top: -($cbx-size / 2)
+          width: $cbx-size
+          height: $cbx-size
+          border: 2px solid $blue
+          background-color: #fff
+          border-radius: 3px
+
+        &:after
+          content: '\f00c'
+          font: normal normal normal 14px/1 FontAwesome
+          font-size: inherit
+          text-rendering: auto
+          -webkit-font-smoothing: antialiased
+          position: absolute
+          left: 50%
+          top: 50%
+          margin-top: -($cbx-size / 2)
+          margin-left: -($cbx-size / 2)
+          font-size: $cbx-size - 2px
+          width: $cbx-size
+          line-height: $cbx-size
+          text-align: center
+          color: #fff
+
+    &[type='checkbox']:checked + label:before
+      background-color: $blue
+
+// Radio
+.has_radio
+  position: relative
+  display: block
+  height: $cbx-size
+  width: $cbx-size
+  margin: 0 auto
+
+  > input[type='checkbox']
+    &:not(:checked), &:checked
+      position: absolute
+      z-index: 5
+      margin: 0
+      left: 0
       top: 0
-      bottom: 0
-      right: 0
-      z-index: 2
+      height: $cbx-size
+      width: $cbx-size
+      opacity: 0
+      cursor: pointer
+
+      + .radio-label
+        display: inline-block
+        position: relative
+        height: $cbx-size
+        width: $cbx-size
+        margin: 0
+        background-color: #fff
+        border: 2px solid $blue
+        border-radius: 50%
+        // cursor: pointer
+
+    &:checked + .radio-label
+      background-color: $blue
+
+    &:disabled
+      cursor: not-allowed
+
+      + .radio-label
+        opacity: 0.5
+
+// Switch
+.has_switch
+  &.form-group
+    > .form-group
+      margin: 0
+
+    .checkbox
+      padding: 0
+      margin: 0
+      display: inline-block
+      min-height: 0
       width: auto
+      height: 34px
+      line-height: 34px
+
+      > label
+        position: relative
+        min-height: 0
+        padding: 0
+        margin: 0
+
+        > input[type='checkbox']
+          position: absolute
+          left: -9999px
+          margin: 0
+
+          + .switch-label
+            position: relative
+            display: inline-block
+            width: 50px
+            height: 30px
+            padding-left: 60px
+            line-height: 30px
+            color: $blue
+
+            &:before
+              content: ''
+              position: absolute
+              left: 0
+              top: 0
+              display: inline-block
+              width: 50px
+              height: 30px
+              background-color: $blue
+              border-radius: 18px
+
+            &:after
+              content: ''
+              position: absolute
+              left: 0
+              top: 0
+              margin: 2px
+              width: 26px
+              height: 26px
+              border-radius: 50%
+              background-color: #fff
+              transition: 0.2s
+
+          &:checked + .switch-label:after
+            left: 0
+            transition: 0.2s
+          &:not(:checked) + .switch-label:after
+            left: 20px
+            transition: 0.2s
+
+// Form filter
+.form.form-filter
+  display: block
+  position: relative
+  background-color: rgba($grey, 0.15)
+  padding-right: 185px
+  min-height: 42px
+  border-top: 1px solid #fff
+
+  &:first-child
+    border-top: none
+
+  > *
+    display: inline-block
+    vertical-align: top
+    padding: 7px 15px
+
+  > .form-group
+    border-right: 1px solid #fff
+    margin: 0
+    min-height: 44px
+    padding: 5px 15px
+
+    .control-label
+      font-weight: 700
+      color: $darkgrey
+      line-height: 34px
+      margin: 0
+      padding: 0 10px 0 0
+      vertical-align: middle
+
+    > .form-control, > .form-group.date
+      display: inline-block
+      width: auto
+      vertical-align: top
+
+  > .actions
+    position: absolute
+    right: 15px
+    top: 50%
+    padding: 0
+    margin-top: -13px
+    z-index: 1
+
+    .btn
+      color: $blue
+      font-weight: 700
+      background-color: transparent
+      padding: 2px 20px
+      transition: 0.2s
+
+      &.btn-link
+        padding: 2px 10px
+
+        &:hover, &:focus
+          text-decoration: none
+
+      &.btn-default
+        border: 1px solid $blue
+
+        &:hover, &:focus, &.focus, &.active
+          background-color: $blue
+          color: #fff
+          transition: 0.2s
+
+  > .form-group
+    position: relative
+
+    &.togglable
+      padding: 7px 44px 7px 15px
+      cursor: pointer
+
+      > .control-label
+        cursor: pointer
+        vertical-align: top
+        line-height: 44px - 14px
+        padding: 0
+
+      > .form-control
+        display: block
+        width: 100%
+
+      &:hover, &.open
+        background-color: $blue
+        color: #fff
+
+        > .control-label, &:before
+          color: #fff
+
+      &:before
+        content: '\f078'
+        font: normal normal normal 14px/1 FontAwesome
+        font-size: inherit
+        text-rendering: auto
+        -webkit-font-smoothing: antialiased
+        position: absolute
+        right: 15px
+        top: 0
+        height: 44px
+        width: 15px
+        color: $blue
+        text-align: center
+        line-height: 44px
+
+      &.open:before
+        content: '\f077'
+        color: #fff
+
+      > .control-label + *
+        display: none
+
+      &.open > .control-label + *
+        display: block
 
-      > .btn
+    > .filter_menu
+      margin: 0
+      padding: 5px 0
+      position: absolute
+      z-index: 555
+      top: 100%
+      left: 0
+      min-width: 100%
+      max-height: 300px
+      background-color: #fff
+      color: $darkgrey
+      box-shadow: 0 0 3px rgba($darkgrey, 0.25)
+      white-space: nowrap
+      overflow: auto
+
+      > .filter_menu-item
+        display: block
+        margin: 0
+        padding: 5px 15px
+        width: 100%
+
+        > *
+          display: inline-block
+
+        &.date > .form-inline
+          width: 260px
+
+          select.date
+            width: 42%
+            &:first-child
+              width: 25%
+            &:last-child
+              width: 33%
+
+    > .checkbox_list
+      margin: 0
+      padding: 5px 0
+      position: absolute
+      z-index: 555
+      top: 100%
+      left: 0
+      min-width: 100%
+      max-height: 300px
+      background-color: #fff
+      color: $darkgrey
+      box-shadow: 0 0 3px rgba($darkgrey, 0.25)
+      white-space: nowrap
+      overflow: auto
+
+      $cbx-size-xs: 14px
+      > .checkbox
+        width: 100%
+        height: auto
         margin: 0
-        padding: 6px 9px
-        border: none
-        border-radius: 0
-        background-color: transparent
+
+        > label
+          position: relative
+          display: block
+          padding: 5px 15px
+          min-height: $cbx-size-xs
+
+          &:hover
+            background-color: whitesmoke
+
+          > input
+            &[type='checkbox']:not(:checked), &[type='checkbox']:checked
+              position: absolute
+              left: -9999px
+              margin: 0
+
+              + span
+                display: block
+                padding-left: $cbx-size-xs + 10
+                padding-right: $cbx-size-xs + 10
+                position: relative
+
+                > .fa:last-child
+                  position: absolute
+                  top: 50%
+                  right: 0
+                  margin-top: -7px
+
+                &:before
+                  content: ''
+                  position: absolute
+                  left: 0
+                  top: 50%
+                  margin-top: -($cbx-size-xs / 2)
+                  width: $cbx-size-xs
+                  height: $cbx-size-xs
+                  border: 2px solid $blue
+                  background-color: #fff
+                  border-radius: 3px
+
+                &:after
+                  content: '\f00c'
+                  font: normal normal normal 14px/1 FontAwesome
+                  font-size: inherit
+                  text-rendering: auto
+                  -webkit-font-smoothing: antialiased
+                  position: absolute
+                  left: 0
+                  top: 50%
+                  margin-top: -($cbx-size-xs / 2)
+                  font-size: $cbx-size-xs - 2px
+                  width: $cbx-size-xs
+                  line-height: $cbx-size-xs
+                  text-align: center
+                  color: #fff
+
+            &[type='checkbox']:checked + span:before
+              background-color: $blue
+
+// Form group date
+.form-group.date
+  .form-inline
+    letter-spacing: -0.31em
+    text-rendering: optimizespeed
+    font-weight: 300
+
+    > *
+      letter-spacing: normal
+      word-spacing: normal
+      text-rendering: auto
+
+    select.date
+      display: inline-block
+      letter-spacing: normal
+      word-spacing: normal
+      text-rendering: auto
+      vertical-align: middle
+      border-radius: 0
+      border-right: none
+      border-left: none
+      width: 40%
+
+      &:first-child
+        border-top-left-radius: 4px
+        border-bottom-left-radius: 4px
+        border-left: 1px solid #ccc
+        border-right: 1px dashed #ccc
+        width: 27%
+
+      &:nth-child(3)
+        border-top-right-radius: 4px
+        border-bottom-right-radius: 4px
+        border-right: 1px solid #ccc
+        border-left: 1px dashed #ccc
+        width: 33%
+
+  &.has-error
+    .form-control, select.date, select.date:first-child, select.date:nth-child(3)
+      border-color: $red
+
+// Nested fields
+.nested-fields
+  margin: 0
+  padding: 0 5px
+  border-top: 1px solid rgba($grey, 0.5)
+
+  &:first-child
+    border-top: none
+
+  &[class*='col']
+    border: none
+    padding: 0 15px
+    margin: 0
+
+  .wrapper
+    display: table
+    table-layout: fixed
+    width: 100%
+
+    > div
+      display: table-cell
+      vertical-align: middle
+      padding: 10px
+
+      &:last-child
+        width: 34px
+
+      &[class*='actions-']
+        .btn
+          &, & + .btn
+          margin: 0
+          padding-right: 0
+          padding-left: 0
+          width: 25px
+          text-align: center
+
+      .form-group
+        margin: 0
+        padding: 0
+
+      .navlink
+        color: inherit
+        font-weight: 700
+
+        &:hover, &:focus
+          text-decoration: none
+
+    @for $i from 1 through 10
+      > div.actions-#{$i}
+        width: 25px * $i + 20px
+
+  .remove_fields
+    height: 34px
+    // width: 34px
+    line-height: 34px
+    text-align: center
+    color: $red
+
+    &:hover, &:focus
+      text-decoration: none
+      color: darken($red, 10%)
+
+    &.btn-danger
+      color: #fff
+      line-height: 1.42857
+
+    &.btn-outline-danger
+      line-height: 1.42857
+      background-color: transparent
+      border-color: $red
+      color: $red
+
+      &:hover, &:focus, &.focus, &:active, &.active,
+      .open > .btn-primary.dropdown-toggle
+        background-color: $red
         color: #fff
-        height: 100%
+
+.nested-head
+  margin: 0
+  padding: 0 5px
+
+  + .nested-fields
+    border-top: 2px solid $darkgrey
+
+  .wrapper
+    display: table
+    table-layout: fixed
+    width: 100%
+
+    > div
+      display: table-cell
+      vertical-align: top
+      padding: 0 10px 10px 10px
+
+      &:last-child
+        width: 34px
+
+      .form-group
+        margin: 0
+        padding: 0
+
+        .control-label
+          margin: 0
+          padding: 0
+
+    @for $i from 1 through 10
+      > div.actions-#{$i}
+        width: 25px * $i + 20px
+
+.nested-linker
+  padding: 20px 0 0 0
+  text-align: right
+  border-top: 1px solid rgba($grey, 0.5)
+  clear: both
+
+  [class*='col'] ~ &
+    margin: 0 15px
+
+  .subform + &
+    margin-top: -15px
+    margin-bottom: 15px
+
+// Subforms
+.subform
+  margin: 0 0 15px 0
+
+  > .form-group
+    margin: 0
+    padding: 10px 15px
+
+    .control-label
+      text-align: left
+      margin: 0 0 10px 0
+      padding: 0
+
+      + [class*='col']
+        width: 100%
+        padding: 0
diff --git a/app/assets/stylesheets/components/_pagination.sass b/app/assets/stylesheets/components/_pagination.sass
index 905cd6154..798e177cb 100644
--- a/app/assets/stylesheets/components/_pagination.sass
+++ b/app/assets/stylesheets/components/_pagination.sass
@@ -29,6 +29,8 @@
       padding: 4px 10px
       color: $blue
       text-decoration: none
+      background-color: transparent
+      border: none
 
       + *
         border-left: 1px solid $darkgrey