From 3ef6f3c80b24b96a37c7fd7946ae908f71c175df Mon Sep 17 00:00:00 2001 From: vjrj Date: Mon, 27 Nov 2017 17:37:06 +0100 Subject: [PATCH] =?UTF-8?q?Basic=20navs=20and=20auth=20pages=20working?= =?UTF-8?q?=C2=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/main.html | 1 - imports/startup/client/i18n.js | 1 + .../AuthenticatedNavigation.js | 7 +- imports/ui/components/Col/Col.js | 111 ++++++++++++++++++ imports/ui/components/Footer/Footer.js | 23 ++-- imports/ui/components/Footer/Footer.scss | 19 +++ .../ui/components/Navigation/Navigation.js | 8 +- .../ui/components/Navigation/Navigation.scss | 22 ++++ .../OAuthLoginButton/OAuthLoginButton.js | 2 +- .../PublicNavigation/PublicNavigation.js | 9 +- imports/ui/layouts/App/App.js | 4 +- imports/ui/pages/Index/Index-custom.scss | 4 + imports/ui/pages/Index/Index.js | 3 +- imports/ui/pages/Login/Login.js | 4 +- imports/ui/pages/Profile/Profile.js | 3 +- .../pages/RecoverPassword/RecoverPassword.js | 3 +- .../ui/pages/ResetPassword/ResetPassword.js | 3 +- imports/ui/pages/Signup/Signup.js | 3 +- public/locales/en/common.json | 16 +++ public/locales/es/common.json | 9 +- 20 files changed, 222 insertions(+), 33 deletions(-) create mode 100644 imports/ui/components/Col/Col.js create mode 100644 public/locales/en/common.json diff --git a/client/main.html b/client/main.html index f81a4b7..df9e122 100644 --- a/client/main.html +++ b/client/main.html @@ -1,6 +1,5 @@ - Pup diff --git a/imports/startup/client/i18n.js b/imports/startup/client/i18n.js index e3cf5a3..e5be7ac 100644 --- a/imports/startup/client/i18n.js +++ b/imports/startup/client/i18n.js @@ -80,6 +80,7 @@ i18n.use(backend) }, function(err, t) { // initialized and ready to // console.log(t('AppName')); + document.title = t("AppName"); }); export default i18n; diff --git a/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js index 1f024e5..55f073d 100644 --- a/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js +++ b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; import { LinkContainer } from 'react-router-bootstrap'; import { Nav, NavDropdown } from 'react-bootstrap'; +import { translate, Trans } from 'react-i18next'; /* FIXME: navitem needs a nav-link class but does not works @@ -14,7 +15,7 @@ import NavItem from '../NavItem/NavItem'; import { Meteor } from 'meteor/meteor'; -const AuthenticatedNavigation = ({ name, history }) => ( +const AuthenticatedNavigation = ({ name, history, props }) => ( ); @@ -32,4 +33,4 @@ AuthenticatedNavigation.propTypes = { name: PropTypes.string.isRequired, }; -export default withRouter(AuthenticatedNavigation); +export default translate([], { wait: true })(withRouter(AuthenticatedNavigation)); diff --git a/imports/ui/components/Col/Col.js b/imports/ui/components/Col/Col.js new file mode 100644 index 0000000..2a20586 --- /dev/null +++ b/imports/ui/components/Col/Col.js @@ -0,0 +1,111 @@ +import classNames from 'classnames'; +import React from 'react'; +import PropTypes from 'prop-types'; +import elementType from 'prop-types-extra/lib/elementType'; + +import { bsClass, prefix, splitBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils'; +import { DEVICE_SIZES } from 'react-bootstrap/lib/utils/StyleConfig'; + +const column = PropTypes.oneOfType([ + PropTypes.oneOf(['auto']), + PropTypes.number, +]); + +const propTypes = { + componentClass: elementType, + + /** + * The number of columns you wish to span + * + * for Extra small devices Phones (<576px) + * + * class-prefix `col-` + */ + xs: column, + + /** + * The number of columns you wish to span + * + * for Small devices Tablets (≥576px) + * + * class-prefix `col-sm-` + */ + sm: column, + + /** + * The number of columns you wish to span + * + * for Medium devices Desktops (≥768px) + * + * class-prefix `col-md-` + */ + md: column, + + /** + * The number of columns you wish to span + * + * for Large devices Desktops (≥992px) + * + * class-prefix `col-lg-` + */ + lg: column, + + /** + * The number of columns you wish to span + * + * for Large devices Desktops (≥1200px) + * + * class-prefix `col-xl-` + */ + xl: column, +}; + +const defaultProps = { + componentClass: 'div', +}; + +class Col extends React.Component { + render() { + const { componentClass: Component, className, ...props } = this.props; + const [bsProps, elementProps] = splitBsProps(props); + + const classes = []; + + DEVICE_SIZES.forEach((size) => { + const propValue = elementProps[size]; + + if (propValue == null) return; + + if (size === 'xs') { + // col and col-4 + classes.push(propValue === true ? + bsProps.bsClass : + prefix(bsProps, `${propValue}`), + ); + } else { + // col-md-3 + classes.push( + prefix(bsProps, `${size}-${propValue}`), + ); + } + + delete elementProps[size]; + }); + + if (!classes.length) { + classes.push(bsProps.bsClass); // plain 'col' + } + + return ( + + ); + } +} + +Col.propTypes = propTypes; +Col.defaultProps = defaultProps; + +export default bsClass('col', Col); diff --git a/imports/ui/components/Footer/Footer.js b/imports/ui/components/Footer/Footer.js index 95d1f63..08d11db 100644 --- a/imports/ui/components/Footer/Footer.js +++ b/imports/ui/components/Footer/Footer.js @@ -14,19 +14,20 @@ const copyrightYear = () => { const Footer = (props) => { const { t } = props; return ( -
- -

© Copyleft {copyrightYear()} {t('OrgNameFull')}

-
    -
  • {t('Términos')} {t('de Servicio')}
    • -
  • {t('Política')} {t('de Privacidad')}
    • -
  • {t('Licencia')}
    • -
- -
+
+ +

© Copyleft {copyrightYear()} {t('OrgNameFull')}{t('OrgName')}

+ +
    +
  • {t('Términos')} {t('de Servicio')}
    • +
  • {t('Política de')} {t('Privacidad')}
    • +
  • {t('Licencia')}
    • +
+ +
); }; Footer.propTypes = {}; -export default translate([], { wait: true })(Footer); +export default translate([], { wait: true })(Footer) diff --git a/imports/ui/components/Footer/Footer.scss b/imports/ui/components/Footer/Footer.scss index e3cb7bb..2a459a7 100644 --- a/imports/ui/components/Footer/Footer.scss +++ b/imports/ui/components/Footer/Footer.scss @@ -21,6 +21,18 @@ body { p { color: $gray-light; + + a { + color: $gray-light; + } + + a:hover, + a:active, + a:focus { + text-decoration: none; + color: $gray; + } + } ul { @@ -53,3 +65,10 @@ body { margin-right: 30px; } } + +.reverse { + display:inline-block; + -moz-transform: rotate(-180deg); + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); +} diff --git a/imports/ui/components/Navigation/Navigation.js b/imports/ui/components/Navigation/Navigation.js index 9461bff..8a38052 100644 --- a/imports/ui/components/Navigation/Navigation.js +++ b/imports/ui/components/Navigation/Navigation.js @@ -9,12 +9,14 @@ import { translate } from 'react-i18next'; import './Navigation.scss'; const Navigation = props => ( - + {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */} + {window.location.pathname != '/'? {props.t('Inicio')} - + : '' + } {/* */}

: ''} - + + {props.userId && !props.emailVerified ?

Hey friend! Can you verify your email address ({props.emailAddress}) for us?

: ''} {/* bsClass="previously-container-but-disabled" > */} diff --git a/imports/ui/pages/Index/Index-custom.scss b/imports/ui/pages/Index/Index-custom.scss index cb663f1..20afd6b 100644 --- a/imports/ui/pages/Index/Index-custom.scss +++ b/imports/ui/pages/Index/Index-custom.scss @@ -132,3 +132,7 @@ margin-left: -50vw; margin-right: -50vw;*/ } + +.participe-btn { + background-color: #FD593A +} diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js index fa9761f..73f7a18 100644 --- a/imports/ui/pages/Index/Index.js +++ b/imports/ui/pages/Index/Index.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import { Button } from 'react-bootstrap'; import { translate } from 'react-i18next'; import {render} from 'react-dom'; +import { Link } from 'react-router-dom'; // https://www.npmjs.com/package/react-resize-detector import ReactResizeDetector from 'react-resize-detector'; @@ -111,7 +112,7 @@ class Index extends Component {

{this.props.t('AppName')}

Siempre alerta a los fuegos en nuestro vecindario

- + {this.props.t('PARTICIPA')} diff --git a/imports/ui/pages/Login/Login.js b/imports/ui/pages/Login/Login.js index e20db31..52ae22d 100644 --- a/imports/ui/pages/Login/Login.js +++ b/imports/ui/pages/Login/Login.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import Col from '../../components/Col/Col'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Meteor } from 'meteor/meteor'; @@ -8,6 +9,7 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter'; import validate from '../../../modules/validate'; + class Login extends React.Component { constructor(props) { super(props); diff --git a/imports/ui/pages/Profile/Profile.js b/imports/ui/pages/Profile/Profile.js index f8c5684..c2ddb32 100644 --- a/imports/ui/pages/Profile/Profile.js +++ b/imports/ui/pages/Profile/Profile.js @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import Col from '../../components/Col/Col'; import _ from 'lodash'; import { Meteor } from 'meteor/meteor'; import { Accounts } from 'meteor/accounts-base'; diff --git a/imports/ui/pages/RecoverPassword/RecoverPassword.js b/imports/ui/pages/RecoverPassword/RecoverPassword.js index b890442..8728a4b 100644 --- a/imports/ui/pages/RecoverPassword/RecoverPassword.js +++ b/imports/ui/pages/RecoverPassword/RecoverPassword.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import Col from '../../components/Col/Col'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Accounts } from 'meteor/accounts-base'; diff --git a/imports/ui/pages/ResetPassword/ResetPassword.js b/imports/ui/pages/ResetPassword/ResetPassword.js index c6b07e5..e44c75c 100644 --- a/imports/ui/pages/ResetPassword/ResetPassword.js +++ b/imports/ui/pages/ResetPassword/ResetPassword.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import Col from '../../components/Col/Col'; import { Accounts } from 'meteor/accounts-base'; import { Bert } from 'meteor/themeteorchef:bert'; import validate from '../../../modules/validate'; diff --git a/imports/ui/pages/Signup/Signup.js b/imports/ui/pages/Signup/Signup.js index 9b86db3..520030e 100644 --- a/imports/ui/pages/Signup/Signup.js +++ b/imports/ui/pages/Signup/Signup.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap'; +import Col from '../../components/Col/Col'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Meteor } from 'meteor/meteor'; diff --git a/public/locales/en/common.json b/public/locales/en/common.json new file mode 100644 index 0000000..1d78278 --- /dev/null +++ b/public/locales/en/common.json @@ -0,0 +1,16 @@ +{ + "AppName": "All Against Fire", + "AppNameFull": "All Against Fire!", + "OrgName": "Comunes", + "OrgNameFull": "Comunes Association", + "Privacidad": "Privacy", + "Términos": "Terms", + "de Servicio": "of Service", + "Política": "Privacy", + "de Privacidad": "Policy", + "Inicio": "Home", + "Licencia": "License", + "Cerrar sesión": "Logout", + "Registrarse": "Sign Up", + "Iniciar sesión": "Login" +} diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 710b8df..0495c7b 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -6,6 +6,11 @@ "Privacidad": "Privacidad", "Términos": "Términos", "de Servicio": "de Servicio", - "Política": "Política", - "de Privacidad": "de Privacidad" + "Política de": "Política de", + "Privacidad": "Privacidad", + "Inicio": "Inicio", + "Licencia": "Licencia", + "Cerrar sesión": "Cerrar sesión", + "Registrarse": "Registrarse", + "Iniciar sesión": "Iniciar sesión" }