Afinaciones

This commit is contained in:
2020-04-10 14:39:18 -04:00
parent 692c001cd5
commit a1311ee250
14 changed files with 150 additions and 79 deletions

View File

@ -61,7 +61,8 @@ return [
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/icons.woff2',
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff',
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff2',
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap'
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap',
'https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap'
]
]
]

View File

@ -20,7 +20,7 @@ class Home {
];
$clientes = [];
for ($i = 0; $i < 20; $i ++) {
$clientes[$i] = '<div class="ui fluid placeholder"><div class="rectangular image"></div>' . $i . '</div>';
$clientes[$i] = '<div class="ui fluid placeholder"><div class="circular image"></div>' . $i . '</div>';
}
$testimonios = $this->loadData($container, 'testimonios');
@ -29,13 +29,11 @@ class Home {
if (!isset($evento->image)) {
$evento->image = '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>';
}
if (!isset($evento->servicio)) {
$evento->servicio = mt_rand(0, count($servicios) - 1);
}
}
/*$eventos = [
(object) [
'titulo' => '2da Corrida Famliar Inclusiva DIMERC',
'image' => '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>'
]
];*/
return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
}

View File

@ -1,9 +0,0 @@
#page_logo {
font-family: Raleway, sans-serif;
font-weight: 800;
font-size: 2.2rem;
color: #404041;
}
#page_logo .orange {
color: #F26721;
}

View File

@ -41,9 +41,9 @@
#clientes .header:first-child {
padding-bottom: 1rem;
}
#clientes .ci {
display: flex;
align-items: center
#clientes #img_clientes .row {
padding-top: 0;
padding-bottom: 0;
}
#testimonios {

View File

@ -2,6 +2,16 @@ body, .ui {
font-family: Roboto, sans-serif !important;
}
#page_logo {
font-family: Raleway, sans-serif;
font-weight: 800;
font-size: 2.2rem;
color: #404041;
}
#page_logo .orange {
color: #F26721;
}
footer {
flex: none;
color: white;
@ -9,7 +19,7 @@ footer {
font-family: Roboto;
}
footer .dark-grey {
background-color: grey;
background-color: #404041;
}
footer .grid {
margin: 0 !important;

View File

@ -3,29 +3,33 @@
CLIENTES
</div>
<div class="ui grid">
<div class="column ci">
<i class="left chevron big icon" id="left_arrow"></i>
</div>
<div class="fourteen wide column">
<div class="ui center aligned stackable grid" id="img_clientes">
<div class="row">
@for ($i = 0; $i < min(10, count($clientes)); $i += 2)
<div class="three wide column">
{!!$clientes[$i]!!}
</div>
@endfor
</div>
<div class="row">
@for ($i = 1; $i < min(10, count($clientes)); $i += 2)
<div class="three wide column">
{!!$clientes[$i]!!}
</div>
@endfor
</div>
<div class="two column row">
<div class="left alined column ci">
<i class="left chevron big icon" id="left_arrow"></i>
</div>
<div class="right aligned column ci">
<i class="right chevron big icon" id="right_arrow"></i>
</div>
</div>
<div class="column ci">
<i class="right chevron big icon" id="right_arrow"></i>
<div class="one column row">
<div class="column">
<div class="ui center aligned grid" id="img_clientes">
<div class="row">
@for ($i = 0; $i < min(12, count($clientes)); $i += 2)
<div class="five wide tablet two wide computer column">
{!!$clientes[$i]!!}
</div>
@endfor
</div>
<div class="row">
@for ($i = 1; $i < min(12, count($clientes)); $i += 2)
<div class="five wide tablet two wide computer column">
{!!$clientes[$i]!!}
</div>
@endfor
</div>
</div>
</div>
</div>
</div>
</div>
@ -38,34 +42,36 @@
@endforeach
]
var current = 0
var rows = 2
var cols = 6
function decreaseClientes() {
$('#img_clientes').find('.row').find('.column:last-child').remove()
current -= 2
if (current < -8) {
current = clientes.length - 10
current -= rows
if (current < - cols * rows) {
current = clientes.length - (cols - 1) * rows
}
n = current
if (n < 0) {
n = clientes.length + n
}
$('#img_clientes').find('.row:first-child').prepend(
$('<div></div>').attr('class', 'three wide column').append(clientes[n])
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
)
$('#img_clientes').find('.row:last-child').prepend(
$('<div></div>').attr('class', 'three wide column').append(clientes[n + 1])
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
)
}
function increaseClientes() {
$('#img_clientes').find('.row').find('.column:first-child').remove()
current += 2
if (current > clientes.length - 10) {
current = -8
if (current > clientes.length - cols * rows) {
current = - (cols - 1) * rows
}
$('#img_clientes').find('.row:first-child').append(
$('<div></div>').attr('class', 'three wide column').append(clientes[current + 8])
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
)
$('#img_clientes').find('.row:last-child').append(
$('<div></div>').attr('class', 'three wide column').append(clientes[current + 9])
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
)
}
$(document).ready(function() {

View File

@ -8,7 +8,7 @@
</div>
<div class="ui stackable two columns grid">
<div class="column">
<form class="ui form" id="formulario" method="post" action="{{$urls->base}}/contacto">
<form class="ui form" id="formulario_contacto" method="post" action="{{$urls->base}}/contacto">
<div class="field">
<input type="text" name="nombre" placeholder="Nombre" />
</div>
@ -35,7 +35,7 @@
@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#formulario').submit(function(e) {
$('#formulario_contacto').submit(function(e) {
e.preventDefault()
var nombre = $(this).find("[name='nombre']").val()

View File

@ -5,17 +5,17 @@
</div>
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui tabular compact menu">
<a class="active item" data-filter="none">Todos</a>
<div class="ui tabular stackable compact menu">
<a class="active item servicio" data-filter="none">Todos</a>
@foreach ($servicios as $i => $servicio)
<a class="item" data-filter="{{$i}}">{{$servicio->titulo}}</a>
<a class="item servicio" data-filter="{{$i}}">{{$servicio->titulo}}</a>
@endforeach
</div>
</div>
</div>
<div class="ui stackable center aligned grid">
<div class="ui center aligned grid" id="eventos_cards">
@foreach ($eventos as $evento)
<div class="four wide column">
<div class="eight wide tablet four wide computer column">
<div class="ui basic segment">
{!!$evento->image!!}
<div class="ui center aligned header">
@ -29,3 +29,53 @@
</div>
</div>
</div>
@push('scripts')
<script type="text/javascript">
var eventos = [
@foreach ($eventos as $evento)
{
titulo: '{{$evento->titulo}}',
image: '{!!$evento->image!!}',
empresa: '{{$evento->empresa}}',
servicio: {{$evento->servicio}}
},
@endforeach
];
function changeEventos(filter) {
var grid = $('#eventos_cards')
grid.html('')
$.each(eventos, function(i, el) {
if (filter != 'none' && el.servicio != filter) {
return
}
grid.append(
$('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
$('<div></div>').attr('class', 'ui basic segment').append(el.image).append(
$('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
$('<br />')
).append(el.empresa)
)
)
)
})
}
var current_tab = 'none'
function changeTab(filter) {
$('.servicio.active').removeClass('active')
$(".servicio[data-filter='" + filter + "']").addClass('active')
current_tab = filter
}
$(document).ready(function() {
$('.servicio').click(function(e) {
e.preventDefault()
var filter = $(this).attr('data-filter')
if (filter == current_tab) {
return
}
changeTab(filter)
changeEventos(filter)
})
})
</script>
@endpush

View File

@ -32,9 +32,9 @@
},
@endforeach
]
var current = 0
var current_testimonio = 0
function cambiar(id) {
if (id == current) {
if (id == current_testimonio) {
return
}
$('#testimonio').html('').append(
@ -42,15 +42,18 @@
).append(
$('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
)
$('#marcador').find(".icon[data-id='" + current + "']").addClass('outline')
$('#marcador').find(".icon[data-id='" + current_testimonio + "']").addClass('outline')
$('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
current = id
$('#marcador').find('.icon.outline').css('cursor', 'pointer')
$('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
current_testimonio = id
}
$(document).ready(function() {
$('#marcador').find('.icon').css('cursor', 'pointer').click(function() {
$('#marcador').find('.icon').click(function() {
var id = $(this).attr('data-id')
cambiar(id)
})
$('#marcador').find('.icon.outline').css('cursor', 'pointer')
})
</script>
@endpush

View File

@ -3,13 +3,13 @@
<div class="ui inverted container main">
<div class="ui stackable grid">
<div class="three columns row">
<div class="column">
<div class="middle aligned column">
@include('layout.footer.contacto')
</div>
<div class="column">
<div class="middle aligned column">
@include('layout.footer.ubicacion')
</div>
<div class="column">
<div class="middle aligned column">
@include('layout.footer.redes')
</div>
</div>

View File

@ -1,5 +1,5 @@
<div style="text-align: center;">
<a href="{{$urls->base}}/contacto">
<a href="{{$urls->base}}#contacto">
<i class="big icon icon-contacto"></i>
<p>
<strong>

View File

@ -0,0 +1,17 @@
<div class="ui stackable five columns center aligned grid">
<div class="column">
<i class="youtube big icon"></i>
</div>
<div class="column">
<i class="instagram big icon"></i>
</div>
<div class="column">
<i class="facebook big icon"></i>
</div>
<div class="column">
<i class="linkedin big icon"></i>
</div>
<div class="column">
<i class="twitter big icon"></i>
</div>
</div>

View File

@ -1,5 +1,5 @@
<div style="text-align: center;">
<a href="{{$urls->base}}/contacto">
<a href="{{$urls->base}}#contacto">
<i class="big icon icon-ubicacion"></i>
<p>
<strong>
@ -7,7 +7,7 @@
</strong>
</p>
</a>
<a href="{{$urls->base}}/contacto">
<a href="{{$urls->base}}#contacto">
<p>
Av. Nueva Providencia 1945, Of. 919,
<br />

View File

@ -1,21 +1,16 @@
<nav class="ui massive stackable center aligned text fluid three item grey menu">
<nav class="three item stackable menu">
<nav class="ui massive stackable center aligned text three item grey menu">
<div class="left three item menu">
<a class="item" href="{{$urls->base}}#servicios">Servicios</a>
<a class="item" href="{{$urls->base}}#nosotros">Nosotros</a>
<a class="item" href="{{$urls->base}}#clientes">Clientes</a>
</nav>
</div>
<a class="item" href="{{$urls->base}}">
<div class="ui header" id="page_logo">
Total<span class="orange">Sport</span>
</div>
</a>
<nav class="two item stackable menu">
<div class="right two item menu">
<a class="item" href="{{$urls->base}}#eventos">Eventos</a>
<a class="item" href="{{$urls->base}}#contacto">Contacto</a>
</nav>
</div>
</nav>
@push('styles')
<link rel="stylesheet" type="text/css" href="{{$urls->styles}}/header.css" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" />
@endpush