More work in home, footer, new credits page

2017-12-11 07:56:54 +01:00 · 2017-12-11 07:56:54 +01:00 · 441dfa4c62
commit 441dfa4c62
parent b6b8f893e3
22 changed files with 155 additions and 104 deletions
--- a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
+++ b/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);
--- a/imports/ui/components/Footer/Footer.js
+++ b/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>
--- a/imports/ui/components/Footer/Footer.scss
+++ b/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;
    }

--- a/imports/ui/layouts/App/App.js
+++ b/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>
--- a/imports/ui/pages/Credits/Credits.js
+++ b/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);
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/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);
--- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js
+++ b/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);
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/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) {
-      console.log(`Viewport changed: ${JSON.stringify(this.state.viewport)}`);
-      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);
+    // viewportchange
+    this.debounceView = _.debounce(function(viewport) {this.handleViewportChange(viewport); }.bind(this), 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}
             />
--- a/imports/ui/pages/Index/Index-custom.scss
+++ b/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'); }
+}
--- a/imports/ui/pages/Index/Index.js
+++ b/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>
-                <p>Our app is available on any mobile device! Download now to get started!</p>
+                <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>
@ -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>
-              <p className="text-muted">Check out what you can do with this app theme!</p>
+              <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">
@ -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>
-                      </div>
+                        <p className="text-muted"><Trans>Usa nuestro bot de Telegram para estar al tanto de los fuegos en tus área</Trans></p>
+                      </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>
-              <a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
+               <FiresMap />
            </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
-              <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 />
+            <FireSubscription history={this.props.history} focusInput={false} />
          </div>
        </section>

--- a/imports/ui/pages/Login/Login.js
+++ b/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>
--- a/imports/ui/stylesheets/new-age.scss
+++ b/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';
-  letter-spacing: 2px;
-  text-transform: uppercase; }
+  /* text-transform: uppercase; */ }
+
+@media (min-width: 480px) {
+  .btn {
+    letter-spacing: 2px;
+    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;
+}