Pages (terms/tos/privacy), comments improvements, etc

This commit is contained in:
vjrj 2018-01-21 20:53:21 +01:00
parent cd16f45d8e
commit 952431d296
34 changed files with 435 additions and 97 deletions

View file

@ -1,12 +1,16 @@
/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React from 'react';
import Page from '../Page/Page';
import { translate } from 'react-i18next';
import Page from '../Page/Page';
const Credits = props => (
<div className="Credits">
<Page
title={props.t("Créditos")}
subtitle={props.t("Sobre los datos y imágenes usados")}
title={props.t('Créditos')}
subtitle={props.t('Sobre los datos y imágenes usados')}
page="credits"
/>
</div>

View file

@ -8,12 +8,12 @@ import { withTracker } from 'meteor/react-meteor-data';
import { translate } from 'react-i18next';
import { Meteor } from 'meteor/meteor';
import { Map, Circle } from 'react-leaflet';
import moment from 'moment-timezone';
import Blaze from 'meteor/gadicc:blaze-react-component';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import NotFound from '/imports/ui/pages/NotFound/NotFound';
import FiresCollection from '/imports/api/Fires/Fires';
import { dateLongFormat, dateFromNow } from '/imports/api/Common/dates';
import '/imports/startup/client/comments';
import './Fires.scss';
class Fire extends React.Component {
@ -27,16 +27,17 @@ class Fire extends React.Component {
render() {
const { loading, fire, t } = this.props;
if (fire && fire.when) {
this.when = moment.tz(fire.when, moment.tz.guess());
this.dateLongFormat = dateLongFormat(fire.when);
this.dateFromNow = dateFromNow(fire.when);
}
return (
<div className="ViewFire">
return (fire ?
(<div className="ViewFire">
{!loading &&
<Fragment>
<h4 className="page-header">
{fire.address ?
t('Información adicional sobre fuego detectado en {{where}} el {{when}}', { where: fire.address, when: this.when.format('LLLL (z)') }) :
t('Información adicional sobre fuego detectado el {{when}}', { when: this.when.format('LLLL (z)') })}
t('Información adicional sobre fuego detectado en {{where}} el {{when}}', { where: fire.address, when: this.dateLongFormat }) :
t('Información adicional sobre fuego detectado el {{when}}', { when: this.dateLongFormat })}
</h4>
<Map
@ -62,10 +63,10 @@ class Fire extends React.Component {
</Map>
<p>{t('Coordenadas:')} {fire.lat}, {fire.lon}</p>
{(fire.type === 'modis' || fire.type === 'viirs') &&
<p>{t('Fuego detectado por satélites de la NASA {{when}}', { when: this.when.fromNow() })}</p>
<p>{t('Fuego detectado por satélites de la NASA {{when}}', { when: this.dateFromNow })}</p>
}
{(fire.type === 'vecinal') &&
<p>{t('Fuego notificado por uno de nuestros usuarios/as {{when}}', { when: this.when.fromNow() })}</p>
<p>{t('Fuego notificado por uno de nuestros usuarios/as {{when}}', { when: this.dateFromNow })}</p>
}
{/* TODO: marcar tipo de fuego, industria, etc */}
<h4>{t('Comentarios')}</h4>
@ -85,8 +86,8 @@ class Fire extends React.Component {
</div>
</Fragment>
}
</div>
);
</div>
) : <NotFound />);
}
}

View file

@ -9,7 +9,7 @@
width: 100%;
/* min-width: 75vw; */
display: flex;
margin: 20px auto;
margin: 10px auto;
}
@include breakpoint(mobile) {

View file

@ -166,6 +166,7 @@
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-top: -21px;
position: relative;
/*
width: 100vw;
@ -212,4 +213,8 @@
.device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
background-image: url(/mobile.png);
}
.full-width .page-header { // section titles
margin-top: 20px;
}

View file

@ -208,7 +208,7 @@ class Index extends Component {
</div>
<div className="col-lg-6">
<div className="feature-item">
<i className="icon-envelope-open text-primary" />
<i className="icon-speech text-primary" />
<h3><Trans>Notificaciones</Trans></h3>
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo o en tu navegador</Trans></p>
</div>

View file

@ -1,12 +1,17 @@
/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React from 'react';
import Page from '../Page/Page';
import { translate } from 'react-i18next';
import { dateParseShortFormat } from '/imports/api/Common/dates';
import Page from '../Page/Page';
const License = props => (
<div className="License">
<Page
title={props.t("Licencia")}
subtitle={props.t("Última actualización 15 de noviembre de 2017")}
title={props.t('Licencia')}
subtitle={props.t('Última actualización, {{when}}', { when: dateParseShortFormat('2017-01-19') })}
page="license"
/>
</div>

View file

@ -1,12 +1,15 @@
import React from 'react';
import { Alert } from 'react-bootstrap';
import { translate, Trans } from 'react-i18next';
const NotFound = () => (
<div className="NotFound">
<Alert bsStyle="danger">
<p><strong>Error [404]</strong>: {window.location.pathname} does not exist.</p>
<p>
<Trans i18nKey="not-found">Upppps: Esta página no existe</Trans>
</p>
</Alert>
</div>
);
export default NotFound;
export default translate([], { wait: true })(NotFound);

View file

@ -5,6 +5,7 @@ import { createContainer } from 'meteor/react-meteor-data';
import { ReactiveVar } from 'meteor/reactive-var';
import PageHeader from '../../components/PageHeader/PageHeader';
import Content from '../../components/Content/Content';
import i18n from '/imports/startup/client/i18n';
import './Page.scss';
@ -16,13 +17,13 @@ const Page = ({ title, subtitle, content }) => (
);
Page.defaultProps = {
subtitle: '',
subtitle: ''
};
Page.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
content: PropTypes.string.isRequired,
content: PropTypes.string.isRequired
};
const pageContent = new ReactiveVar('');
@ -30,7 +31,7 @@ const pageContent = new ReactiveVar('');
export default createContainer(({ content, page }) => {
window.scrollTo(0, 0); // Force window to top of page.
Meteor.call('utility.getPage', page, (error, response) => {
Meteor.call('utility.getPage', page, i18n.language, (error, response) => {
if (error) {
console.warn(error);
} else {
@ -39,6 +40,6 @@ export default createContainer(({ content, page }) => {
});
return {
content: content || pageContent.get(),
content: content || pageContent.get()
};
}, Page);

View file

@ -1,12 +1,17 @@
/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React from 'react';
import Page from '../Page/Page';
import { translate } from 'react-i18next';
import { dateParseShortFormat } from '/imports/api/Common/dates';
import Page from '../Page/Page';
const Privacy = props => (
<div className="Privacy">
<Page
title={props.t("Política de Privacidad")}
subtitle={props.t("Última actualización 15 de noviembre de 2017")}
title={props.t('Política de Privacidad')}
subtitle={props.t('Última actualización, {{when}}', { when: dateParseShortFormat('2017-01-19') })}
page="privacy"
/>
</div>

View file

@ -1,12 +1,17 @@
/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React from 'react';
import Page from '../Page/Page';
import { translate } from 'react-i18next';
import { dateParseShortFormat } from '/imports/api/Common/dates';
import Page from '../Page/Page';
const Terms = props => (
<div className="Terms">
<Page
title={props.t("Términos de Servicio")}
subtitle={props.t("Última actualización 15 de noviembre de 2017")}
title={props.t('Términos de Servicio')}
subtitle={props.t('Última actualización, {{when}}', { when: dateParseShortFormat('2017-01-19') })}
page="terms"
/>
</div>