Refs #2720: updating pagination

3 files changed, 28 insertions, 28 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>
   )
 }