More work in home, footer, new credits page

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -24,7 +24,7 @@ class CenterInMyPosition extends React.Component {
         var viewport = {
           center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
           zoom: 11
-        }
+        };
         self.props.onClick(viewport);
         // console.log(viewport);
         // self.onViewportChanged(viewport);

imports/ui/components/Footer/Footer.js

@@ -22,6 +22,7 @@ const Footer = (props) => {
           <li><Link to="/terms"> {t('Términos')}<span className="d-none d-md-inline"> {t('de Servicio')}</span></Link></li>
           <li><Link to="/privacy"><span className="d-none d-md-inline">{t('Política de')} </span>{t('Privacidad')}</Link></li>
           <li><span className="d-none d-md-inline"><Link to="/license">{t('Licencia')}</Link></span></li>
+          <li><span className="d-none d-md-inline"><Link to="/credits">{t('Créditos')}</Link></span></li>
         </ul>
       </Grid>
     </div>

imports/ui/components/Footer/Footer.scss

@@ -43,7 +43,7 @@ body {
   ul li {
     float: left;
 
-    &:first-child, &:nth-child(2) {
+    &:first-child, &:nth-child(3) {
       margin-right: 15px;
     }
 

imports/ui/layouts/App/App.js

@@ -40,6 +40,7 @@ import Footer from '../../components/Footer/Footer';
 import Terms from '../../pages/Terms/Terms';
 import Privacy from '../../pages/Privacy/Privacy';
 import License from '../../pages/License/License';
+import Credits from '../../pages/Credits/Credits';
 import FireSubscription from '../../pages/FireSubscription/FireSubscription';
 import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
 import FiresMap from '../../pages/FiresMap/FiresMap';
@@ -74,13 +75,14 @@ const App = props => (
               <Public path="/login" component={Login} {...props} />
               <Route path="/logout" component={Logout} {...props} />
               <Route path="/sandbox" component={Sandbox} {...props} />
-              <Public path="/subscriptions" component={FireSubscription} {...props} />
+              <Public path="/subscriptions" component={FireSubscription} focusInput {...props} />
               <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
               <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
               <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
               <Route name="terms" path="/terms" component={Terms} />
               <Route name="privacy" path="/privacy" component={Privacy} />
               <Route name="license" path="/license" component={License} />
+              <Route name="credits" path="/credits" component={Credits} />
               <Route component={NotFound} />
             </Switch>
           </Grid>

imports/ui/pages/Credits/Credits.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Page from '../Page/Page';
+import { translate } from 'react-i18next';
+
+const Credits = props => (
+    <div className="Credits">
+    <Page
+        title={props.t("Créditos")}
+        subtitle={props.t("Sobre los datos y imágenes usados")}
+        page="credits"
+    />
+    </div>
+);
+
+export default translate([], { wait: true })(Credits);

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -50,6 +50,7 @@ class FireSubscription extends React.Component {
               <div>
                 <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
                 <SubsAutocomplete
+                    focusInput={this.props.focusInput}
                     onChange={ (value) => this.onAutocompleteChange(value) }/>
               </div>
             </Col>
@@ -75,7 +76,8 @@ class FireSubscription extends React.Component {
 }
 
 FireSubscription.propTypes = {
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
+  focusInput: PropTypes.bool.isRequired
 };
 
 export default translate([], { wait: true })(FireSubscription);

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Trans, translate } from 'react-i18next';
-import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
+import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
 import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
 
 class SubsAutocomplete extends React.Component {
@@ -84,7 +85,7 @@ class SubsAutocomplete extends React.Component {
                   placeholder: this.props.t("Escribe aquí un lugar "),
                   onBlur:() => { /* console.log('Blur event!'); */ },
                   onFocus:() => { /* console.log('Focused!'); */ },
-                  autoFocus:true
+                  autoFocus: this.props.focusInput
                 }} />
           <HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
         </FormGroup>
@@ -93,5 +94,8 @@ class SubsAutocomplete extends React.Component {
   }
 }
 
+SubsAutocomplete.propTypes = {
+  focusInput: PropTypes.bool.isRequired
+};
 
 export default translate([], { wait: true }) (SubsAutocomplete);

imports/ui/pages/FiresMap/FiresMap.js

@@ -94,7 +94,7 @@ FireMark.propTypes = {
 };
 
 // Below this use only pixels
-const MAXZOOM = 7;
+const MAXZOOM = 6;
 
 const MyMarkersList = ({ markers }) => {
   const items = markers.map(({ key, ...props }) => (
@@ -111,7 +111,7 @@ const FireList = ({ fires, scale, useMarkers, nasa }) => {
    *   }
    * }*/
   const items = fires.map(({ _id, ...props }) => (
-    useMarkers && !scale? <MyPopupMarker key={_id} nasa={nasa} {...props} />:
+    useMarkers && scale? <MyPopupMarker key={_id} nasa={nasa} {...props} />:
     (!nasa && !scale)? <FirePixel key={_id} nasa={nasa} {...props} />:<FireMark key={_id} nasa={nasa} {...props} />));
   return <div style={{ display: 'none' }}>{items}</div>;
 };
@@ -141,30 +141,33 @@ class FiresMap extends React.Component {
   }
 
   centerOnUserLocation = (viewport) => {
-    this.onViewportChanged(viewport);
+    this.handleViewportChange(viewport);
   };
 
+  handleViewportChange = function (viewport) {
+    console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
+    zoom.set(viewport.zoom);
+    lat.set(viewport.center[0]);
+    lng.set(viewport.center[1]);
+    this.state.viewport = viewport;
+    this.state.modified = true;
+    if (this.props.subsready && this.refs.fireMap) {
+      this.showSubsUnion(this.state.showSubsUnion);
+    }
+  }
+
   componentDidMount() {
     height.set(this.divElement.clientHeight);
     width.set(this.divElement.clientWidth);
     this.addScale();
     const self = this;
-    this.handleViewportChangeDebounced = _.debounce(function (viewport) {
+    // viewportchange
-      console.log(`Viewport changed: ${JSON.stringify(this.state.viewport)}`);
+    this.debounceView = _.debounce(function(viewport) {this.handleViewportChange(viewport); }.bind(this), 2000);
-      zoom.set(viewport.zoom);
-      lat.set(viewport.center[0]);
-      lng.set(viewport.center[1]);
-      self.state.viewport = viewport;
-      self.state.modified = true;
-      if (self.props.subsready && self.refs.fireMap) {
-        self.showSubsUnion(self.state.showSubsUnion);
-      }
-    }, 2000);
   }
 
   // https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
   onViewportChanged = (viewport) => {
-    this.handleViewportChangeDebounced(viewport);
+    this.debounceView(viewport);
   };
 
   onClickReset = () => {
@@ -253,15 +256,16 @@ class FiresMap extends React.Component {
              <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.showSubsUnion(e.target.checked)}>
                <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
              </Checkbox>
-             <Checkbox disabled={this.state.viewport.zoom < MAXZOOM} inline={false} onClick={e => this.useMarkers(e.target.checked)}>
+             {(this.state.viewport.zoom >= MAXZOOM) && <Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
                <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
-             </Checkbox>
+             </Checkbox>}
              <CenterInMyPosition onClick={(viewport) => this.centerOnUserLocation(viewport)} />
            </Col>
          </Row>
          <Row>
            <Map ref="fireMap"
                 animate={true}
+                minZoom={5}
                 preferCanvas={true}
                 onClick={this.onClickReset}
                 viewport={this.state.viewport}
@@ -273,7 +277,7 @@ class FiresMap extends React.Component {
              />
              <FireList
                  fires={this.props.activefires}
-                 scale={this.state.viewport.zoom > MAXZOOM}
+                 scale={this.state.viewport.zoom >= MAXZOOM}
                  useMarkers={this.state.useMarkers}
                  nasa={true}
              />

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

@@ -140,3 +140,31 @@
   color: white;
   text-transform: uppercase;
 }
+
+.bg-image-full {
+  color: white;
+  text-shadow: 2px 2px 1px #280B0B;
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  background-image: url('/home-fires.jpg');
+}
+
+@media only screen and (max-width: 767px) {
+  .bg-image-full {
+    background-image: url('/home-fires-800.jpg');
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .bg-image-full {
+    background-image: url('/home-fires-400.jpg');
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .bg-image-full {
+    background-image: url('/home-fires-1000.jpg'); }
+}

imports/ui/pages/Index/Index.js

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import ReactResizeDetector from 'react-resize-detector';
 import FiresMap from  '../FiresMap/FiresMap';
 import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
-import './new-age.js';
+// disabled import './new-age.js';
 
 import './Index.scss';
 import './Index-custom.scss';
@@ -123,12 +123,12 @@ class Index extends Component {
           </div>
         </section>
 
-        <section className="download bg-primary text-center" id="download">
+        <section className="download text-center bg-image-full" id="download">
           <div className="container">
             <div className="row">
               <div className="col-md-8 mx-auto">
-                <h2 className="section-heading">Discover what all the buzz is about!</h2>
+                <h2 className="section-heading">Colaboración masiva contra los incendios</h2>
-                <p>Our app is available on any mobile device! Download now to get started!</p>
+                <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 className="badges">
                   <a className="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""/></a>
                   <a className="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""/></a>
@@ -141,8 +141,8 @@ class Index extends Component {
         <section className="features" id="features">
           <div className="container">
             <div className="section-heading text-center">
-              <h2>Unlimited Features, Unlimited Fun</h2>
+              <h2><Trans>Somos muchos ojos</Trans></h2>
-              <p className="text-muted">Check out what you can do with this app theme!</p>
+              <p className="text-muted"><Trans>Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés</Trans></p>
               <hr/>
             </div>
             <div className="row">
@@ -165,11 +165,11 @@ class Index extends Component {
                 <div className="container-fluid">
                   <div className="row">
                     <div className="col-lg-6">
-                      <div className="feature-item">
+                      <a className="feature-link"target="_blank" href="https://t.me/TodosContraElFuego_bot"><div className="feature-item">
                         <i className="fa fa-telegram text-primary"></i>
                         <h3>Telegram</h3>
-                        <p className="text-muted"><Trans>Usa nuestro bot de Telegram</Trans></p>
+                        <p className="text-muted"><Trans>Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área</Trans></p>
-                      </div>
+                      </div></a>
                     </div>
                     <div className="col-lg-6">
                       <div className="feature-item">
@@ -204,8 +204,7 @@ class Index extends Component {
         <section className="cta">
           <div className="cta-content">
             <div className="container">
-              <h2>Stop waiting.<br/>Start building.</h2>
+               <FiresMap />
-              <a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
             </div>
           </div>
           <div className="overlay"></div>
@@ -213,38 +212,7 @@ class Index extends Component {
 
         <section className="contact bg-primary" id="contact">
           <div className="container">
-            <h2>We
+            <FireSubscription history={this.props.history} focusInput={false} />
-              <i className="fa fa-heart"></i>
-              new friends!</h2>
-            <ul className="list-inline list-social">
-              <li className="list-inline-item social-twitter">
-                <a href="#">
-                  <i className="fa fa-twitter"></i>
-                </a>
-              </li>
-              {/* <li className="list-inline-item social-facebook">
-              <a href="#">
-              <i className="fa fa-facebook"></i>
-              </a>
-              </li>
-              <li className="list-inline-item social-google-plus">
-              <a href="#">
-              <i className="fa fa-google-plus"></i>
-              </a>
-              </li> */}
-            </ul>
-          </div>
-        </section>
-
-        <section className="py-5">
-          <div className="container">
-            <FireSubscription history={this.props.history} />
-          </div>
-        </section>
-
-        <section className="py-5">
-          <div className="container">
-            <FiresMap />
           </div>
         </section>
 

imports/ui/pages/Login/Login.js

@@ -75,7 +75,7 @@ class Login extends React.Component {
                   services={['google']}
                   emailMessage={{
                     offset: 100,
-                    text: this.t('o inicia sesión con un correo')
+                    text: this.t('o con un correo')
                   }}
                 />
               </Col>

imports/ui/stylesheets/new-age.scss

@@ -14,13 +14,13 @@ body {
 }
 
 a {
-  color: #fdcc52;
+  /* color: #fdcc52; */
   -webkit-transition: all .35s;
   -moz-transition: all .35s;
   transition: all .35s; }
 
 a:hover, a:focus {
-  color: #fcbd20; }
+  /* color: #fcbd20; */ }
 
 hr {
   max-width: 100px;
@@ -263,22 +263,6 @@ section.contact ul.list-social li.social-google-plus a {
 section.contact ul.list-social li.social-google-plus a:hover {
   background-color: #d73925; }
 
-footer {
-  padding: 25px 0;
-  text-align: center;
-  color: rgba(255, 255, 255, 0.3);
-  background-color: #222222; }
-footer p {
-  font-size: 12px;
-  margin: 0; }
-footer ul {
-  margin-bottom: 0; }
-footer ul li a {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.3); }
-footer ul li a:hover, footer ul li a:focus, footer ul li a:active, footer ul li a.active {
-  text-decoration: none; }
-
 .bg-primary {
   background: #fdcc52;
   background: -webkit-linear-gradient(#fdcc52, #fdc539);
@@ -301,11 +285,34 @@ footer ul li a:hover, footer ul li a:focus, footer ul li a:active, footer ul li
   background-color: #fdcc52; }
 
 .btn {
-  border-radius: 300px;
+  /* border-radius: 300px; */
   font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
+  /* text-transform: uppercase; */ }
+
+@media (min-width: 480px) {
+  .btn {
     letter-spacing: 2px;
-  text-transform: uppercase; }
+    text-transform: uppercase;
+  }
+}
+
+.EmailMessage {
+  font-size: 16px;
+}
+
+.OAuthLoginButtons > .btn {
+  letter-spacing: inherit;
+  text-transform: none;
+}
+
+h1 {
+  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
+}
 
 .btn-xl {
   font-size: 11px;
   padding: 15px 45px; }
+
+a.feature-link:hover {
+  text-decoration: none;
+}

package-lock.json

@@ -4849,10 +4849,6 @@
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
       "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ=="
     },
-    "hoist-non-react-statics": {
-      "version": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
-      "integrity": "sha1-ND24TGAYxlB3iJgkATWhQg7iLOA="
-    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -9861,13 +9857,20 @@
       }
     },
     "react-i18next": {
-      "version": "6.2.0",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-6.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.1.1.tgz",
-      "integrity": "sha512-OYoZku8QErBiqEvSq8/Lm7RPdOQP/TQF/CWa52vwT6SeBll4YFeGu4dssz3fmKgTEDmxC3MOaNb7NZv9V4Yc8Q==",
+      "integrity": "sha1-T7XLTvf3rU/HfMKY6Sln0H1t7nU=",
       "requires": {
-        "hoist-non-react-statics": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
+        "hoist-non-react-statics": "2.3.1",
         "html-parse-stringify2": "2.0.1",
         "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
+          "integrity": "sha1-ND24TGAYxlB3iJgkATWhQg7iLOA="
+        }
       }
     },
     "react-leaflet": {

package.json

@@ -45,7 +45,7 @@
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-bootstrap": "^0.31.5",
     "react-dom": "^16.0.0",
-    "react-i18next": "^6.1.0",
+    "react-i18next": "^7.1.1",
     "react-leaflet": "^1.7.7",
     "react-leaflet-control": "^1.4.0",
     "react-places-autocomplete": "^5.4.3",

private/pages/credits.md

@@ -0,0 +1,9 @@
+
+## Data ##
+
+We acknowledge the use of data and imagery from LANCE FIRMS operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS) with funding provided by NASA/HQ.
+
+## Photos ##
+
+https://commons.wikimedia.org/wiki/File:California_Wildfires_October_23_2007.jpg
+Source: http://www.nasa.gov/vision/earth/lookingatearth/socal_wildfires_oct07.html

public/locales/en/common.json

@@ -15,8 +15,8 @@
   "Regístrate": "Sign Up",
   "Iniciar sesión": "Login",
   "o regístrate con un correo": "or Sign Up with an Email Address",
-  "o inicia sesión con un correo":
+  "o con un correo":
-  "or Log In with an Email Address",
+  "or with an Email Address",
   "Nombre":
   "First Name",
   "Apellidos":
@@ -100,5 +100,9 @@
   "Repite la nueva contraseña":
   "Repeat New Password",
   "Resetea la contraseña y entra":
-  "Reset Password & Login"
+  "Reset Password & Login",
+  "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.":
+  "Images captured by NASA satellites show the smoke of large fires spreading over the Pacific Ocean. Fire activity is outlined in red.",
+  "Colaboración masiva contra los incendios":
+  "Corwdsourcing against wildfires"
 }

public/locales/es/common.json

@@ -16,8 +16,8 @@
   "Iniciar sesión": "Iniciar sesión",
   "o regístrate con un correo":
   "o regístrate con un correo",
-  "o inicia sesión con un correo":
+  "o con un correo":
-  "o inicia sesión con un correo",
+  "o con un correo",
   "Nombre":
   "Nombre",
   "Apellidos":
@@ -127,5 +127,9 @@
   "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>",
   "Nuevas notificaciones de {{app}}":
-  "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.":
+  "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.",
+  "Colaboración masiva contra los incendios":
+  "Colaboración masiva contra los incendios"
 }