Contacto en inicio

This commit is contained in:
2020-05-12 19:12:54 -04:00
parent 9084ea5edb
commit 1ed3788e87
12 changed files with 239 additions and 40 deletions

View File

@ -124,11 +124,38 @@
#indicadores {
background-color: #bbbdc0;
padding-top: 1rem;
padding-bottom: 1rem;
min-height: 5rem;
.column {
background-color: white;
padding: 0;
margin: 1rem;
width: 8rem !important;
.slideshow {
overflow: hidden;
height: 6rem;
.slide {
display: inline-block;
float: left;
background-color: white;
padding: 0;
margin: 1rem;
width: 8rem !important;
padding-top: .5rem;
padding-bottom: .5rem;
text-align: center;
}
}
}
#contacto {
padding-top: 3rem;
padding-bottom: 3rem;
.header {
color: #0d103c !important;
font-weight: 900;
}
.form .button {
background-color: #429ab7;
color: white;
}
}

View File

@ -59,6 +59,7 @@ a {
footer {
background-color: #429ab7;
color: white;
margin: 0;
.menu {
margin: 0 !important;

View File

@ -0,0 +1,67 @@
<div id="contacto">
<div class="ui container">
<div class="ui header">
CONTACTO
</div>
<div class="ui two columns stackable grid">
<div class="column">
<form id="contacto_form" method="post" class="ui form">
<div class="ui grid">
<div class="eight wide column">
<div class="input">
<input type="text" name="nombre" placeholder="Nombre" />
</div>
</div>
<div class="eight wide column">
<div class="input">
<input type="text" name="mail" placeholder="Mail" />
</div>
</div>
<div class="sixteen wide column">
<div class="input">
<textarea name="mensaje" rows="2" placeholder="Mensaje"></textarea>
</div>
</div>
<div class="four wide column">
<button class="ui button">
Enviar
</button>
</div>
</div>
</form>
</div>
<div class="column">
<div class="ui center aligned grid">
<div class="eight wide column left aligned">
<p>
Av. Calle 123, Comuna, RM
<br />
<a href="mailto:contacto@capitalinvestments.cl">
contacto@capitalinvestments.cl
</a>
<br />
<a href="tel:56222222222">+56 2 2222 2222</a>
</p>
<p>
<a href="youtube">
<i class="youtube icon"></i>
</a>
<a href="instagram">
<i class="instagram icon"></i>
</a>
<a href="facebook">
<i class="facebook f icon"></i>
</a>
<a href="linkedin">
<i class="linkedin icon"></i>
</a>
<a href="twitter">
<i class="twitter icon"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,12 +1,66 @@
<div id="indicadores">
<div class="ui container">
<div class="ui grid">
<div class="slideshow ui center aligned grid">
</div>
</div>
</div>
@push('scripts')
<script type="text/javascript">
var slideshow = {
slides: [],
id: '.slideshow',
slide_id: '.slide',
current: 0,
speed: 1,
delay: 10,
move: () => {
var ini = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('left'))
if (isNaN(ini)) {
ini = 0
}
console.debug(ini)
$(slideshow.id).find(slideshow.slide_id + ':first-child').css('left', ini - slideshow.speed)
var w = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('width'))
var p0 = 0
var p = parseInt($(slideshow.id).find(slideshow.slide_id + ':first-child').css('left'))
if (p + w < p0) {
slideshow.addNext()
}
setTimeout(slideshow.move, slideshow.delay)
},
addNext: () => {
var data = [
$(slideshow.id).find(slideshow.slide_id + ':first-child').attr('class'),
$(slideshow.id).find(slideshow.slide_id + ':first-child').html()
]
var c = slideshow.current + 1
if (c >= slideshow.slides.length) {
c = 0
}
$(slideshow.id).find(slideshow.slide_id + ':first-child').remove()
slideshow.slides.shift()
var div = $('<div></div>').attr('class', data[0]).attr('data-title', data[1]).attr('data-content', data[2]).html(
data[3]
)
$(slideshow.id).append(
div
)
div.popup(9)
slideshow.slides.push(div)
slideshow.current = c
},
setup: () => {
$(slideshow.id).parent().css('overflow', 'hidden')
$(slideshow.id).find(slideshow.slide_id).each((i, el) => {
slideshow.slides.push($(el).html())
})
var w = $(slideshow.id).find(slideshow.slide_id + ':first-child').css('width')
var div = $('<div></div>').attr('class', 'slide').html(slideshow.slides[0])
$(slideshow.id).append(div)
setTimeout(slideshow.move, slideshow.delay)
}
}
var indicadores = {
indicadores: [
@foreach ($indicadores as $indicador => $titulo)
@ -23,36 +77,25 @@
return $.ajax({
url: '{{$urls->base}}/indicador/' + indicador.sim,
success: (data) => {
var div = $('<div></div>').attr('class', 'two wide center aligned column').append(
$('<div></div>').attr('class', 'ui header').append(indicador.titulo).append(
$('<div></div>').attr('class', 'sub header').html(data.valor)
var div = $('<div></div>').attr('class', 'two wide column slide').append(
$('<div></div>').attr('class', 'ui header').attr('data-title', 'Fecha').attr('data-content', data.valor.fecha).append(indicador.titulo).append(
$('<div></div>').attr('class', 'sub header').html(data.valor.valor)
)
)
$(indicadores.id).find('.grid').append(
div
)
div.find('.header').popup(9)
$(indicadores.id).find('.slideshow').append(div)
}
})
},
findNext: () => {
console.log('Next call')
next = indicadores.current + 1
if (next > indicadores.indicadores.length) {
next = 0
}
indicadores.findIndicador(next).done(() => {
$(indicadores.id).find('.grid').find('.column:first-child').remove()
indicadores.current = next
setTimeout(indicadores.findNext(), 30000)
})
},
setup: () => {
var promises = []
promise = null
$.each(indicadores.indicadores, (i, el) => {
promises.push(indicadores.findIndicador(i))
promise = indicadores.findIndicador(i)
promises.push(promise)
})
Promise.all(promises).then(() => {
setTimeout(indicadores.findNext(), 30000)
//slideshow.setup()
})
}
}