Improved home page

imports/ui/components/Navigation/Navigation.js

@@ -11,7 +11,7 @@ import NavItem from '../NavItem/NavItem';
 import './Navigation.scss';
 
 const Navigation = props => (
-  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+  <nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
     <div className="container">
     {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
     {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}

imports/ui/components/SelectionMap/SelectionMap.js

@@ -6,6 +6,7 @@ import { translate } from 'react-i18next';
 import geolocation from '/imports/startup/client/geolocation';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
+import 'leaflet-sleep/Leaflet.Sleep.js';
 import Control from 'react-leaflet-control';
 import { Button, ButtonToolbar } from 'react-bootstrap';
 import './SelectionMap.scss';
@@ -97,7 +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; }}>
+        ref={(map) => { this.selectionMap = map; }}
+        sleep={true}
+        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

@@ -10,6 +10,7 @@ import FireAlertsCollection from '../../../api/FireAlerts/FireAlerts';
 import UserSubsToFiresCollection from '../../../api/Subscriptions/Subscriptions';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 import { withTracker } from 'meteor/react-meteor-data';
+import 'leaflet-sleep/Leaflet.Sleep.js';
 import Loading from '../../components/Loading/Loading';
 import './FiresMap.scss';
 import Leaflet from 'leaflet';
@@ -263,13 +264,21 @@ class FiresMap extends React.Component {
            </Col>
          </Row>
          <Row>
+           // https://github.com/CliffCloud/Leaflet.Sleep
            <Map ref="fireMap"
                 animate={true}
                 minZoom={5}
                 preferCanvas={true}
                 onClick={this.onClickReset}
                 viewport={this.state.viewport}
-                onViewportChanged={this.onViewportChanged}>
+                onViewportChanged={this.onViewportChanged}
+                sleep={true}
+                sleepTime={750}
+                wakeTime={750}
+                sleepNote={true}
+                hoverToWake={true}
+                wakeMessage={this.props.t('Pulsa para activar')}
+                sleepOpacity={.6}>
              {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
              <TileLayer
                  attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"

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

@@ -38,7 +38,7 @@
   }
   p {
     padding-top: 10px;
-    font-size: 1.1em;
+    font-size: 1.5em;
   }
 }
 

imports/ui/pages/Index/Index.js

@@ -2,17 +2,18 @@ import React, {Component} from 'react';
 import { Button } from 'react-bootstrap';
 import { translate, Trans } from 'react-i18next';
 import {render} from 'react-dom';
-import { Link } from 'react-router-dom';
+// import { HashLink as Link } from 'react-router-hash-link';
+// import { Link } from 'react-router-dom';
 // https://www.npmjs.com/package/react-resize-detector
 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';
-// disabled import './new-age.js';
+
 
 import './Index.scss';
 import './Index-custom.scss';
 
-
 class Index extends Component {
   // Debounce by David Walsch
   // https://davidwalsh.name/javascript-debounce-function
@@ -55,13 +56,37 @@ class Index extends Component {
     this.myScaleFunction();
   };
 
+  componentDidMount() {
+    $('.carousel').carousel();
+  }
+
   render() {
+    // https://github.com/subtirelumihail/react-fullpage
+    let fullPageOptions = {
+      activeClass:          'active', // the class that is appended to the sections links
+      anchors:              ['home', 'crowdsourcing', 'platforms', 'participe', 'fires'], // the anchors for each sections
+      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
+      scrollBar:            false, // use the browser default scrollbar
+      sectionClassName:     'section', // the section class name
+      sectionPaddingTop:    '0', // the section top padding
+      sectionPaddingBottom: '0', // the section bottom padding
+      verticalAlign:        false // align the content of each section vertical
+    };
+
     return (
       <div className="IndexDisabled full-width">
         {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
+
+        <ScrollToTopOnMount />
+        <SectionsContainer className="container" {...fullPageOptions}>
+          <Section>
             <header>
               <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
-          <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
+              <div id="carouselExampleIndicators" className="carousel slide"
+                   ref="slides">
                 <ol className="carousel-indicators">
                   <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
                   <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
@@ -112,33 +137,30 @@ class Index extends Component {
                 </a>
               </div>
             </header>
-
             <section className="py-5">
             <div className="container">
               <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>
-            <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/signup">{this.props.t('Participa')}</Link>
+              {/* <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/#platforms">{this.props.t('Participa')}</Link> */}
             </div>
             </section>
+          </Section>
 
-        <section className="download text-center bg-image-full" id="download">
+          <Section className="crowd text-center bg-image-full">
             <div className="container">
               <div className="row">
                 <div className="col-md-8 mx-auto">
                   <h2 className="section-heading">Colaboración masiva contra los incendios</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 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>
                 </div>
               </div>
             </div>
-          </div>
+          </Section>
-        </section>
 
-        <section className="features" id="features">
+          <a id="join" name="join"></a>
+          <Section className="platf">
             <div className="container">
               <div className="section-heading text-center">
                 <h2><Trans>Somos muchos ojos</Trans></h2>
@@ -199,23 +221,21 @@ class Index extends Component {
                 </div>
               </div>
             </div>
-        </section>
+          </Section>
 
-        <section className="cta">
+          <Section className="">
-          <div className="cta-content">
-            <div className="container">
-               <FiresMap />
-            </div>
-          </div>
-          <div className="overlay"></div>
-        </section>
-
-        <section className="contact bg-primary" id="contact">
             <div className="container">
               <FireSubscription history={this.props.history} focusInput={false} />
             </div>
-        </section>
+            <div className="overlay"></div>
+          </Section>
 
+          <Section className="">
+            <div className="container">
+              <FiresMap />
+            </div>
+          </Section>
+        </SectionsContainer>
       </div>
     );
   };

imports/ui/pages/Index/new-age.js

@@ -1,42 +0,0 @@
-(function($) {
-  "use strict"; // Start of use strict
-
-  // Smooth scrolling using jQuery easing
-  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
-    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-      var target = $(this.hash);
-      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
-      if (target.length) {
-        $('html, body').animate({
-          scrollTop: (target.offset().top - 48)
-        }, 1000, "easeInOutExpo");
-        return false;
-      }
-    }
-  });
-
-  // Closes responsive menu when a scroll trigger link is clicked
-  $('.js-scroll-trigger').click(function() {
-    $('.navbar-collapse').collapse('hide');
-  });
-
-  // Activate scrollspy to add active class to navbar items on scroll
-  $('body').scrollspy({
-    target: '#mainNav',
-    offset: 54
-  });
-
-  // Collapse Navbar
-  /* var navbarCollapse = function() {
-   *   if ($("#mainNav").offset().top > 100) {
-   *     $("#mainNav").addClass("navbar-shrink");
-   *   } else {
-   *     $("#mainNav").removeClass("navbar-shrink");
-   *   }
-   * };
-   * // Collapse now if page is not at top
-   * navbarCollapse();
-   * // Collapse the navbar when page is scrolled
-   * $(window).scroll(navbarCollapse); */
-
-})(jQuery); // End of use strict

imports/ui/stylesheets/bootstrap-overrides.scss

@@ -12,4 +12,6 @@
 
 body {
   background-color: lighten($todos-palette5, 70%);
+  /* for fixed header */
+  padding-top: 50px;
 }

imports/ui/stylesheets/new-age.scss

@@ -46,156 +46,46 @@ p {
   line-height: 1.5;
   margin-bottom: 20px; }
 
-section {
+div.section.platf > div.container {
   padding: 100px 0; }
-section h2 {
+div.section h2 {
   font-size: 50px; }
 
-#mainNav {
+div.section.crowd > div.container {
-  border-color: rgba(34, 34, 34, 0.05);
-  background-color: white;
-  -webkit-transition: all .35s;
-  -moz-transition: all .35s;
-  transition: all .35s;
-  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
-  font-weight: 200;
-  letter-spacing: 1px; }
-#mainNav .navbar-brand {
-  color: #fdcc52;
-  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
-  font-weight: 200;
-  letter-spacing: 1px; }
-#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
-  color: #fcbd20; }
-#mainNav .navbar-toggler {
-  font-size: 12px;
-  padding: 8px 10px;
-  color: #222222; }
-#mainNav .navbar-nav > li > a {
-  font-size: 11px;
-  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
-  letter-spacing: 2px;
-  text-transform: uppercase; }
-#mainNav .navbar-nav > li > a.active {
-  color: #fdcc52 !important;
-  background-color: transparent; }
-#mainNav .navbar-nav > li > a.active:hover {
-  background-color: transparent; }
-#mainNav .navbar-nav > li > a,
-#mainNav .navbar-nav > li > a:focus {
-  color: #222222; }
-#mainNav .navbar-nav > li > a:hover,
-#mainNav .navbar-nav > li > a:focus:hover {
-  color: #fdcc52; }
-@media (min-width: 992px) {
-  #mainNav {
-    border-color: transparent;
-    background-color: transparent; }
-  #mainNav .navbar-brand {
-    color: fade(white, 70%); }
-  #mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
-    color: white; }
-  #mainNav .navbar-nav > li > a,
-  #mainNav .navbar-nav > li > a:focus {
-    color: rgba(255, 255, 255, 0.7); }
-  #mainNav .navbar-nav > li > a:hover,
-  #mainNav .navbar-nav > li > a:focus:hover {
-    color: white; }
-  #mainNav.navbar-shrink {
-    border-color: rgba(34, 34, 34, 0.1);
-    background-color: white; }
-  #mainNav.navbar-shrink .navbar-brand {
-    color: #222222; }
-  #mainNav.navbar-shrink .navbar-brand:hover, #mainNav.navbar-shrink .navbar-brand:focus {
-    color: #fdcc52; }
-  #mainNav.navbar-shrink .navbar-nav > li > a,
-  #mainNav.navbar-shrink .navbar-nav > li > a:focus {
-    color: #222222; }
-  #mainNav.navbar-shrink .navbar-nav > li > a:hover,
-  #mainNav.navbar-shrink .navbar-nav > li > a:focus:hover {
-    color: #fdcc52; } }
-
-header.masthead {
-  position: relative;
-  width: 100%;
-  padding-top: 150px;
-  padding-bottom: 100px;
-  color: white;
-  background: url("../img/bg-pattern.png"), #7b4397;
-  background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
-  background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); }
-header.masthead .header-content {
-  max-width: 500px;
-  margin-bottom: 100px;
-  text-align: center; }
-header.masthead .header-content h1 {
-  font-size: 30px; }
-header.masthead .device-container {
-  max-width: 325px;
-  margin-right: auto;
-  margin-left: auto; }
-header.masthead .device-container .screen img {
-  border-radius: 3px; }
-@media (min-width: 992px) {
-  header.masthead {
-    height: 100vh;
-    min-height: 775px;
-    padding-top: 0;
-    padding-bottom: 0; }
-  header.masthead .header-content {
-    margin-bottom: 0;
-    text-align: left; }
-  header.masthead .header-content h1 {
-    font-size: 50px; }
-  header.masthead .device-container {
-    max-width: 325px; } }
-
-section.download {
   position: relative;
   padding: 150px 0; }
-section.download h2 {
+div.section.crowd h2 {
   font-size: 50px;
-  margin-top: 0; }
+  margin-top: 20px; }
-section.download .badges .badge-link {
-  display: block;
-  margin-bottom: 25px; }
-section.download .badges .badge-link:last-child {
-  margin-bottom: 0; }
-section.download .badges .badge-link img {
-  height: 60px; }
 @media (min-width: 768px) {
-  section.download .badges .badge-link {
+  div.section.crowd h2 {
-    display: inline-block;
-    margin-bottom: 0; } }
-@media (min-width: 768px) {
-  section.download h2 {
     font-size: 70px; } }
 
-section.features .section-heading {
+div.section.platf .div.section-heading {
   margin-bottom: 100px; }
-section.features .section-heading h2 {
+div.section.platf .div.section-heading h2 {
   margin-top: 0; }
-section.features .section-heading p {
+div.section.platf .div.section-heading p {
   margin-bottom: 0; }
 
-section.features .device-container,
+div.section.platf .device-container,
-section.features .feature-item {
+div.section.platf .feature-item {
   max-width: 325px;
   margin: 0 auto; }
 
-section.features .device-container {
+div.section.platf .device-container {
   margin-bottom: 100px; }
 @media (min-width: 992px) {
-  section.features .device-container {
+  div.section.platf .device-container {
     margin-bottom: 0; } }
 
-section.features .feature-item {
+div.section.platf .feature-item {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center; }
-section.features .feature-item h3 {
+div.section.platf .feature-item h3 {
   font-size: 30px; }
-section.features .feature-item i {
+div.section.platf .feature-item i {
   font-size: 80px;
   display: block;
   margin-bottom: 15px;
@@ -204,7 +94,7 @@ section.features .feature-item i {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; }
 
-section.cta {
+div.section.cta {
   position: relative;
   padding: 250px 0;
   background-image: url("../img/bg-cta.jpg");
@@ -213,19 +103,19 @@ section.cta {
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; }
-section.cta .cta-content {
+div.section.cta .cta-content {
   position: relative;
   z-index: 1; }
-section.cta .cta-content h2 {
+div.section.cta .cta-content h2 {
   font-size: 50px;
   max-width: 450px;
   margin-top: 0;
   margin-bottom: 25px;
   color: white; }
 @media (min-width: 768px) {
-  section.cta .cta-content h2 {
+  div.section.cta .cta-content h2 {
     font-size: 80px; } }
-section.cta .overlay {
+div.section.cta .overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -233,16 +123,16 @@ section.cta .overlay {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5); }
 
-section.contact {
+div.section.contact {
   text-align: center; }
-section.contact h2 {
+div.section.contact h2 {
   margin-top: 0;
   margin-bottom: 25px; }
-section.contact h2 i {
+div.section.contact h2 i {
   color: #dd4b39; }
-section.contact ul.list-social {
+div.section.contact ul.list-social {
   margin-bottom: 0; }
-section.contact ul.list-social li a {
+div.section.contact ul.list-social li a {
   font-size: 40px;
   line-height: 80px;
   display: block;
@@ -250,17 +140,17 @@ section.contact ul.list-social li a {
   height: 80px;
   color: white;
   border-radius: 100%; }
-section.contact ul.list-social li.social-twitter a {
+div.section.contact ul.list-social li.social-twitter a {
   background-color: #1da1f2; }
-section.contact ul.list-social li.social-twitter a:hover {
+div.section.contact ul.list-social li.social-twitter a:hover {
   background-color: #0d95e8; }
-section.contact ul.list-social li.social-facebook a {
+div.section.contact ul.list-social li.social-facebook a {
   background-color: #3b5998; }
-section.contact ul.list-social li.social-facebook a:hover {
+div.section.contact ul.list-social li.social-facebook a:hover {
   background-color: #344e86; }
-section.contact ul.list-social li.social-google-plus a {
+div.section.contact ul.list-social li.social-google-plus a {
   background-color: #dd4b39; }
-section.contact ul.list-social li.social-google-plus a:hover {
+div.section.contact ul.list-social li.social-google-plus a:hover {
   background-color: #d73925; }
 
 .bg-primary {

package-lock.json

@@ -7342,6 +7342,11 @@
       "resolved": "https://registry.npmjs.org/leaflet-graphicscale/-/leaflet-graphicscale-0.0.2.tgz",
       "integrity": "sha1-q2INKJ6acETC9RB8g74XhDrsUwM="
     },
+    "leaflet-sleep": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/leaflet-sleep/-/leaflet-sleep-0.5.1.tgz",
+      "integrity": "sha1-kfhDPzjtu2uKm3jT0E7HOW6fYPY="
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
@@ -9856,6 +9861,50 @@
         }
       }
     },
+    "react-fullpage": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/react-fullpage/-/react-fullpage-0.1.18.tgz",
+      "integrity": "sha512-/pIl16rwWygUHzo7qKoQeNmtmBR37RLxaI3IlAyl0nK0ZiqmeqrH4tvlPbf/YO7kti9WfuiQcFEeoDLZ484NlQ==",
+      "requires": {
+        "react": "15.3.2",
+        "react-dom": "15.3.2"
+      },
+      "dependencies": {
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+        },
+        "loose-envify": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
+          "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
+          "requires": {
+            "js-tokens": "3.0.2"
+          }
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+        },
+        "react": {
+          "version": "15.3.2",
+          "resolved": "https://registry.npmjs.org/react/-/react-15.3.2.tgz",
+          "integrity": "sha1-p7zNL+6K8SawMX4iLCjR1UUo0J4=",
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        },
+        "react-dom": {
+          "version": "15.3.2",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.3.2.tgz",
+          "integrity": "sha1-xGsKpTgNe4OOelnEp77/LtMVUx8="
+        }
+      }
+    },
     "react-i18next": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-7.1.1.tgz",
@@ -10035,6 +10084,14 @@
         }
       }
     },
+    "react-router-hash-link": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-1.1.1.tgz",
+      "integrity": "sha1-c4DMeogJJD2UOFkkr1LcnSyfuqE=",
+      "requires": {
+        "prop-types": "15.6.0"
+      }
+    },
     "react-transition-group": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "leaflet": "^1.2.0",
     "leaflet-geodesy": "^0.2.1",
     "leaflet-graphicscale": "0.0.2",
+    "leaflet-sleep": "^0.5.1",
     "lodash": "^4.17.4",
     "loms.perlin": "^1.0.1",
     "maxmind": "^2.3.0",
@@ -45,6 +46,7 @@
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-bootstrap": "^0.31.5",
     "react-dom": "^16.0.0",
+    "react-fullpage": "^0.1.18",
     "react-i18next": "^7.1.1",
     "react-leaflet": "^1.7.7",
     "react-leaflet-control": "^1.4.0",
@@ -52,6 +54,7 @@
     "react-resize-detector": "^1.1.0",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2",
+    "react-router-hash-link": "^1.1.1",
     "reactstrap": "^5.0.0-alpha.3",
     "simpl-schema": "^0.3.2",
     "simple-line-icons": "^2.4.1"