Style improvements for mobile

.gitignore

@@ -6,3 +6,4 @@ settings-development.json
 private/GeoLite2-City.mmdb*
 npm-debug.log
 **/.sass-cache
+.deploy/

designs/icons-tcef.svg

@@ -247,12 +247,12 @@
      inkscape:pageshadow="2"
      inkscape:zoom="0.25"
      inkscape:cx="-324.9908"
-     inkscape:cy="1157.3585"
+     inkscape:cy="997.3585"
      inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="g22554-45"
      showgrid="false"
      inkscape:window-width="1920"
-     inkscape:window-height="1016"
+     inkscape:window-height="983"
      inkscape:window-x="0"
      inkscape:window-y="867"
      inkscape:window-maximized="1" />
@@ -484,18 +484,82 @@
     <flowRoot
        xml:space="preserve"
        id="flowRoot8482"
-       style="font-style:normal;font-weight:normal;font-size:192px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;"
+       style="font-style:normal;font-weight:normal;font-size:192px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none"
        transform="matrix(0.26458333,0,0,0.26458333,433.29892,-64.826953)"
        inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/remove-marker.png"
        inkscape:export-xdpi="14.000002"
        inkscape:export-ydpi="14.000002"><flowRegion
          id="flowRegion8484"
-         style="font-size:192px;fill:#ff0000;"><rect
+         style="font-size:192px;fill:#ff0000"><rect
            id="rect8486"
            width="476.79202"
            height="367.69553"
            x="-1499.0664"
            y="-142.19131"
-           style="font-size:192px;fill:#ff0000;" /></flowRegion><flowPara
+           style="font-size:192px;fill:#ff0000" /></flowRegion><flowPara
-         id="flowPara8488"></flowPara></flowRoot>  </g>
+         id="flowPara8488"></flowPara></flowRoot>    <g
+       id="g22554-45"
+       transform="rotate(-104.78334,-231.82318,51.6182)"
+       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/fire-marker.png"
+       inkscape:export-xdpi="4.0856881"
+       inkscape:export-ydpi="4.0856881">
+      <g
+         id="g8559">
+        <g
+           inkscape:export-ydpi="4.0856881"
+           inkscape:export-xdpi="4.0856881"
+           inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/fire-marker.png"
+           transform="rotate(-144.74008,-66.772616,119.34544)"
+           id="g22554-2">
+          <path
+             sodipodi:nodetypes="cszzcczasc"
+             inkscape:connector-curvature="0"
+             id="path5329-8"
+             d="m -25.638382,38.048346 c 11.566313,13.887908 17.1215844,22.244854 13.751242,33.868326 -2.465387,8.50265 -8.895424,18.626534 -18.100172,25.532106 -9.204776,6.905572 -20.549951,13.517692 -24.263404,17.728802 -3.71348,4.21108 -9.835779,11.6046 -10.976769,21.82688 -2.725208,24.7073 15.038044,45.63926 39.702238,48.35952 11.289242,1.2311 26.6324564,-5.2645 34.2331684,-10.31973 C 16.308659,169.98901 28.520768,152.76263 31.570884,138.81099 35.854436,119.21732 35.065926,96.385127 23.626002,79.16853 12.946123,63.095807 3.8673424,50.775037 -25.638382,38.048346 Z"
+             style="fill:#d41300;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+          <path
+             sodipodi:nodetypes="cszzcczcsc"
+             inkscape:connector-curvature="0"
+             id="path5331-30"
+             d="m -7.5198746,101.09834 c 4.018254,8.70077 3.821166,14.69136 0.49964,20.18233 -2.429696,4.01667 -7.1125824,8.31964 -12.7749834,10.59336 -5.662401,2.27373 -12.38086,4.1034 -14.860826,5.75067 -2.479966,1.64727 -6.630512,4.59399 -8.617877,9.67322 -4.786736,12.28103 1.27127,26.11038 13.530846,30.8887 5.613373,2.17993 11.515354,2.13146 17.442629,-0.0849 5.9272234,-2.21636 14.0405914,-9.44377 18.0234704,-15.42084 6.3490206,-9.59829 8.9531296,-23.76395 5.4565016,-34.15229 -3.2643496,-9.69812 -4.6224286,-12.3603 -18.6994006,-27.43025 z"
+             style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <g
+           inkscape:export-ydpi="4.0856881"
+           inkscape:export-xdpi="4.0856881"
+           inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/fire-marker.png"
+           transform="rotate(96.689458,-75.070103,121.00438)"
+           id="g22554-5">
+          <path
+             sodipodi:nodetypes="cszzcczasc"
+             inkscape:connector-curvature="0"
+             id="path5329-4"
+             d="m -25.638382,38.048346 c 11.566313,13.887908 17.1215844,22.244854 13.751242,33.868326 -2.465387,8.50265 -8.895424,18.626534 -18.100172,25.532106 -9.204776,6.905572 -20.549951,13.517692 -24.263404,17.728802 -3.71348,4.21108 -9.835779,11.6046 -10.976769,21.82688 -2.725208,24.7073 15.038044,45.63926 39.702238,48.35952 11.289242,1.2311 26.6324564,-5.2645 34.2331684,-10.31973 C 16.308659,169.98901 28.520768,152.76263 31.570884,138.81099 35.854436,119.21732 35.065926,96.385127 23.626002,79.16853 12.946123,63.095807 3.8673424,50.775037 -25.638382,38.048346 Z"
+             style="fill:#d41300;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+          <path
+             sodipodi:nodetypes="cszzcczcsc"
+             inkscape:connector-curvature="0"
+             id="path5331-9"
+             d="m -7.5198746,101.09834 c 4.018254,8.70077 3.821166,14.69136 0.49964,20.18233 -2.429696,4.01667 -7.1125824,8.31964 -12.7749834,10.59336 -5.662401,2.27373 -12.38086,4.1034 -14.860826,5.75067 -2.479966,1.64727 -6.630512,4.59399 -8.617877,9.67322 -4.786736,12.28103 1.27127,26.11038 13.530846,30.8887 5.613373,2.17993 11.515354,2.13146 17.442629,-0.0849 5.9272234,-2.21636 14.0405914,-9.44377 18.0234704,-15.42084 6.3490206,-9.59829 8.9531296,-23.76395 5.4565016,-34.15229 -3.2643496,-9.69812 -4.6224286,-12.3603 -18.6994006,-27.43025 z"
+             style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+        <g
+           transform="rotate(-22.690691,-35.704234,120.074)"
+           id="g8542">
+          <path
+             style="fill:#d41300;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m -25.638382,38.048346 c 11.566313,13.887908 17.1215844,22.244854 13.751242,33.868326 -2.465387,8.50265 -8.895424,18.626534 -18.100172,25.532106 -9.204776,6.905572 -20.549951,13.517692 -24.263404,17.728802 -3.71348,4.21108 -9.835779,11.6046 -10.976769,21.82688 -2.725208,24.7073 15.038044,45.63926 39.702238,48.35952 11.289242,1.2311 26.6324564,-5.2645 34.2331684,-10.31973 C 16.308659,169.98901 28.520768,152.76263 31.570884,138.81099 35.854436,119.21732 35.065926,96.385127 23.626002,79.16853 12.946123,63.095807 3.8673424,50.775037 -25.638382,38.048346 Z"
+             id="path5329-9"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="cszzcczasc" />
+          <path
+             style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:10.58333302;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m -7.5198746,101.09834 c 4.018254,8.70077 3.821166,14.69136 0.49964,20.18233 -2.429696,4.01667 -7.1125824,8.31964 -12.7749834,10.59336 -5.662401,2.27373 -12.38086,4.1034 -14.860826,5.75067 -2.479966,1.64727 -6.630512,4.59399 -8.617877,9.67322 -4.786736,12.28103 1.27127,26.11038 13.530846,30.8887 5.613373,2.17993 11.515354,2.13146 17.442629,-0.0849 5.9272234,-2.21636 14.0405914,-9.44377 18.0234704,-15.42084 6.3490206,-9.59829 8.9531296,-23.76395 5.4565016,-34.15229 -3.2643496,-9.69812 -4.6224286,-12.3603 -18.6994006,-27.43025 z"
+             id="path5331-35"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="cszzcczcsc" />
+        </g>
+      </g>
+    </g>
+  </g>
 </svg>

imports/startup/client/i18n.js

@@ -50,7 +50,7 @@ i18nOpts.react = {
    nsMode: 'default' */
 };
 
-const sendMissing = false;
+const sendMissing = true;
 if (sendMissing && !Meteor.isProduction) {
   i18nOpts.sendMissing = true;
   i18nOpts.sendMissingTo = 'fallback';

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) {
+@include breakpoint(mobile) {
-    .dist-slider {
+  .dist-slider {
-        width: 200px;
+    width: 100%;
-        margin: 10px;
+    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}
+          disabled={disabled}
-            className={anchorClassName}
+          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) {
+@include breakpoint(mobile) {
-  a.navbar-brand {
+    a.navbar-brand {
-    font-size: 16px;
+        font-size: 18px;
-    padding: 15px 3px;
+        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) {
+@include breakpoint(mobile) {
-  .leaflet-container {
+  .selectionmap-leaflet-container {
-     height: 400px;
+     height: 80%;
-     width: 85vw;
+     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;

imports/ui/layouts/App/App.js

@@ -55,7 +55,7 @@ const App = props => (
         <div className="App">
           <Navigation {...props} />
           <ReSendEmail {...props} />
-          <Grid> {/* bsClass="previously-container-but-disabled" > */}
+          <Grid>
             <Switch>
               <Route exact name="index" path="/" component={Index} />
               {/* <Authenticated exact path="/documents" component={Documents} {...props} />

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -2,7 +2,6 @@
 /* eslint-disable react/jsx-indent-props */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTracker } from 'meteor/react-meteor-data';
 import { Row, Col } from 'react-bootstrap';
 import { translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
@@ -10,6 +9,7 @@ import SelectionMap, { action } from '/imports/ui/components/SelectionMap/Select
 import Gkeys from '/imports/startup/client/Gkeys';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 import SubsAutocomplete from './SubsAutocomplete';
+import { isNotHomeAndMobile } from '/imports/ui/components/Utils/isMobile';
 
 class FireSubscription extends React.Component {
   constructor(props) {
@@ -73,6 +73,7 @@ class FireSubscription extends React.Component {
     return (
       <div>
         <Row>
+          {isNotHomeAndMobile &&
           <Col xs={12} sm={12} md={6} lg={6} >
             <div>
               <SubsAutocomplete
@@ -80,12 +81,14 @@ class FireSubscription extends React.Component {
                   onChange={value => this.onAutocompleteChange(value)}
               />
             </div>
-          </Col>
+          </Col> }
           <Col xs={12} sm={12} md={6} lg={6} >
             <DistanceSlider onChange={value => this.onSliderChange(value)} />
+            {isNotHomeAndMobile &&
             <Row className="center-in-my-pos">
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
             </Row>
+            }
           </Col>
         </Row>
         <Row className="align-items-center justify-content-center">

imports/ui/pages/Fires/Fires.js

@@ -74,7 +74,7 @@ class Fire extends React.Component {
               {' '}
               {t('Por ejemplo:')}
               <ul>
-                <li>{t('si conoces esta zona y cómo acceder a el fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
+                <li>{t('si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
                 <li>{t('si conoces el motivo por el que comenzó el fuego')}</li>
                 <li>{t('si quieres denunciar algún tipo de ilegalidad, incluso anónimamente')}</li>
                 <li>{t('o cualquier otra información')}</li>

imports/ui/pages/Fires/Fires.scss

@@ -1,3 +1,6 @@
+@import '../../stylesheets/colors';
+@import '../../stylesheets/mixins';
+
 .fire-leaflet-container {
   min-height: 30vh;
   min-width: 40vw;
@@ -8,19 +11,18 @@
 }
 
 .ViewFire > h4.page-header {
-    line-height: 1.5em;
+    line-height: 1.3em;
 }
 
 @media (max-width: 768px) {
-    .leaflet-container {
+    .fire-leaflet-container {
         width: 100%;
     }
 }
 
-
 .comments-info {
     font-size: 14px;
-    color: #818182;
+    color: $light;
     /* display: inline-flex; */
     /* background-color: #fefefe;
     border-color: #fdfdfe;

imports/ui/pages/FiresMap/FiresMap.js

@@ -24,6 +24,7 @@ import Loading from '/imports/ui/components/Loading/Loading';
 import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
 import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
+import { isNotHomeAndMobile } from '/imports/ui/components/Utils/isMobile';
 
 import './FiresMap.scss';
 
@@ -136,15 +137,18 @@ class FiresMap extends React.Component {
          <h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
          <Row>
            <Col xs={12} sm={6} md={6} lg={6} >
-             <p>
+             <p className="firesmap-legend">
                { this.props.activefires.length === 0 ?
                  <Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> :
                  <Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans>
                }
              </p>
-             <p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p>
+             {isNotHomeAndMobile &&
+              <p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> }
            </Col>
            <Col xs={12} sm={6} md={6} lg={6}>
+              {isNotHomeAndMobile &&
+             <Fragment>
              <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
                <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
              </Checkbox>
@@ -153,7 +157,8 @@ class FiresMap extends React.Component {
                 <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
               </Checkbox>}
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
-              <p>
+             </Fragment>}
+              <p className="firesmap-note">
                 <em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
                      <Trans>Los fuegos activos se actualizan en tiempo real.</Trans> :
                      <Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
@@ -162,48 +167,49 @@ class FiresMap extends React.Component {
               </p>
            </Col>
          </Row>
+         {/* https://github.com/CliffCloud/Leaflet.Sleep */}
+         <Map
+             ref={(map) => {
+                 this.fireMap = map;
+                 this.handleLeafletLoad(map);
+                 }}
+             className="firesmap-leaflet-container"
+             animate
+             minZoom={5}
+             preferCanvas
+             onClick={this.onClickReset}
+             viewport={this.state.viewport}
+             onViewportChanged={this.onViewportChanged}
+             sleep={window.location.pathname === '/'}
+             sleepTime={10750}
+             wakeTime={750}
+             sleepNote
+             hoverToWake
+             wakeMessage={this.props.t('Pulsa para activar')}
+             sleepOpacity={0.6}
+         >
+           {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
+           {!this.props.loading &&
+           <Fragment>
+             <FireList
+                 fires={this.props.activefires}
+                 scale={this.state.viewport.zoom >= MAXZOOM}
+                 useMarkers={this.state.useMarkers}
+                 nasa
+             />
+             <FireList
+                 fires={this.props.firealerts}
+                 scale={false}
+                 useMarkers={this.state.useMarkers}
+                 nasa={false}
+             />
+           </Fragment> }
+           <DefMapLayers />
+         </Map>
          <Row>
-           {/* https://github.com/CliffCloud/Leaflet.Sleep */}
+           <Col xs={12} sm={12} md={12} lg={12}>
-           <Map
+             <p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
-               ref={(map) => {
+           </Col>
-                   this.fireMap = map;
-                   this.handleLeafletLoad(map);
-                   }}
-               animate
-               minZoom={5}
-               preferCanvas
-               onClick={this.onClickReset}
-               viewport={this.state.viewport}
-               onViewportChanged={this.onViewportChanged}
-               sleep={window.location.pathname === '/'}
-               sleepTime={10750}
-               wakeTime={750}
-               sleepNote
-               hoverToWake
-               wakeMessage={this.props.t('Pulsa para activar')}
-               sleepOpacity={0.6}
-           >
-             {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
-             {!this.props.loading &&
-              <Fragment>
-                <FireList
-                    fires={this.props.activefires}
-                    scale={this.state.viewport.zoom >= MAXZOOM}
-                    useMarkers={this.state.useMarkers}
-                    nasa
-                />
-                <FireList
-                    fires={this.props.firealerts}
-                    scale={false}
-                    useMarkers={this.state.useMarkers}
-                    nasa={false}
-                />
-              </Fragment> }
-             <DefMapLayers />
-           </Map>
-         </Row>
-         <Row>
-           <p><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
          </Row>
       </div>
     );

imports/ui/pages/FiresMap/FiresMap.scss

@@ -1,12 +1,23 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
 /* https://github.com/PaulLeCam/react-leaflet/issues/108 */
 
-.leaflet-container {
+.firesmap-leaflet-container {
   height: 100%;
   min-height: 60vh;
   width: 100%;
-  min-width: 75vw;
+  /* min-width: 75vw; */
   display: flex;
-  margin: 30px auto;
+  margin: 20px auto;
+}
+
+@include breakpoint(mobile) {
+  .firesmap-leaflet-container {
+    height: 80%;
+    min-width: 85vw;
+    margin: 10px auto;
+  }
 }
 
 .Loading {
@@ -22,13 +33,6 @@
   stroke: grey;
 }
 
-@media only screen and (max-width: 400px) {
-  .leaflet-container {
-     height: 400px;
-     width: 85vw;
-  }
-}
-
 .mark-checkbox {
   margin-left: 5px;
 }
@@ -37,7 +41,21 @@
   background-image: url(/images/layers.png);
 }
 
+.leaflet-retina .leaflet-control-layers-toggle {
+  background-image: url(/images/layers.png);
+  background-size: 26px 26px;
+}
 
 .glyphicon .glyphicon-thumbs-up {
 
 }
+
+.firesmap-legend {
+  font-size: 16px;
+}
+
+.firesmap-note,
+.firesmap-footnote {
+  font-size: 14px;
+  color: $light;
+}

imports/ui/pages/Index/Index-custom.scss

@@ -1,3 +1,4 @@
+@import '../../stylesheets/mixins';
 @import '../../stylesheets/colors';
 
 .carousel-item {
@@ -29,6 +30,12 @@
   text-shadow: 2px 2px 1px #280B0B;
 }
 
+@include breakpoint(mobile) {
+    .carousel-caption > h3 {
+        font-size: 2.0rem;
+    }
+}
+
 .py-5 > .container > {
   div > h1 {
     color: #280B0B;
@@ -38,15 +45,35 @@
   }
   p {
     padding-top: 10px;
-    font-size: 1.5em;
+    font-size: 1.7em;
   }
 }
 
+@include breakpoint(mobile) {
+    .py-5 > .container > {
+        p {
+            font-size: 1.2em;
+        }
+    }
+
+    .pt-5, .py-5 {
+        padding-top: 1rem !important;
+    }
+
+    .moto {
+        margin-top: 5px;
+        margin-left: 5px;
+    }
+
+    .sectionTESTINGGGGG { // don't scroll sections in mobiles
+      overflow: visible !important;
+    }
+}
+
 .slide-2-icon {
   border-radius: 50%;
   position: relative;
   width: 30%;
-  top: 25%;
   left: 35%;
   border: 14px solid #FFF;
   opacity: .5;
@@ -72,6 +99,20 @@
   text-shadow: 1px 1px #280B0B;
 }
 
+@include breakpoint(mobile) {
+    .slide-1-icon:before,
+    .slide-2-icon:before,
+    .slide-3-icon:before,
+    .slide-4-icon:before {
+        font-size: 100px;
+    }
+
+    .slide-3-icon:before,
+    .slide-4-icon:before {
+        top: -50px;
+    }
+}
+
 .slide-1-icon:before {
   content: "";
 }
@@ -124,7 +165,7 @@
 .full-width {
   position: relative;
   width: 100vw;
-  margin-left: calc(-50vw + 50% - 8px);
+  margin-left: calc(-50vw + 50%);
   position: relative;
   /*
     width: 100vw;

imports/ui/pages/Index/Index.js

@@ -12,6 +12,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import _ from 'lodash';
 import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage';
 import 'html5-device-mockups/dist/device-mockups.min.css';
+import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
 import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor';
 import FiresMap from '../FiresMap/FiresMap';
 
@@ -58,12 +59,12 @@ class Index extends Component {
     // https://github.com/subtirelumihail/react-fullpage
     const fullPageOptions = {
       activeClass:          'active', // the class that is appended to the sections links
-      anchors:              ['home', 'crowdsourcing', 'platforms', 'participe', 'fires'], // the anchors for each sections
+      anchors:              ['home', 'crowdsourcing', 'participe', 'fires', 'platforms'], // the anchors for each sections
       arrowNavigation:      true, // use arrow keys (true after development)
       className:            'section-container', // the class name for the section container
       delay:                1000, // the scroll animation speed
-      navigation:           true, // use dots navigation
+      navigation:           true, // !isMobile, // use dots navigation
-      scrollBar:            false, // use the browser default scrollbar
+      scrollBar:            isAnyMobile, // use the browser default scrollbar
       sectionClassName:     'section', // the section class name
       sectionPaddingTop:    '0', // the section top padding
       sectionPaddingBottom: '0', // the section bottom padding
@@ -84,6 +85,7 @@ class Index extends Component {
                   className="carousel slide"
                   ref={(ref) => { this.slides = ref; }}
               >
+                {/* for dev: data-interval=false */}
                 <ol className="carousel-indicators">
                   <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active" />
                   <li data-target="#carouselExampleIndicators" data-slide-to="1" />
@@ -95,7 +97,7 @@ class Index extends Component {
                   <div className="carousel-item carousel-item-1 active">
                     <div className="slide-1-icon" />
                     <div className="carousel-caption">
-                      <h3><i className="fa fa-map-pointer" aria-hidden="true" />Elige un lugar</h3>
+                      <h3><i className="fa fa-map-pointer" aria-hidden="true" /><Trans>Elige un lugar</Trans></h3>
                       <p />
                     </div>
                   </div>
@@ -103,7 +105,7 @@ class Index extends Component {
                   <div className="carousel-item carousel-item-2">
                     <div className="slide-2-icon" />
                     <div className="carousel-caption">
-                      <h3><i className="fa fa-dot-circle-o" aria-hidden="true" />Elige un radio de vigilancia</h3>
+                      <h3><i className="fa fa-dot-circle-o" aria-hidden="true" /><Trans>Elige un radio de vigilancia</Trans></h3>
                       <p />
                     </div>
                   </div>
@@ -111,7 +113,7 @@ class Index extends Component {
                   <div className="carousel-item carousel-item-3">
                     <div className="slide-3-icon" />
                     <div className="carousel-caption">
-                      <h3><i className="fa fa-podcast" aria-hidden="true" />Recibe alertas de fuegos en esa zona</h3>
+                      <h3><i className="fa fa-podcast" aria-hidden="true" /><Trans>Recibe alertas de fuegos en esa zona</Trans></h3>
                       <p />
                     </div>
                   </div>
@@ -119,18 +121,18 @@ class Index extends Component {
                   <div className="carousel-item carousel-item-4">
                     <div className="slide-4-icon" />
                     <div className="carousel-caption">
-                      <h3><i className="fa fa-bell-o" aria-hidden="true" />Alerta cuando hay un fuego</h3>
+                      <h3><i className="fa fa-bell-o" aria-hidden="true" /><Trans>Alerta cuando hay un fuego</Trans></h3>
                       <p />
                     </div>
                   </div>
                 </div>
                 <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                   <span className="carousel-control-prev-icon" aria-hidden="true" />
-                  <span className="sr-only">Previous</span>
+                  <span className="sr-only"><Trans>Anterior</Trans></span>
                 </a>
                 <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                   <span className="carousel-control-next-icon" aria-hidden="true" />
-                  <span className="sr-only">Next</span>
+                  <span className="sr-only"><Trans>Siguiente</Trans></span>
                 </a>
               </div>
             </header>
@@ -139,7 +141,7 @@ class Index extends Component {
                 <div className="scale__container--js">
                   <h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
                 </div>
-                <p>Siempre alerta a los fuegos en nuestro vecindario</p>
+                <p className="moto"><Trans>Siempre alerta a los fuegos en nuestro vecindario</Trans></p>
                 {/* <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/#platforms">{this.props.t('Participa')}</Link> */}
               </div>
             </section>
@@ -149,7 +151,7 @@ class Index extends Component {
             <div className="container">
               <div className="row">
                 <div className="col-md-8 mx-auto">
-                  <h2 className="section-heading">Colaboración masiva contra los incendios</h2>
+                  <h2 className="section-heading"><Trans>Colaboración masiva contra los incendios</Trans></h2>
                   <p><Trans>Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.</Trans></p>
                 </div>
               </div>
@@ -207,8 +209,8 @@ class Index extends Component {
                       <div className="col-lg-6">
                         <div className="feature-item">
                           <i className="icon-envelope-open text-primary" />
-                          <h3><Trans>Correo electronico</Trans></h3>
+                          <h3><Trans>Notificaciones</Trans></h3>
-                          <p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
+                          <p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo o en tu navegador</Trans></p>
                         </div>
                       </div>
                     </div>

imports/ui/pages/Signup/Signup.js

@@ -97,6 +97,7 @@ class Signup extends React.Component {
         <Col xs={12} sm={6} md={5} lg={4}>
           <h4 className="page-header">{t('Registrarse')}</h4>
           <Row>
+            { false && // disabled
             <Col xs={12}>
               <button
                   className="btn btn-block btn-raised btn-primary OAuthLoginButtonDis OAuthLoginButton-telegram"
@@ -105,7 +106,7 @@ class Signup extends React.Component {
               >
                 <span><Icon icon="telegram" /> {t('Iniciar sesión con Telegram')}</span>
               </button>
-            </Col>
+            </Col> }
             <Col xs={12}>
               <OAuthLoginButtons
                 services={['telegram', 'google']}

imports/ui/stylesheets/colors.scss

@@ -48,3 +48,5 @@ $success: $todos-palette2;
 $info:    $todos-palette3;
 $warning: $todos-palette4;
 $danger:  #d9534f;
+
+$light: #818182;

imports/ui/stylesheets/custom.scss

@@ -1,3 +1,6 @@
+@import './mixins';
+@import './colors';
+
 a, a:hover  {
   color: $todos-palette5;
 }
@@ -9,3 +12,13 @@ a, a:hover  {
 h4.page-header {
   line-height: 2em;
 }
+
+@include breakpoint(mobile) {
+  h4.page-header {
+    line-height: 1.3em;
+  }
+}
+
+.page-header {
+  margin-top: 25px;
+}

imports/ui/stylesheets/mixins.scss

@@ -7,6 +7,9 @@
     @media (min-width: 768px) { @content; }
   } @else if $point == handheld-large {
     @media (min-width: 480px) { @content; }
+  } @else if $point == mobile {
+    // vjrj
+    @media (max-width: 480px) { @content; }
   } @else {
     @media (min-width: $point) { @content; }
   }

imports/ui/stylesheets/new-age.scss

@@ -1,3 +1,5 @@
+@import './mixins';
+
 /*!
  * Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age)
  * Copyright 2013-2017 Start Bootstrap
@@ -61,6 +63,15 @@ div.section.crowd h2 {
   div.section.crowd h2 {
     font-size: 70px; } }
 
+@include breakpoint(mobile) {
+  div.section.crowd p {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  div.section.crowd h2 {
+    font-size: 35px; } }
+
 div.section.platf .div.section-heading {
   margin-bottom: 100px; }
 div.section.platf .div.section-heading h2 {

package-lock.json

@@ -5428,6 +5428,11 @@
       "version": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
+    "ismobilejs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-0.4.1.tgz",
+      "integrity": "sha1-Gl8SbHD+05yT2jgPpiy65XI+fcI="
+    },
     "isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "immutability-helper": "^2.5.1",
     "indexof": "0.0.1",
     "iron": "^5.0.4",
+    "ismobilejs": "^0.4.1",
     "jquery": "^2.2.4",
     "jquery-validation": "^1.17.0",
     "juice": "^4.2.2",

public/locales/es/common.json

@@ -165,8 +165,6 @@
   "Somos muchos ojos": "Somos muchos ojos",
   "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés": "Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés",
   "Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área": "Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área",
-  "Correo electronico": "Correo electronico",
-  "Recibe nuestras notificaciones de fuegos por correo": "Recibe nuestras notificaciones de fuegos por correo",
   "Otros dispositivos": "Otros dispositivos",
   "support-us-home": "Estamos desarrollando nuestras herramientas para otros dispositivos. Puedes <1>contribuir a hacerlo posible.</1>",
   "Software Libre": "Software Libre",
@@ -202,5 +200,24 @@
   "añadir comentarios": "añadir comentarios",
   "puntuar comentarios": "puntuar comentarios",
   "responder": "responder",
-  "Más comentarios": "Más comentarios"
+  "Más comentarios": "Más comentarios",
+  "Elige un lugar": "Elige un lugar",
+  "Elige un radio de vigilancia": "Elige un radio de vigilancia",
+  "Recibe alertas de fuegos en esa zona": "Recibe alertas de fuegos en esa zona",
+  "Alerta cuando hay un fuego": "Alerta cuando hay un fuego",
+  "Anterior": "Anterior",
+  "Siguiente": "Siguiente",
+  "Siempre alerta a los fuegos en nuestro vecindario": "Siempre alerta a los fuegos en nuestro vecindario",
+  "Información adicional sobre fuego detectado en {{where}} el {{when}}": "Información adicional sobre fuego detectado en {{where}} el {{when}}",
+  "Coordenadas:": "Coordenadas:",
+  "Fuego detectado por satélites de la NASA {{when}}": "Fuego detectado por satélites de la NASA {{when}}",
+  "Puedes añadir un comentario si tienes información adicional sobre este fuego.": "Puedes añadir un comentario si tienes información adicional sobre este fuego.",
+  "Por ejemplo:": "Por ejemplo:",
+  "si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)": "si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)",
+  "si conoces el motivo por el que comenzó el fuego": "si conoces el motivo por el que comenzó el fuego",
+  "si quieres denunciar algún tipo de ilegalidad, incluso anónimamente": "si quieres denunciar algún tipo de ilegalidad, incluso anónimamente",
+  "o cualquier otra información": "o cualquier otra información",
+  "Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.": "Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.",
+  "Notificaciones": "Notificaciones",
+  "Recibe nuestras notificaciones de fuegos por correo o en tu navegador": "Recibe nuestras notificaciones de fuegos por correo o en tu navegador"
 }