Merge pull request #3328 from Vizzuality/fix/resizing-of-country-page

Fix/resizing of country page

Author: edbrett

app/javascript/components/map/components/map-controls/map-controls-component.jsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import Proptypes from 'prop-types';
+import Sticky from 'react-stickynode';
 
 import Button from 'components/button';
 import Icon from 'components/icon';
@@ -10,23 +11,32 @@ import './map-controls-styles.scss';
 
 class MapControls extends PureComponent {
   render() {
-    const { handleZoomIn, handleZoomOut } = this.props;
+    const {
+      handleZoomIn,
+      handleZoomOut,
+      className,
+      stickyOptions
+    } = this.props;
     return (
-      <div className="c-map-controls">
-        <Button theme="theme-button-map-control" onClick={handleZoomIn}>
-          <Icon icon={plusIcon} className="plus-icon" />
-        </Button>
-        <Button theme="theme-button-map-control" onClick={handleZoomOut}>
-          <Icon icon={minusIcon} className="minus-icon" />
-        </Button>
+      <div className={`c-map-controls ${className || ''}`}>
+        <Sticky enabled={false} {...stickyOptions}>
+          <Button theme="theme-button-map-control" onClick={handleZoomIn}>
+            <Icon icon={plusIcon} className="plus-icon" />
+          </Button>
+          <Button theme="theme-button-map-control" onClick={handleZoomOut}>
+            <Icon icon={minusIcon} className="minus-icon" />
+          </Button>
+        </Sticky>
       </div>
     );
   }
 }
 
 MapControls.propTypes = {
+  className: Proptypes.string,
   handleZoomIn: Proptypes.func,
-  handleZoomOut: Proptypes.func
+  handleZoomOut: Proptypes.func,
+  stickyOptions: Proptypes.object
 };
 
 export default MapControls;

app/javascript/components/map/components/map-controls/map-controls-styles.scss

@@ -1,11 +1,11 @@
 @import '~styles/settings.scss';
 
 .c-map-controls {
-  display: none;
-  position: absolute;
-  top: rem(15px);
-  right: rem(15px);
-  box-shadow: 0 1px 2px rgba($black, 0.25);
+  width: rem(38px);
+
+  button {
+    box-shadow: 0 1px 2px rgba($black, 0.25);
+  }
 
   button:first-child {
     border-bottom: solid 1px rgba($medium-grey, 0.2);
@@ -20,8 +20,4 @@
     width: rem(13px);
     height: rem(3px);
   }
-
-  @media screen and (min-width: $screen-m) {
-    display: block;
-  }
 }

app/javascript/components/map/map-component.js

@@ -3,14 +3,13 @@ import Proptypes from 'prop-types';
 
 import Loader from 'components/loader';
 import NoContent from 'components/no-content';
-import MapControls from 'components/map/components/map-controls';
 import MiniLegend from 'components/map/components/mini-legend';
 
 import './map-styles.scss';
 
 class Map extends PureComponent {
   render() {
-    const { loading, error, layers, setMapZoom } = this.props;
+    const { loading, error, layers } = this.props;
     return (
       <div className="c-map">
         {loading && (
@@ -21,12 +20,6 @@ class Map extends PureComponent {
             <NoContent message="An error occured. Please try again later." />
           )}
         <div id="map" className="c-map" />
-        {!loading && (
-          <MapControls
-            handleZoomIn={() => setMapZoom({ value: 1, sum: true })}
-            handleZoomOut={() => setMapZoom({ value: -1, sum: true })}
-          />
-        )}
         {!loading && layers && layers.length && <MiniLegend layers={layers} />}
       </div>
     );
@@ -36,8 +29,7 @@ class Map extends PureComponent {
 Map.propTypes = {
   loading: Proptypes.bool.isRequired,
   error: Proptypes.bool.isRequired,
-  layers: Proptypes.array,
-  setMapZoom: Proptypes.func
+  layers: Proptypes.array
 };
 
 export default Map;

app/javascript/components/no-content/no-content-component.jsx

@@ -6,8 +6,10 @@ import './no-content-styles.scss';
 
 const NoContent = ({ className, message, icon }) => (
   <div className={`c-no-content ${className}`}>
-    <p className="message">{message}</p>
-    {icon && <img className="message-icon" src={tree} alt="tree" />}
+    <p className="message">
+      {message}
+      {icon && <img className="message-icon" src={tree} alt="tree" />}
+    </p>
   </div>
 );
 

app/javascript/components/sticky/sticky-component.jsx

@@ -4,6 +4,7 @@ $subnav-height: rem(60px);
 .c-subnav-menu {
   background-color: $grey-light;
   height: $subnav-height;
+  width: 100%;
 
   .buttons {
     display: flex;

app/javascript/components/sticky/sticky-styles.scss

@@ -11,7 +11,5 @@ import ReactDOM from 'react-dom';
 import About from 'pages/about';
 
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<About />,
-    document.getElementById('about-page')
-  );
+  ReactDOM.render(<About />, document.getElementById('about-page'));
 });

app/javascript/components/sticky/sticky.js

@@ -7,11 +7,7 @@
   padding: rem(50px) 0 rem(30px);
 
   @media screen and(min-width: $screen-l) {
-    padding: rem(70px) rem(50px) rem(80px) 0;
-  }
-
-  @media screen and (min-width: $screen-xl) {
-    padding-left: calc(100% - (#{$max-width} * 0.7));
+    padding: rem(70px) rem(30px) rem(80px) 0;
   }
 
   .share-buttons {