Firefox fixes (#1487)

* Added UI fixes for firefox (web and mobile). Re-added temporary storing of timestamp selected by time slider input (so that its value is not reset by accidental mouseover of the history graph). This temporary value is now stored in redux state instead of internally in the slider component.

* Variable rename

web/src/components/timeslider.js

@@ -107,8 +107,8 @@ export default class TimeSlider {
     }
   }
 
-  selectedIndex(index) {
-    this._selectedIndex = index;
+  selectedIndex(index, previousIndex) {
+    this._selectedIndex = index || previousIndex;
     this.render();
     return this;
   }

web/src/main.js

@@ -805,12 +805,12 @@ if (typeof zoneMap !== 'undefined') {
   zoneMap
     .onSeaClick(() => {
       dispatchApplication('showPageState', 'map'); // TODO(olc): infer in reducer?
-      dispatchApplication('selectedZoneName', undefined);
+      dispatch({type: 'UPDATE_SELECTED_ZONE', payload: {selectedZoneName: undefined}});
     })
     .onCountryClick((d) => {
       dispatchApplication('isLeftPanelCollapsed', false);
       dispatchApplication('showPageState', 'country'); // TODO(olc): infer in reducer?
-      dispatchApplication('selectedZoneName', d.countryCode);
+      dispatch({type: 'UPDATE_SELECTED_ZONE', payload: {selectedZoneName: d.countryCode}});
     });
 }
 
@@ -1066,7 +1066,7 @@ function renderHistory(state) {
     .render();
 
 
-  zoneDetailsTimeSlider.onChange(selectedZoneTimeIndex => dispatchApplication('selectedZoneTimeIndex', selectedZoneTimeIndex)).render();
+  zoneDetailsTimeSlider.onChange(selectedZoneTimeIndex => dispatch({type: 'UPDATE_SLIDER_SELECTED_ZONE_TIME', payload: {selectedZoneTimeIndex: selectedZoneTimeIndex}})).render();
 
   const firstDatetime = history[0] && moment(history[0].stateDatetime).toDate();
   [countryHistoryCarbonGraph, countryHistoryPricesGraph, countryHistoryMixGraph].forEach((g) => {
@@ -1257,7 +1257,6 @@ observe(state => state.application.showPageState, (showPageState, state) => {
 // Observe for zone change (for example after map click)
 observe(state => state.application.selectedZoneName, (selectedZoneName, state) => {
   if (!selectedZoneName) { return; }
-
   // Analytics
   thirdPartyServices.track('countryClick', { countryCode: selectedZoneName });
 
@@ -1266,6 +1265,7 @@ observe(state => state.application.selectedZoneName, (selectedZoneName, state) =
   renderGauges(state);
   renderContributors(state);
   renderHistory(state);
+  zoneDetailsTimeSlider.selectedIndex(null, null);
 
   // Fetch history if needed
   tryFetchHistory(state);
@@ -1288,7 +1288,7 @@ observe(state => state.application.selectedZoneTimeIndex, (i, state) => {
   renderCountryTable(state);
   renderOpenTooltips(state);
   [countryHistoryCarbonGraph, countryHistoryMixGraph, countryHistoryPricesGraph, zoneDetailsTimeSlider].forEach((g) => {
-    g.selectedIndex(i);
+    g.selectedIndex(i, state.application.previousSelectedZoneTimeIndex);
   });
 });
 // Observe for color blind mode changes

web/src/reducers/index.js

@@ -28,6 +28,7 @@ const initialApplicationState = {
   searchQuery: null,
   selectedZoneName: null,
   selectedZoneTimeIndex: null,
+  previousSelectedZoneTimeIndex: null,
   solarEnabled: Cookies.get('solarEnabled') === 'true' || false,
   useRemoteEndpoint: document.domain === '' || isLocalhost,
   windEnabled: Cookies.get('windEnabled') === 'true' || false,
@@ -70,6 +71,23 @@ const applicationReducer = (state = initialApplicationState, action) => {
       return state;
     }
 
+    case 'UPDATE_SELECTED_ZONE': {
+      const { selectedZoneName } = action.payload;
+      return Object.assign(state, {
+        selectedZoneName,
+        selectedZoneTimeIndex: null,
+        previousSelectedZoneTimeIndex: null,
+      });
+    }
+
+    case 'UPDATE_SLIDER_SELECTED_ZONE_TIME': {
+      const { selectedZoneTimeIndex } = action.payload;
+      return Object.assign(state, {
+        selectedZoneTimeIndex,
+        previousSelectedZoneTimeIndex: selectedZoneTimeIndex,
+      });
+    }
+
     default:
       return state;
   }

web/src/styles.css

@@ -428,7 +428,8 @@ body {
     display: flex;
     line-height: 1.2rem;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
+    overflow: hidden;
 }
 
 .mobile-info-tab {
@@ -1531,7 +1532,7 @@ sub {
     width: 100%;
     border-top: 1px solid lightgray;
     text-align: center;
-    overflow-y: hidden;
+    overflow-y: visible;
 }
 
 .zone-time-slider .time-slider-axis-container{
@@ -1557,6 +1558,7 @@ sub {
     background: transparent; 
     padding: 0;
     overflow: visible;
+    border: none;
   }
 
   .time-slider-input:focus {
@@ -1751,6 +1753,8 @@ sub {
     .country-panel {
        margin: 0;
        padding: 0 14px 0 20px;
+       -moz-user-select: none; /* Selection disabled on firefox to avoid android "select all" button popping up when pressing graphs */
+
     }
     .country-table-header {
         position: relative;