More work in home

imports/ui/components/Navigation/Navigation.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
-import { translate } from 'react-i18next';
+import { Trans, translate } from 'react-i18next';
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
 import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
 import NavItem from '../NavItem/NavItem';
@@ -30,11 +30,13 @@ const Navigation = props => (
     {/* <Navbar.Collapse> */}
     <div className="collapse navbar-collapse" id="navbarNavDropdown">
       <ul className="navbar-nav ml-auto ">
-        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
-          <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
-        </LinkContainer>
+        {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
+        <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
+        </LinkContainer> */}
         <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
-          <NavItem eventKey={1.2} href="/subscriptions">Mis alertas</NavItem>
+          <NavItem eventKey={1.2} href="/subscriptions">
+            {props.authenticated ? <Trans>Mis alertas</Trans>:<Trans>Participar</Trans>}
+          </NavItem>
         </LinkContainer>
         <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
           <NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>

imports/ui/components/SelectionMap/SelectionMap.js

@@ -98,14 +98,14 @@ class SelectionMap extends Component {
       <div>
       { this.state && this.state.center &&
         <Map center={this.state.center} zoom={this.state.zoom}
-        ref={(map) => { this.selectionMap = map; }}
-        sleep={true}
-        sleepTime={10750}
-        wakeTime={750}
-        sleepNote={true}
-        hoverToWake={true}
-        wakeMessage={this.props.t('Pulsa para activar')}
-        sleepOpacity={.6}>
+             ref={(map) => { this.selectionMap = map; }}
+             sleep={window.location.pathname === '/'}
+             sleepTime={10750}
+             wakeTime={750}
+             sleepNote={true}
+             hoverToWake={true}
+             wakeMessage={this.props.t('Pulsa para activar')}
+             sleepOpacity={.6}>
         <TileLayer
           attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

imports/ui/pages/FiresMap/FiresMap.js

@@ -264,7 +264,7 @@ class FiresMap extends React.Component {
            </Col>
          </Row>
          <Row>
-           // https://github.com/CliffCloud/Leaflet.Sleep
+           {/* https://github.com/CliffCloud/Leaflet.Sleep */}
            <Map ref="fireMap"
                 animate={true}
                 minZoom={5}
@@ -272,7 +272,7 @@ class FiresMap extends React.Component {
                 onClick={this.onClickReset}
                 viewport={this.state.viewport}
                 onViewportChanged={this.onViewportChanged}
-                sleep={true}
+                sleep={window.location.pathname === '/'}
                 sleepTime={750}
                 wakeTime={750}
                 sleepNote={true}

imports/ui/pages/FiresMap/FiresMap.scss

@@ -2,7 +2,7 @@
 
 .leaflet-container {
   height: 100%;
-  min-height: 70vh;
+  min-height: 60vh;
   width: 100%;
   min-width: 75vw;
   display: flex;
@@ -24,7 +24,7 @@
 
 @media only screen and (max-width: 400px) {
   .leaflet-container {
-     height: 500px;
+     height: 400px;
      width: 85vw;
   }
 }

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

@@ -168,3 +168,7 @@
   .bg-image-full {
     background-image: url('/home-fires-1000.jpg'); }
 }
+
+.device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
+  background-image: url(/mobile.png);
+}

imports/ui/pages/Index/Index.js

@@ -9,7 +9,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import {ScrollToTopOnMount, SectionsContainer, Section} from 'react-fullpage';
 import FiresMap from  '../FiresMap/FiresMap';
 import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
-
+import 'html5-device-mockups/dist/device-mockups.min.css';
 
 import './Index.scss';
 import './Index-custom.scss';
@@ -56,10 +56,14 @@ class Index extends Component {
     this.myScaleFunction();
   };
 
-  componentDidMount() {
+  componentDidMount = () => {
     $('.carousel').carousel();
   }
 
+  handleBtnClick = (event) => {
+    window.open('https://t.me/TodosContraElFuego_bot', '_blank');
+  }
+
   render() {
     // https://github.com/subtirelumihail/react-fullpage
     let fullPageOptions = {
@@ -68,7 +72,7 @@ class Index extends Component {
       arrowNavigation:      false, // use arrow keys (true after development)
       className:            'section-container', // the class name for the section container
       delay:                1000, // the scroll animation speed
-      navigation:           false, // use dots navigation
+      navigation:           true, // use dots navigation
       scrollBar:            false, // use the browser default scrollbar
       sectionClassName:     'section', // the section class name
       sectionPaddingTop:    '0', // the section top padding
@@ -169,20 +173,16 @@ class Index extends Component {
               </div>
               <div className="row">
                 <div className="col-lg-4 my-auto">
-                  <div className="device-container">
-                    <div className="device-mockup iphone6_plus portrait white">
-                      <div className="device">
+                    <div className="device-wrapper">
+                      <div className="device" data-device="iPhone6" data-orientation="portrait" data-color="white">
                         <div className="screen">
                           {/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
-                          <img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
-                        </div>
-                        <div className="button">
-                          {/* You can hook the "home button" to some JavaScript events or just remove it  */}
+                          <img src="/telegram-screen.png" className="img-fluid" alt=""/>
                         </div>
+                        <div className="button" onClick={(event) => this.handleBtnClick(event)}></div>
                       </div>
                     </div>
                   </div>
-                </div>
                 <div className="col-lg-8 my-auto">
                   <div className="container-fluid">
                     <div className="row">
@@ -204,16 +204,16 @@ class Index extends Component {
                     <div className="row">
                       <div className="col-lg-6">
                         <div className="feature-item">
-                          <i className="icon-lock-open text-primary"></i>
-                          <h3>Open Source</h3>
-                          <p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
+                          <i className="icon-screen-smartphone text-primary"></i>
+                          <h3><Trans>Otros dispositivos</Trans></h3>
+                          <p className="text-muted"><Trans i18nKey="support-us-home">Estamos desarrollando nuestras herramientas para otros dispositivos. Puedes <a href="https://comunes.org/donate">contribuir a hacerlo posible.</a></Trans></p>
                         </div>
                       </div>
                       <div className="col-lg-6">
                         <div className="feature-item">
-                          <i className="icon-screen-smartphone text-primary"></i>
-                          <h3>Device Mockups</h3>
-                          <p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
+                          <i className="icon-lock-open text-primary"></i>
+                          <h3><Trans>Software Libre</Trans></h3>
+                          <p className="text-muted"><Trans i18nKey="dev-with-us-home">Todo nuestro trabajo es sofware libre. <a href="https://github.com/comunes/todos-contra-el-fuego" target="_blank">Traductoræs y desarrolladoræs siempre bienvenid@s</a>.</Trans></p>
                         </div>
                       </div>
                     </div>

imports/ui/stylesheets/new-age.scss

@@ -86,7 +86,7 @@ div.section.platf .feature-item {
 div.section.platf .feature-item h3 {
   font-size: 30px; }
 div.section.platf .feature-item i {
-  font-size: 80px;
+  font-size: 82px;
   display: block;
   margin-bottom: 15px;
   background: -webkit-linear-gradient(to left, #7b4397, #dc2430);

package-lock.json

@@ -4896,6 +4896,11 @@
         "void-elements": "2.0.1"
       }
     },
+    "html5-device-mockups": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html5-device-mockups/-/html5-device-mockups-3.2.0.tgz",
+      "integrity": "sha512-PszysvUvmO7s2cnDG2heogoGmOyEJPg/YHWW7VkeQeiiS6ZCWKnRAzKG58t7C3B6/KLu/Rp6PTC32NK49Li/ZQ=="
+    },
     "htmlparser2": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "fs": "0.0.1-security",
     "handlebars": "^4.0.11",
     "history": "^4.7.2",
+    "html5-device-mockups": "^3.2.0",
     "i18next": "^10.0.7",
     "i18next-browser-languagedetector": "^2.1.0",
     "i18next-localstorage-cache": "^1.1.1",

public/locales/es/common.json

@@ -125,7 +125,7 @@
   "Resaltar los fuegos con un marcador":
   "Resaltar los fuegos con un marcador",
   "mapPrivacy":
-  "<0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0> <0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0>",
+  "<0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0>",
   "Nuevas notificaciones de {{app}}":
   "Nuevas notificaciones de {{app}}",
   "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.":