Many improvements: navbar, favico, new icons

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -16,17 +16,19 @@ import NavItem from '../NavItem/NavItem';
 import { Meteor } from 'meteor/meteor';
 
 const AuthenticatedNavigation = ({ name, history, props }) => (
-  <Nav pullRight>
+  <ul className="navbar-nav ml-auto ">
+    {/* <Nav pullRight> */}
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
-      <NavItem eventKey={1} href="/documents">Documents</NavItem>
+      <NavItem eventKey={3} href="/documents">Documents</NavItem>
     </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
-      <NavItem eventKey={2.1} href="/profile">{name}</NavItem>
+      <NavItem eventKey={3.1} href="/profile">{name}</NavItem>
     </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
-      <NavItem eventKey={2.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
+      <NavItem eventKey={3.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
     </LinkContainer>
-  </Nav>
+  {/* </Nav> */}
+  </ul>
 );
 
 AuthenticatedNavigation.propTypes = {

imports/ui/components/CenterInMyPosition/CenterInMyPosition.js

@@ -9,7 +9,6 @@ class CenterInMyPosition extends React.Component {
   }
 
   onClick = (event) => {
-    console.log("Click?");
     // this.props.onClick(event);
     // https://atmospherejs.com/mdg/geolocation
     // only with SSL:
@@ -27,6 +26,7 @@ class CenterInMyPosition extends React.Component {
           zoom: 11
         }
         self.props.onClick(viewport);
+        // console.log(viewport);
         // self.onViewportChanged(viewport);
         computation.stop();
       }
@@ -36,7 +36,7 @@ class CenterInMyPosition extends React.Component {
   render() {
     return (
       <Button bsStyle="default" onClick={(event) => this.onClick(event)}>
-        <i className="location"/>{this.props.t("Centrar el mapa en tu ubicación")}
+        <i className="icons icon-target"/>{this.props.t("Centrar el mapa en tu ubicación")}
       </Button>
     )
   }

imports/ui/components/Navigation/Navigation.js

@@ -9,23 +9,29 @@ import { translate } from 'react-i18next';
 import './Navigation.scss';
 
 const Navigation = props => (
-  <Navbar bsClass="navbar navbar-dark bg-dark">
+  <nav className="navbar 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 */}
     <Navbar.Header>
-      {window.location.pathname != '/'?
       <Navbar.Brand>
-        <Link  to="/">{props.t('AppNameFull')}</Link>
-      </Navbar.Brand>: ''
-      }
+        <Link to="/">{props.t('AppNameFull')}</Link>
+      </Navbar.Brand>
       {/* <Navbar.Toggle/> */}
       <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span className="navbar-toggler-icon"></span>
       </button>
     </Navbar.Header>
-    <Navbar.Collapse>
+    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+      <span className="navbar-toggler-icon"></span>
+    </button>
+    {/* <Navbar.Collapse> */}
+    <div className="collapse navbar-collapse" id="navbarNavDropdown">
       {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
-    </Navbar.Collapse>
-  </Navbar>
+      {/* </Navbar.Collapse> */}
+    </div>
+    </div>
+  </nav>
 );
 
 Navigation.defaultProps = {

imports/ui/components/Navigation/Navigation.scss

@@ -26,3 +26,15 @@ a.nav-link:hover {
 .navbar {
   padding: 0.3rem 0rem;
 }
+
+
+a.navbar-brand {
+  font-size: 26px;
+}
+
+@media (max-width: 480px) {
+  a.navbar-brand {
+    font-size: 16px;
+    padding: 15px 3px;
+  }
+}

imports/ui/components/PublicNavigation/PublicNavigation.js

@@ -12,7 +12,11 @@ import { translate } from 'react-i18next';
 import NavItem from '../NavItem/NavItem';
 
 const PublicNavigation = (props) => (
-   <Nav pullRight>
+  <ul className="navbar-nav ml-auto ">
+  {/* <Nav pullRight> */}
+    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
+      <NavItem href="/sandbox">Sandbox</NavItem>
+    </LinkContainer>
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
       <NavItem href="/fires">{props.t('activeFires')}</NavItem>
     </LinkContainer>
@@ -22,7 +26,8 @@ const PublicNavigation = (props) => (
     <LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
       <NavItem eventKey={2} href="/login">{props.t('Iniciar sesión')}</NavItem>
     </LinkContainer>
-  </Nav>
+  {/* </Nav> */}
+  </ul>
 );
 
 export default translate([], { wait: true })(PublicNavigation);

imports/ui/layouts/App/App.js

@@ -43,6 +43,7 @@ import { check } from 'meteor/check';
 import FiresMap from  '../../pages/FiresMap/FiresMap';
 import Sandbox from  '../../pages/Sandbox/Sandbox';
 
+import 'simple-line-icons/css/simple-line-icons.css';
 import './App.scss';
 
 const history = createHistory()

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -6,8 +6,9 @@ import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider
 import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
 import update from 'immutability-helper';
 import { withTracker } from 'meteor/react-meteor-data';
-import getGKeys from '/imports/startup/client/gkeys';
+import { Gkeys  } from '/imports/startup/client/Gkeys';
 import SubsAutocomplete from './SubsAutocomplete';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 
 class FireSubscription extends React.Component {
   constructor(props) {
@@ -18,11 +19,15 @@ class FireSubscription extends React.Component {
   }
 
   componentDidMount = () => {
-    getGKeys(function(err, key) {
+    Gkeys.load(function(err, key) {
       this.setState({init: true});
     }.bind(this));
   }
 
+  centerOnUserLocation = (value) => {
+    this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}}));
+  }
+
   onAutocompleteChange = (value) => {
     this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
   }
@@ -49,6 +54,9 @@ class FireSubscription extends React.Component {
             </Col>
             <Col xs={12} sm={12} md={6} lg={6} >
               <DistanceSlider onChange={(value) => this.onSliderChange(value)} />
+              <Row className="align-items-center justify-content-center">
+                <CenterInMyPosition onClick={(viewport) => this.centerOnUserLocation(viewport)} />
+              </Row>
             </Col>
           </Row>
           <Row className="align-items-center justify-content-center">

imports/ui/pages/FireSubscription/SubsAutocomplete.js

@@ -46,9 +46,10 @@ class SubsAutocomplete extends React.Component {
       },
     }
 
+    // http://simplelineicons.com/
     const AutocompleteItem = ({ formattedSuggestion }) => (
       <div className="suggestion-item">
-        <i className='fa fa-map-marker suggestion-icon'/>{' '}
+        <i className="icons icon-location-pin suggestion-icon"/>{' '}
         <strong>{formattedSuggestion.mainText}</strong>{' '}
         <small className="text-muted">{formattedSuggestion.secondaryText}</small>
       </div>)

imports/ui/pages/FiresMap/FiresMap.js

@@ -140,28 +140,8 @@ class FiresMap extends React.Component {
     this.unionGroup = new L.LayerGroup();
   }
 
-  centerOnUserLocation = () => {
-    // https://atmospherejs.com/mdg/geolocation
-    // only with SSL:
-    // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
-
-    // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
-    var userGeoLocation = new ReactiveVar(null);
-    var state = this.state;
-    var self = this;
-    Tracker.autorun(function (computation) {
-      userGeoLocation.set(Geolocation.latLng());
-      if (userGeoLocation.get()) {
-        //stop the tracker if we got something
-        var viewport = {
-          center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
-          zoom: 11
-        }
-        self.onViewportChanged(viewport);
-        // console.log(userGeoLocation.get());
-        computation.stop();
-      }
-    });
+  centerOnUserLocation = (viewport) => {
+    this.onViewportChanged(viewport);
   }
 
   componentDidMount() {
@@ -274,7 +254,7 @@ class FiresMap extends React.Component {
              <Checkbox disabled={this.state.viewport.zoom < MAXZOOM} 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={(event) => this.centerOnUserLocation(event)} />
+             <CenterInMyPosition onClick={(viewport) => this.centerOnUserLocation(viewport)} />
            </Col>
          </Row>
          <Row>
@@ -304,7 +284,7 @@ class FiresMap extends React.Component {
            </Map>
          </Row>
          <Row>
-           (*)&nbsp;<Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans>
+           <p><span style={{paddingRight: "5px"}}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
          </Row>
       </div>
     );

imports/ui/pages/Sandbox/Sandbox.js

@@ -3,7 +3,7 @@ import { Trans, translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
 import update from 'immutability-helper';
-import getGKeys from '/imports/startup/client/gkeys';
+import { Gkeys } from '/imports/startup/client/Gkeys';
 import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
 
 class Sandbox extends React.Component {
@@ -16,6 +16,9 @@ class Sandbox extends React.Component {
 
   componentDidMount = () => {
     this.setState({init: true});
+    Gkeys.load(function(err, key) {
+      console.log(key);
+    }.bind(this));
   }
 
   render() {