Style improvements in home, navigation, and footer

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">
-    <div className="container">
+  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+    <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;