Style improvements for mobile

imports/ui/components/DistanceSlider/DistanceSlider.scss

@@ -1,11 +1,17 @@
+@import '../../stylesheets/mixins';
+
 .dist-slider {
     width: 400px;
     margin: 30px;
 }
 
-@media only screen and (max-width: 400px) {
-    .dist-slider {
-        width: 200px;
-        margin: 10px;
-    }
+@include breakpoint(mobile) {
+  .dist-slider {
+    width: 100%;
+    margin: 10px;
+  }
+
+  .rc-slider {
+    margin: 0 0 0 -10px;
+  }
 }

imports/ui/components/Footer/Footer.js

@@ -31,4 +31,4 @@ const Footer = (props) => {
 
 Footer.propTypes = {};
 
-export default translate([], { wait: true })(Footer)
+export default translate([], { wait: true })(Footer);

imports/ui/components/Footer/Footer.scss

@@ -72,3 +72,9 @@ body {
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
+
+@include breakpoint(mobile) {
+  .Footer, .Footer p {
+    font-size: 14px;
+  }
+}

imports/ui/components/NavItem/NavItem.js

@@ -12,12 +12,12 @@ const propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
-  eventKey: PropTypes.any,
+  eventKey: PropTypes.any
 };
 
 const defaultProps = {
   active: false,
-  disabled: false,
+  disabled: false
 };
 
 class NavItem extends React.Component {
@@ -38,7 +38,9 @@ class NavItem extends React.Component {
   }
 
   render() {
-    const { active, disabled, onClick, className, anchorClassName, style, ...props } =
+    const {
+      active, disabled, onClick, className, anchorClassName, style, ...props
+    } =
       this.props;
 
     delete props.onSelect;
@@ -58,13 +60,15 @@ class NavItem extends React.Component {
     return (
       <li
         role="presentation"
+        data-toggle="collapse"
+        data-target=".navbar-collapse.show"
         className={classNames(className, { active, disabled })}
         style={style}
       >
         <SafeAnchor
           {...props}
-            disabled={disabled}
-            className={anchorClassName}
+          disabled={disabled}
+          className={anchorClassName}
           onClick={createChainedFunction(onClick, this.handleClick)}
         />
       </li>

imports/ui/components/Navigation/Navigation.js

@@ -17,7 +17,9 @@ const Navigation = props => (
       {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
       <Navbar.Header>
         <Navbar.Brand>
-          <Link to="/">{props.t('AppNameFull')}</Link>
+          <Link to="/" className={window.location.pathname === '/' ? 'hide-brand' : ''} >
+            {props.t('AppNameFull')}
+          </Link>
         </Navbar.Brand>
         {/* <Navbar.Toggle/> */}
         <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -54,6 +56,7 @@ Navigation.defaultProps = {
 };
 
 Navigation.propTypes = {
+  t: PropTypes.func.isRequired,
   authenticated: PropTypes.bool.isRequired
 };
 

imports/ui/components/Navigation/Navigation.scss

@@ -1,3 +1,5 @@
+@import '../../stylesheets/mixins';
+
 .navbar {
   border-radius: 0;
   border-left: none;
@@ -27,14 +29,20 @@ a.nav-link:hover {
   padding: 0.3rem 0rem;
 }
 
-
 a.navbar-brand {
   font-size: 26px;
 }
 
-@media (max-width: 480px) {
-  a.navbar-brand {
-    font-size: 16px;
-    padding: 15px 3px;
-  }
+@include breakpoint(mobile) {
+    a.navbar-brand {
+        font-size: 18px;
+        padding: 15px 3px 15px 15px;
+    }
+    .navbar-nav .nav-link {
+        padding-left: 5px;
+    }
 }
+
+.hide-brand {
+  opacity: 0;
+}

imports/ui/components/SelectionMap/SelectionMap.js

@@ -162,9 +162,9 @@ class SelectionMap extends Component {
     return (
       <div>
         { this.isValidState() &&
-          <div className="leaflet-container">
+          <Fragment>
             <Map
-                /* className="sidebar-map" */
+                className="selectionmap-leaflet-container"
                 center={this.state.center}
                 zoom={this.state.zoom}
                 ref={(map) => {
@@ -251,7 +251,7 @@ class SelectionMap extends Component {
                  </ButtonGroup>
                </Control>
             </Map>
-          </div>
+          </Fragment>
         }
       </div>
     );

imports/ui/components/SelectionMap/SelectionMap.scss

@@ -1,21 +1,23 @@
-.leaflet-container {
+@import '../../stylesheets/mixins';
+
+.selectionmap-leaflet-container {
   height: 100%;
   min-height: 60vh;
   width: 100%;
-  min-width: 75vw;
+  /* min-width: 75vw; */
   display: flex;
-  margin: 30px auto;
+  margin: 20px auto;
 }
 
-div.leaflet-container {
+div.selectionmap-leaflet-container {
   position: relative;
   margin: 0;
 }
 
-@media only screen and (max-width: 400px) {
-  .leaflet-container {
-     height: 400px;
-     width: 85vw;
+@include breakpoint(mobile) {
+  .selectionmap-leaflet-container {
+     height: 80%;
+     min-width: 90vw;
   }
 }
 

imports/ui/components/Utils/isMobile.js

@@ -0,0 +1,6 @@
+import isMobile from 'ismobilejs';
+
+// https://github.com/ReactTraining/react-router/issues/184
+export const isHomeAndMobile = (window.location.pathname === '/' && isMobile.any);
+export const isNotHomeAndMobile = !isHomeAndMobile;
+export const isAnyMobile = isMobile.any;