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

Basic tcef home

Browse source
This commit is contained in:
vjrj 2017-11-14 08:41:42 +01:00
parent 460d0a0b5e
commit 60fcd48140
6 changed files with 230 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,22 +3,117 @@ import { Button } from 'react-bootstrap';
import { translate } from 'react-i18next';
import './Index.scss';
import './Index-custom.scss';
const Index = (props) => {
const { t } = props;
return (
<div className="Index">
<h1>{props.t('AppName')}</h1>
<p>A boilerplate for products.</p>
<div>
<Button href="http://cleverbeagle.com/pup">Read the Docs</Button>
<Button href="https://github.com/cleverbeagle/pup"><i className="fa fa-star" /> Star on GitHub</Button>
<div className="IndexDisabled">
{/* https://v4-alpha.getbootstrap.com/components/carousel/ */}
<header>
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div className="carousel-inner" role="listbox">
<div className="carousel-item carousel-item-1 active">
<div className="slide-1-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-map-pointer" aria-hidden="true"></i>Elige un lugar</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-2">
<div className="slide-2-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-dot-circle-o" aria-hidden="true"></i>Elige un radio de vigilancia</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-3">
<div className="slide-3-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-podcast" aria-hidden="true"></i>Recibe alertas de fuegos en esa zona</h3>
<p></p>
</div>
</div>
<div className="carousel-item carousel-item-4">
<div className="slide-4-icon"></div>
<div className="carousel-caption">
<h3><i className="fa fa-bell-o" aria-hidden="true"></i>Alerta cuando hay un fuego</h3>
<p></p>
</div>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
</header>
<section className="py-5">
<div className="container">
<div className="scale__container--js">
<h1 className="scale--js">{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>
</div>
</section>
</div>
<footer>
<p>Need help and want to stay accountable building your product? <a href="http://cleverbeagle.com?utm_source=pupappindex&utm_campaign=oss">Check out Clever Beagle</a>.</p>
</footer>
</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);