comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved navigation

Browse source
This commit is contained in:
vjrj 2017-11-15 16:54:14 +01:00
parent 60fcd48140
commit 6a6015ae4d
3 changed files with 79 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

41
imports/ui/components/Navigation/Navigation.js
View file

@ -9,17 +9,36 @@ import { translate } from 'react-i18next';
import './Navigation.scss';
const Navigation = props => (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">{props.t('AppName')}</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
</Navbar.Collapse>
</Navbar>
<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>
);
Navigation.defaultProps = {

93
imports/ui/pages/Index/Index.js
View file

@ -1,16 +1,58 @@
import React from 'react';
import React, {Component} from 'react';
import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next';
import {render} from 'react-dom';
// https://www.npmjs.com/package/react-resize-detector
import ReactResizeDetector from 'react-resize-detector';
import './Index.scss';
import './Index-custom.scss';
const Index = (props) => {
const { t } = props;
return (
class Index extends Component {
// Debounce by David Walsch
// https://davidwalsh.name/javascript-debounce-function
debounce = (func, wait, immediate) => {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
scaleHeader = () => {
var scalable = document.getElementById('tcefh1');
var margin = 10;
var scalableContainer = scalable.parentNode;
scalable.style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable.offsetWidth;
scalable.style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable.getBoundingClientRect().height + 'px';
};
myScaleFunction = this.debounce(() => {
this.scaleHeader();
}, 250);
_onResize = () => {
this.myScaleFunction();
};
render() {
return (
<div className="IndexDisabled">
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
<header>
<ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
@ -66,7 +108,7 @@ const Index = (props) => {
<section className="py-5">
<div className="container">
<div className="scale__container--js">
<h1 className="scale--js">{props.t('AppName')}</h1>
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
</div>
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
<button type="button" className="btn btn-raised btn-lg btn-warning">PARTICIPA</button>
@ -74,46 +116,7 @@ const Index = (props) => {
</section>
</div>
);
};
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
};
}
// Debounce by David Walsch
// https://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var myScaleFunction = debounce(function() {
scaleHeader();
}, 250);
myScaleFunction();
window.addEventListener('resize', myScaleFunction);
export default translate([], { wait: true })(Index);