Galeria funcionando

2021-07-18 23:57:03 -04:00
parent 0ae24f9644
commit d5602c810a
8 changed files with 103 additions and 39 deletions
--- a/bootstrap/web/config.php
+++ b/bootstrap/web/config.php
@ -64,8 +64,8 @@ return [
      ]))
    ],
    'scripts' => [
-      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js',
-      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.js'
+      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
+      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js'
    ],
    'fonts' => (object) [
      'text/css' => [
--- a/common/Controller/Web/Home.php
+++ b/common/Controller/Web/Home.php
@ -14,6 +14,7 @@ class Home {
      'title' => 'BUSCAMOS LA MEJOR EXPERIENCA',
      'contenido' => 'Eventos hechos a tu medida'
    ];
+    $resumen = $handler->load('resumen');
    $servicios = $handler->load('servicios');
    $frase = (object) [
      'titulo' => 'Lorem ipsum dolor sit amet, consectetur adipiscing',
@ -39,6 +40,6 @@ class Home {
      }
    }

-    return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'galeria'));
+    return $view->render($response, 'home', compact('banner', 'resumen', 'servicios', 'frase', 'clientes', 'testimonios', 'galeria'));
  }
 }
--- a/public/assets/scripts/home.js
+++ b/public/assets/scripts/home.js
@ -1,9 +1,9 @@
-let clientes = {
+const clientes = {
  clientes: [],
  current: 0,
  rows: 2,
  cols: 6,
-  decreaseClientes: () => {
+  decreaseClientes: function() {
    $('#img_clientes').find('.row').find('.column:last-child').remove()
    clientes.current -= clientes.rows
    if (clientes.current < - clientes.cols * clientes.rows) {
@ -20,7 +20,7 @@ let clientes = {
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
    )
  },
-  increaseClientes: () => {
+  increaseClientes: function() {
    $('#img_clientes').find('.row').find('.column:first-child').remove()
    clientes.current += 2
    if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
@ -33,7 +33,7 @@ let clientes = {
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
    )
  },
-  setup: () => {
+  setup: function() {
    $('.ci .icon').css('cursor', 'pointer').click(function() {
      if ($(this).attr('class').indexOf('left') != -1) {
        clientes.decreaseClientes()
@ -43,7 +43,7 @@ let clientes = {
    })
  }
 }
-let eventos = {
+const eventos = {
  eventos: [],
  current_tab: 'none',
  base_url: '',
@ -54,7 +54,6 @@ let eventos = {
      if (filter != 'none' && el.servicio != filter) {
        return
      }
-      console.debug(el.image)
      grid.append(
        $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
          $('<div></div>').attr('class', 'ui basic segment').append(
@ -108,7 +107,7 @@ let eventos = {
    })
  }
 }
-let testimonios = {
+const testimonios = {
  testimonios: [],
  current_testimonio: 0,
  cambiar: (id) => {
@ -134,3 +133,57 @@ let testimonios = {
    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
  }
 }
+const galeria = {
+  id: '',
+  galeria_id: '',
+  galeria: [],
+  base_url: '',
+  setup: function() {
+    $('.servicio').click((e) => {
+      this.changeTab(e.target)
+    })
+  },
+  changeTab: function(tab) {
+    this.drawTabs(tab)
+    $(this.galeria_id).html('')
+    const servicio = $(tab).attr('data-filter')
+    const grid = $(this.galeria_id)
+    $.each(this.galeria, (i, el) => {
+      if (servicio != 'none' && el.servicio != servicio) {
+        return
+      }
+      grid.append(this.drawCard(i, el))
+    })
+  },
+  drawTabs: function(active) {
+    $(this.id).find('.servicio.active').removeClass('active')
+    $(active).addClass('active')
+  },
+  drawCard: function(key, item) {
+    /*
+    <div class="eight wide tablet four wide computer column">
+      <div class="ui basic segment">
+        <a href="{{$urls->base}}/evento/{{$i}}">
+          <div class="ui image">
+            {!!$evento->imagen!!}
+          </div>
+          <div class="ui center aligned header">
+            {{$evento->titulo}}
+            <br />
+            {{$evento->empresa}}
+          </div>
+        </a>
+      </div>
+    </div>
+    */
+   return $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+     $('<div></div>').attr('class', 'ui basic segment').append(
+       $('<a></a>').attr('href', this.base_url + '/evento/' + key).append(
+         $('<div></div>').attr('class', 'ui image').html(item.image)
+       ).append(
+         $('<div></div>').attr('class', 'ui center aligned header').html(item.titulo + '<br />' + item.empresa)
+       )
+     )
+   )
+  }
+}
--- a/public/assets/styles/home.css
+++ b/public/assets/styles/home.css
@ -88,6 +88,9 @@
  background-color: white;
  padding: 0;
 }
+#galeria .bottom.attached.segment {
+  padding-top: 1rem !important;
+}
 #galeria .segment .image {
  height: 14rem;
  width: 100%;
--- a/resources/data/resumen.yml
+++ b/resources/data/resumen.yml
@ -0,0 +1,12 @@
+- titulo: Objetivo
+  imagen: eventos_calidad_de_vida.jpg
+  contenido: "<b>Organización y gestión de eventos deportivos</b>, talleres y actividades que contribuyan a la mejora de la salud, la comunicación, entretención y la superación personal."
+- titulo: Experiencia
+  imagen: eventos_deportivos.jpg
+  contenido: "Empresa con más de <b>15 años</b> de experiencia en la <b>gestión y organización de eventos deportivos.</b>"
+- titulo: Formación
+  imagen: eventos_recreativos.jpg
+  contenido: "Empresa con un equipo de profesionales altamente cualificados en el sector de la <b>organización de eventos</b> y con una gran implicación en cada proyecto que realizamos."
+- titulo: Tecnología
+  imagen: eventos_recreativos.jpg
+  contenido: "Total Sport aprovecha y saca el máximo partido a todo tipo de <b>innovaciones tecnológicas al servicio de la gestión de eventos</b> y de la docencia"
--- a/resources/data/servicios.yml
+++ b/resources/data/servicios.yml
@ -1,12 +1,3 @@
- titulo: Objetivo
-  imagen: eventos_calidad_de_vida.jpg
-  contenido: "<b>Organización y gestión de eventos deportivos</b>, talleres y actividades que contribuyan a la mejora de la salud, la comunicación, entretención y la superación personal."
- titulo: Experiencia
-  imagen: eventos_deportivos.jpg
-  contenido: "Empresa con más de <b>15 años</b> de experiencia en la <b>gestión y organización de eventos deportivos.</b>"
- titulo: Formación
-  imagen: eventos_recreativos.jpg
-  contenido: "Empresa con un equipo de profesionales altamente cualificados en el sector de la <b>organización de eventos</b> y con una gran implicación en cada proyecto que realizamos."
- titulo: Tecnología
-  imagen: eventos_recreativos.jpg
-  contenido: "Total Sport aprovecha y saca el máximo partido a todo tipo de <b>innovaciones tecnológicas al servicio de la gestión de eventos</b> y de la docencia"
+- titulo: Eventos Calidad de Vida
+- titulo: Eventos Deportivos
+- titulo: Eventos Recreativos
--- a/resources/views/home/galeria.blade.php
+++ b/resources/views/home/galeria.blade.php
@ -13,28 +13,32 @@
        </div>
      </div>
    </div>
-    <div class="ui center aligned grid" id="galeria_cards">
-      @foreach ($galeria as $i => $evento)
-        <div class="eight wide tablet four wide computer column">
-          <div class="ui basic segment">
-            <a href="{{$urls->base}}/evento/{{$i}}">
-              <div class="ui image">
-                {!!$evento->imagen!!}
-              </div>
-              <div class="ui center aligned header">
-                {{$evento->titulo}}
-                <br />
-                {{$evento->empresa}}
-              </div>
-            </a>
+    <div class="ui bottom attached segment">
+      <div class="ui center aligned grid" id="galeria_cards">
+        @foreach ($galeria as $i => $evento)
+          <div class="eight wide tablet four wide computer column">
+            <div class="ui basic segment">
+              <a href="{{$urls->base}}/evento/{{$i}}">
+                <div class="ui image">
+                  {!!$evento->imagen!!}
+                </div>
+                <div class="ui center aligned header">
+                  {{$evento->titulo}}
+                  <br />
+                  {{$evento->empresa}}
+                </div>
+              </a>
+            </div>
          </div>
-        </div>
-      @endforeach
+        @endforeach
+      </div>
    </div>
  </div>
 </div>

@push('readyjs')
+  galeria.id = '#galeria'
+  galeria.galeria_id = '#galeria_cards'
  galeria.galeria = [
    @foreach ($galeria as $evento)
      {
--- a/resources/views/home/servicios.blade.php
+++ b/resources/views/home/servicios.blade.php
@ -10,7 +10,7 @@
      <div class="fourteen wide column">
        <div class="ui center aligned stackable grid">
          <div class="four columns row">
-            @foreach ($servicios as $servicio)
+            @foreach ($resumen as $servicio)
              <div class="column">
                <div class="ui basic card">
                  <div class="image">