Style improvements in home, navigation, and footer

designs/icons-tcef.svg

@@ -450,9 +450,9 @@
     </g>
     <g
        id="g17717"
-       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/apple-touch-icon-precomposed.png"
+       inkscape:export-filename="/mnt/md1/proyectos/dev/todos-contra-el-fuego-web/public/favicon-200.png"
-       inkscape:export-xdpi="17.27"
+       inkscape:export-xdpi="28.790001"
-       inkscape:export-ydpi="17.27">
+       inkscape:export-ydpi="28.790001">
       <rect
          y="108.84225"
          x="-419.07861"

imports/ui/components/BetaRibbon/BetaRibbon.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+import './BetaRibbon.scss';
+
+class BetaRibbon extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <div className="ribbon"><span>BETA</span></div>
+    );
+  }
+}
+
+BetaRibbon.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+BetaRibbon.defaultProps = {
+};
+
+export default translate([], { wait: true })(BetaRibbon);

imports/ui/components/BetaRibbon/BetaRibbon.scss

@@ -0,0 +1,43 @@
+.ribbon {
+  position: absolute;
+  left: -5px; top: -5px;
+  z-index: 2000;
+  overflow: hidden;
+  width: 75px; height: 75px;
+  text-align: right;
+}
+.ribbon span {
+  font-size: 10px;
+  font-weight: bold;
+  color: #FFF;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  width: 100px;
+  display: block;
+  background: #79A70A;
+  background: linear-gradient(#9BC90D 0%, #9BC90D 100%);
+  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
+  position: absolute;
+  top: 19px; left: -21px;
+}
+.ribbon span::before {
+  content: "";
+  position: absolute; left: 0px; top: 100%;
+  z-index: -1;
+  border-left: 3px solid #9BC90D;
+  border-right: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #9BC90D;
+}
+.ribbon span::after {
+  content: "";
+  position: absolute; right: 0px; top: 100%;
+  z-index: -1;
+  border-left: 3px solid transparent;
+  border-right: 3px solid #9BC90D;
+  border-bottom: 3px solid transparent;
+  border-top: 3px solid #9BC90D;
+}

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -35,15 +35,22 @@ class CenterInMyPosition extends React.Component {
   }
 
   render() {
+    const { onlyIcon, t } = this.props;
+    const msg = t('Centrar en tu ubicación');
     return (
       <Button bsStyle="default" onClick={() => this.onClick()}>
-        <i className="icons icon-target" />{this.props.t('Centrar en tu ubicación')}
+        <i className="icons icon-target" title={!onlyIcon ? msg : ''} />{!onlyIcon ? msg : ''}
       </Button>);
   }
 }
 
+CenterInMyPosition.defaultProps = {
+  onlyIcon: false
+};
+
 CenterInMyPosition.propTypes = {
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  onlyIcon: PropTypes.bool
 };
 
 export default translate([], { wait: true })(CenterInMyPosition);

imports/ui/components/Footer/Footer.scss

@@ -14,10 +14,10 @@ body {
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 60px;
+  /* height: 60px; */
   background-color: #fff;
   border-top: 1px solid $gray-lighter;
-  padding: 20px 0;
+  padding: 15px 0 0 0;
 
   p {
     color: $gray-light;

imports/ui/components/Navigation/Navigation.js

@@ -4,15 +4,18 @@ import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Trans, translate } from 'react-i18next';
+import BetaRibbon from '../../components/BetaRibbon/BetaRibbon';
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
 import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
 import NavItem from '../NavItem/NavItem';
 
 import './Navigation.scss';
 
+// removed class: fixed-top
 const Navigation = props => (
-  <nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
+  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div className="container">
+    <div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
+      <BetaRibbon />
       {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
       {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
       <Navbar.Header>

imports/ui/components/Navigation/Navigation.scss

@@ -44,5 +44,5 @@ a.navbar-brand {
 }
 
 .hide-brand {
-  /* opacity: 0; */
+  opacity: 0;
 }

imports/ui/components/SelectionMap/SelectionMap.js

@@ -164,17 +164,18 @@ class SelectionMap extends Component {
       <Row>
         <Col xs={12} sm={12} md={12} lg={12}>
           <Map
-              className="selectionmap-leaflet-container"
-              center={this.state.center}
-              zoom={this.state.zoom}
               ref={(map) => {
                   this.selectionMap = map;
                   this.handleLeafletLoad(map);
                 }}
+              zoom={this.state.zoom}
+              center={this.state.center}
+              className="selectionmap-leaflet-container"
+              onViewportChanged={this.onViewportChanged}
+              animate
               sleep={window.location.pathname === '/'}
               sleepTime={10750}
               wakeTime={750}
-              onViewportChanged={this.onViewportChanged}
               sleepNote
               hoverToWake={false}
               wakeMessage={t('Pulsa para activar')}

imports/ui/components/SelectionMap/SelectionMap.scss

@@ -2,7 +2,7 @@
 
 .selectionmap-leaflet-container {
   height: 100%;
-  min-height: 60vh;
+  min-height: 65vh;
   width: 100%;
   /* min-width: 75vw; */
   display: flex;

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -91,8 +91,7 @@ class FireSubscription extends React.Component {
             }
           </Col>
         </Row>
-        <Row className="align-items-center justify-content-center">
+        <SelectionMap
-          <SelectionMap
               center={this.state.center}
               zoom={this.state.zoom}
               distance={this.state.distance}
@@ -100,8 +99,7 @@ class FireSubscription extends React.Component {
               onFstBtn={state => this.onSubs(state)}
               onSelection={state => this.onSelection(state)}
               action={action.add}
-          />
+        />
-        </Row>
       </div>
     );
   }

imports/ui/pages/FiresMap/FiresMap.js

@@ -4,12 +4,13 @@
 /* eslint-disable react/jsx-indent */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Checkbox } from 'react-bootstrap';
+import { ButtonGroup, Row, Col, Checkbox } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
 import { Map } from 'react-leaflet';
+import Control from 'react-leaflet-control';
 import _ from 'lodash';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
@@ -156,7 +157,6 @@ class FiresMap extends React.Component {
               <Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
                 <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
               </Checkbox>}
-              <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
              </Fragment>}
               <p className="firesmap-note">
                 <em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
@@ -206,6 +206,11 @@ class FiresMap extends React.Component {
              />
            </Fragment> }
            <DefMapLayers />
+           <Control position="topright" >
+             <ButtonGroup>
+               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
+             </ButtonGroup>
+           </Control>
          </Map>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12}>

imports/ui/pages/FiresMap/FiresMap.scss

@@ -5,7 +5,7 @@
 
 .firesmap-leaflet-container {
   height: 100%;
-  min-height: 60vh;
+  min-height: 55vh;
   width: 100%;
   /* min-width: 75vw; */
   display: flex;
@@ -14,7 +14,7 @@
 
 @include breakpoint(mobile) {
   .firesmap-leaflet-container {
-    height: 80%;
+    height: 70%;
     min-width: 85vw;
     margin: 10px auto;
   }

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

@@ -172,8 +172,7 @@
   position: relative;
   width: 100vw;
   margin-left: calc(-50vw + 50%);
-  margin-top: -21px;
+  /* margin-top: -21px; full pagen */
-  position: relative;
   /*
     width: 100vw;
     position: relative;
@@ -222,7 +221,7 @@
 }
 
 .full-width .page-header { // section titles
-  margin-top: 20px;
+  padding-top: 30px;
 }
 
 .sect1 {
@@ -249,4 +248,18 @@
 
 .sect3, sect4, sect5, sect6 {
   overflow: visible !important;
+}
+
+
+.crowd-footer {
+  position: relative;
+  bottom: -150px;
+  left: 0px;
+  text-align: left;
+}
+
+.crowd-footer > p {
+  font-size: 13px;
+  margin-left: 10px;
+  margin-right: 10px;
 }

imports/ui/pages/Index/Index.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 // https://www.npmjs.com/package/react-resize-detector
 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';
@@ -44,11 +43,11 @@ class Index extends Component {
   getMap(isMobile) {
     if (!isMobile) {
       return (
-        <Section className="sect5">
+        <section className="sect5">
           <div className="container">
             <FiresMap />
           </div>
-        </Section>);
+        </section>);
     }
     return (<Fragment />);
   }
@@ -70,27 +69,25 @@ class Index extends Component {
 
   render() {
     // https://github.com/subtirelumihail/react-fullpage
-    const fullPageOptions = {
+    /* const fullPageOptions = {
-      anchors:              isAnyMobile ? ['home', 'crowdsourcing', 'users', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'users', 'participe', 'fires', 'platforms'], // the anchors for each sections
+     *   anchors:              isAnyMobile ? ['home', 'crowdsourcing', 'users', 'participe', 'platforms'] : ['home', 'crowdsourcing', 'users', 'participe', 'fires', 'platforms'], // the anchors for each sections
-      activeClass:          'active', // the class that is appended to the sections links
+     *   activeClass:          'active', // the class that is appended to the sections links
-      arrowNavigation:      true, // use arrow keys (true after development)
+     *   arrowNavigation:      true, // use arrow keys (true after development)
-      className:            'section-container', // the class name for the section container
+     *   className:            'section-container', // the class name for the section container
-      delay:                1000, // the scroll animation speed
+     *   delay:                1000, // the scroll animation speed
-      navigation:           true, // !isMobile, // use dots navigation
+     *   navigation:           true, // !isMobile, // use dots navigation
-      scrollBar:            isAnyMobile, // use the browser default scrollbar
+     *   scrollBar:            isAnyMobile, // use the browser default scrollbar
-      sectionClassName:     'section', // the section class name
+     *   sectionClassName:     'section', // the section class name
-      sectionPaddingTop:    '0', // the section top padding
+     *   sectionPaddingTop:    '20', // the section top padding
-      sectionPaddingBottom: '0', // the section bottom padding
+     *   sectionPaddingBottom: '0', // the section bottom padding
-      verticalAlign:        false // align the content of each section vertical
+     *   verticalAlign:        false // align the content of each section vertical
-    };
+     * }; */
 
     return (
       <div className="IndexDisabled full-width">
         {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
-
+        <Fragment>
-        <ScrollToTopOnMount />
+          <section className="sect1">
-        <SectionsContainer className="container" {...fullPageOptions}>
-          <Section className="sect1">
             <header>
               <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
               <div
@@ -158,26 +155,29 @@ class Index extends Component {
                 {/* <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/#platforms">{this.props.t('Participa')}</Link> */}
               </div>
             </section>
-          </Section>
+          </section>
 
-          <Section className="crowd text-center bg-image-full sect2">
+          <section className="crowd text-center bg-image-full sect2">
             <div className="container">
               <div className="row">
                 <div className="col-md-8 mx-auto">
                   <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>
+                  <p><Trans>Usamos diferentes fuentes de datos para notificarte de fuegos activos en tus zonas de interés</Trans></p>
                 </div>
               </div>
+              <div className="row crowd-footer">
+                <p className="text-muted"><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>
-          </Section>
+          </section>
 
-          <Section className="sect3">
+          <section className="sect3">
             <div className="container">
               <SubscriptionsMap />
             </div>
-          </Section>
+          </section>
 
-          <Section className="sect4">
+          <section className="sect4">
             <div className="container">
               <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
               <SubscriptionEditor
@@ -185,16 +185,14 @@ class Index extends Component {
                   history={this.props.history}
               />
             </div>
-          </Section>
+          </section>
 
           {this.getMap(isAnyMobile)}
 
-          <Section className="platf sect6">
+          <section className="platf sect6">
             <div className="container">
               <div className="section-heading text-center">
                 <h2><Trans>Somos muchos ojos</Trans></h2>
-                <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">
                 <div className="col-lg-4 my-auto">
@@ -248,9 +246,8 @@ class Index extends Component {
                 </div>
               </div>
             </div>
-          </Section>
+          </section>
-
+        </Fragment>
-        </SectionsContainer>
       </div>
     );
   }

imports/ui/pages/Signup/Signup.js

@@ -118,7 +118,7 @@ class Signup extends React.Component {
                 services={['telegram', 'google']}
                 emailMessage={{
                   offset: 97,
-                  text: t('o regístrate con un correo')
+                  text: t('o con un correo')
                 }}
               />
             </Col>

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -84,10 +84,7 @@ class Subscriptions extends Component {
     const firstBtnTitle = ['Añadir zona', '', 'Terminar']; // view, add, edit
     return (!loading ? (
       <div className="Subscriptions">
-        <div className="page-header clearfix">
+        <h4 className="page-header"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
-          <h4 className="pull-left"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
-        </div>
-        <br />
       { subscriptions.length === 0 ?
         <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
         <Alert bsStyle="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -109,7 +109,7 @@ class SubscriptionsMap extends React.Component {
            <DefMapLayers />
            <Control position="topright" >
              <ButtonGroup>
-               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} {... this.props} />
+               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
              </ButtonGroup>
            </Control>
          </Map>

imports/ui/stylesheets/bootstrap-overrides.scss

@@ -1,19 +1,9 @@
 @import './mixins';
 
-.page-header {
-  margin-top: 0;
-}
-
-@include breakpoint(tablet) {
-  .page-header {
-    margin-top: 20px;
-  }
-}
-
 body {
   background-color: lighten($todos-palette5, 70%);
   /* for fixed header */
-  padding-top: 50px;
+  /* padding-top: 50px; */
 }
 
 .navbar-nav .nav-link {

imports/ui/stylesheets/custom.scss

@@ -20,9 +20,19 @@ h4.page-header {
 }
 
 .App > .container { // Because of fixed header, previously page-header {
-  margin-top: 30px;
+  /* margin-top: 30px; */
 }
 
 h4.page-header {
   font-size: 2em;
-}
+}
+
+.page-header {
+  margin-top: 0;
+}
+
+@include breakpoint(tablet) {
+  .page-header {
+    margin-top: 10px;
+  }
+}

imports/ui/stylesheets/new-age.scss

@@ -48,50 +48,50 @@ p {
   line-height: 1.5;
   margin-bottom: 20px; }
 
-div.section.platf > div.container {
+section.platf > div.container {
   padding: 30px 0; }
-div.section h2 {
+section h2 {
   font-size: 50px; }
 
 @include breakpoint(mobile) {
-  div.section h2 {
+  section h2 {
     font-size: 40px; }
 }
 
-div.section.crowd > div.container {
+section.crowd > div.container {
   position: relative;
-  padding: 120px 0; }
+  padding: 150px 0; }
-div.section.crowd h2 {
+section.crowd h2 {
   font-size: 50px;
   margin-top: 20px; }
 @media (min-width: 768px) {
-  div.section.crowd h2 {
+  section.crowd h2 {
     font-size: 70px; } }
 
 @include breakpoint(mobile) {
-  div.section.crowd p {
+  section.crowd p {
     padding-left: 10px;
     padding-right: 10px;
   }
 
-  div.section.crowd h2 {
+  section.crowd h2 {
     font-size: 35px; } }
 
-div.section.platf .div.section-heading {
+section.platf .section-heading {
-  margin-bottom: 100px; }
+  margin-bottom: 30px; }
-div.section.platf .div.section-heading h2 {
+section.platf .section-heading h2 {
   margin-top: 0; }
-div.section.platf .div.section-heading p {
+section.platf .section-heading p {
   margin-bottom: 0; }
 
-div.section.platf .device-container,
+section.platf .device-container,
-div.section.platf .feature-item {
+section.platf .feature-item {
   max-width: 325px;
   margin: 0 auto; }
 
 @include breakpoint(mobile) {
-  div.section.platf .device-container,
+  section.platf .device-container,
-  div.section.platf .feature-item {
+  section.platf .feature-item {
     margin: 10px auto;
   }
 
@@ -100,26 +100,26 @@ div.section.platf .feature-item {
   }
 }
 
-div.section.platf .device-container {
+section.platf .device-container {
   margin-bottom: 100px; }
 @media (min-width: 992px) {
-  div.section.platf .device-container {
+  section.platf .device-container {
     margin-bottom: 0; } }
 
-div.section.platf .feature-item {
+section.platf .feature-item {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center; }
 
 @include breakpoint(mobile) {
-  div.section.platf .feature-item {
+  section.platf .feature-item {
     padding-top: 15px;
     padding-bottom: 15px; }
 }
 
-div.section.platf .feature-item h3 {
+section.platf .feature-item h3 {
   font-size: 30px; }
-div.section.platf .feature-item i {
+section.platf .feature-item i {
   font-size: 82px;
   display: block;
   margin-bottom: 15px;
@@ -128,7 +128,7 @@ div.section.platf .feature-item i {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; }
 
-div.section.cta {
+section.cta {
   position: relative;
   padding: 250px 0;
   background-image: url("../img/bg-cta.jpg");
@@ -137,19 +137,19 @@ div.section.cta {
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; }
-div.section.cta .cta-content {
+section.cta .cta-content {
   position: relative;
   z-index: 1; }
-div.section.cta .cta-content h2 {
+section.cta .cta-content h2 {
   font-size: 50px;
   max-width: 450px;
   margin-top: 0;
   margin-bottom: 25px;
   color: white; }
 @media (min-width: 768px) {
-  div.section.cta .cta-content h2 {
+  section.cta .cta-content h2 {
     font-size: 80px; } }
-div.section.cta .overlay {
+section.cta .overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -157,16 +157,16 @@ div.section.cta .overlay {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5); }
 
-div.section.contact {
+section.contact {
   text-align: center; }
-div.section.contact h2 {
+section.contact h2 {
   margin-top: 0;
   margin-bottom: 25px; }
-div.section.contact h2 i {
+section.contact h2 i {
   color: #dd4b39; }
-div.section.contact ul.list-social {
+section.contact ul.list-social {
   margin-bottom: 0; }
-div.section.contact ul.list-social li a {
+section.contact ul.list-social li a {
   font-size: 40px;
   line-height: 80px;
   display: block;
@@ -174,17 +174,17 @@ div.section.contact ul.list-social li a {
   height: 80px;
   color: white;
   border-radius: 100%; }
-div.section.contact ul.list-social li.social-twitter a {
+section.contact ul.list-social li.social-twitter a {
   background-color: #1da1f2; }
-div.section.contact ul.list-social li.social-twitter a:hover {
+section.contact ul.list-social li.social-twitter a:hover {
   background-color: #0d95e8; }
-div.section.contact ul.list-social li.social-facebook a {
+section.contact ul.list-social li.social-facebook a {
   background-color: #3b5998; }
-div.section.contact ul.list-social li.social-facebook a:hover {
+section.contact ul.list-social li.social-facebook a:hover {
   background-color: #344e86; }
-div.section.contact ul.list-social li.social-google-plus a {
+section.contact ul.list-social li.social-google-plus a {
   background-color: #dd4b39; }
-div.section.contact ul.list-social li.social-google-plus a:hover {
+section.contact ul.list-social li.social-google-plus a:hover {
   background-color: #d73925; }
 
 .bg-primary {