Refs #2720: updating togglearrivals

4 files changed, 20 insertions, 11 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 07108c01f..8e0cbde43 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
@@ -11,10 +11,10 @@ const App = () => (
   <div>
     <Filters />
     <div className="row">
-      <div className='col-lg-4 col-md-4 col-sm-4 col-xs-6'>
+      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
         <ToggleArrivals />
       </div>
-      <div className='col-lg-8 col-md-8 col-sm-8 col-xs-6 text-right'>
+      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right'>
         <Navigate />
       </div>
     </div>
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
index 5f539a067..c866f3f78 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
@@ -5,7 +5,7 @@ var TimetableSelect2 = require('./tools/select2s/TimetableSelect2')
 
 const Filters = ({filters, onFilter, onResetFilters, onUpdateTimeFilter, onToggleWithoutSchedule}) => {
   return (
-    <div className = 'form-filter'>
+    <div className = 'form-filter mb-lg'>
       <div className = 'form-group'>
         <span><MissionSelect2 /></span>
       </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 2830cc67c..d330870e3 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
@@ -25,6 +25,7 @@ let Navigate = ({ dispatch, vehicleJourneys, pagination, status }) => {
             type='button'
             data-target='#ConfirmModal'
             className={(pagination.page == firstPage ? 'disabled ' : '') + 'previous_page'}
+            disabled={(pagination.page == firstPage ? true : false)}
           ></button>
           <button
             onClick={e => {
@@ -34,6 +35,7 @@ let Navigate = ({ dispatch, vehicleJourneys, pagination, status }) => {
             type='button'
             data-target='#ConfirmModal'
             className={(pagination.page == lastPage ? 'disabled ' : '') + 'next_page'}
+            disabled={(pagination.page == lastPage ? true : false)}
           ></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 7102ebb40..48fee683f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
@@ -3,14 +3,21 @@ 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>
+    <div className='has_switch form-group inline'>
+      <label htmlFor='toggleArrivals' className='control-label'>Afficher et éditer les horaires d'arrivée</label>
+      <div className='form-group'>
+        <div className='checkbox'>
+          <label>
+            <input
+              onChange={onToggleArrivals}
+              type='checkbox'
+              checked={filters.toggleArrivals}
+              >
+            </input>
+            <span className='switch-label'></span>
+          </label>
+        </div>
+      </div>
     </div>
   )
 }