Added bootstrap package

This commit is contained in:
vjrj 2017-11-23 19:02:54 +01:00
parent 2b3c9a5868
commit d7664cbf84
10 changed files with 62 additions and 61 deletions

View file

@ -7,20 +7,17 @@ import { Meteor } from 'meteor/meteor';
const AuthenticatedNavigation = ({ name, history }) => (
<div>
{/*
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Nav.js
<Nav>
<LinkContainer to="/documents">
<NavItem eventKey={1} href="/documents">Documents</NavItem>
<NavItem href="/documents">Documents</NavItem>
</LinkContainer>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={2} title={name} id="user-nav-dropdown">
<LinkContainer to="/profile">
<NavItem eventKey={2.1} href="/profile">Profile</NavItem>
</LinkContainer>
<MenuItem divider />
<MenuItem eventKey={2.2} onClick={() => history.push('/logout')}>Logout</MenuItem>
</NavDropdown>
</Nav>
</Nav> */}
<div title={name} className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="/profile">Profile</a>
<a className="dropdown-item" onClick={() => history.push('/logout')} >Logout</a>
</div>
</div>
);

View file

@ -16,7 +16,7 @@ const Footer = (props) => {
return (
<div className="Footer">
<Grid>
<p className="pull-left">&copy; Copyleft {copyrightYear()} {t('OrgNameFull')}</p>
<p className="pull-left">&copy; Copyleft {copyrightYear()} <a href="https://comunes.org/">{t('OrgNameFull')}</a></p>
<ul className="pull-right">
<li><Link to="/terms"> {t('Términos')}<span className="hidden-xs"> {t('de Servicio')}</span></Link></li>
<li><Link to="/privacy">{t('Política')}<span className="hidden-xs"> {t('de Privacidad')}</span></Link></li>

View file

@ -31,7 +31,7 @@ body {
ul li {
float: left;
&:first-child {
&:first-child, &:nth-child(2) {
margin-right: 15px;
}
@ -49,7 +49,7 @@ body {
}
@include breakpoint(tablet) {
.Footer ul li:first-child {
.Footer ul li:first-child, .Footer ul li:nth-child(2) {
margin-right: 30px;
}
}

View file

@ -9,34 +9,24 @@ import { translate } from 'react-i18next';
import './Navigation.scss';
const Navigation = props => (
<ul className="nav justify-content-end">
<li className="nav-item">
<a className="nav-link active" href="/#">{props.t('Inicio')}</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">{props.t('Mapa actual')}</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">{props.t('Contacto')}</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">{props.t('Contacto')}</a>
</li>
<li className="nav-item">
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
</li>
<li className="nav-item dropdown">
<a className="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{props.t('Más')}
<div className="ripple-container"></div>
</a>
<div className="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a className="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
<a className="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
</div>
</li>
</ul>
<ul className="nav justify-content-end">
<li className="nav-item">
<a className="nav-link active" href="/#">{props.t('Inicio')}</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">{props.t('Mapa actual')}</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">{props.t('Contacto')}</a>
</li>
<li className="nav-item dropdown">
<a className="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{props.t('Más')}
<div className="ripple-container"></div>
</a>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
</li>
</ul>
);

View file

@ -3,14 +3,10 @@ import { LinkContainer } from 'react-router-bootstrap';
import { Nav, NavItem } from 'react-bootstrap';
const PublicNavigation = () => (
<Nav pullRight>
<LinkContainer to="/signup">
<NavItem eventKey={1} href="/signup">Sign Up</NavItem>
</LinkContainer>
<LinkContainer to="/login">
<NavItem eventKey={2} href="/login">Log In</NavItem>
</LinkContainer>
</Nav>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="/signup">Sign Up</a>
<a className="dropdown-item" href="/login">Log In</a>
</div>
);
export default PublicNavigation;

View file

@ -118,3 +118,17 @@
.carousel-item-4 {
background-image: url('/home-slide4.jpg')
}
.full-width {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50% - 8px);
position: relative;
/*
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;*/
}

View file

@ -49,7 +49,7 @@ class Index extends Component {
render() {
return (
<div className="IndexDisabled">
<div className="IndexDisabled full-width">
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
<header>
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />

View file

@ -0,0 +1,3 @@
a, a:hover {
color: $todos-font2;
}