From 445f502db2ef1a137e975cd4c9a330548acac825 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Mon, 24 Jun 2024 12:40:34 -0500
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20galer=C3=ADa=20im=C3=A1genes=20?=
 =?UTF-8?q?proyectos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/proyectos/[slug].astro | 110 +++++++++++++++++++++++--------
 1 file changed, 83 insertions(+), 27 deletions(-)

diff --git a/src/pages/proyectos/[slug].astro b/src/pages/proyectos/[slug].astro
index e0b87c6..0aaf66f 100644
--- a/src/pages/proyectos/[slug].astro
+++ b/src/pages/proyectos/[slug].astro
@@ -75,7 +75,7 @@ if (proyectos && proyectos.length) {
           <source media="(max-width: 396px)" srcset="https://api.enflujo.com/assets/${id}?height=200&quality=75&format=webp" />
           <source media="(max-width: 799px)" srcset="https://api.enflujo.com/assets/${id}?height=400&quality=80&format=webp" />
           <source media="(min-width: 800px)" srcset="https://api.enflujo.com/assets/${id}?height=500&quality=90&format=webp" />
-          <img src="https://api.enflujo.com/assets/${id}?height=500&quality=90&format=webp" alt="${alt}" />
+          <img class='imagenGaleria' src="https://api.enflujo.com/assets/${id}?height=500&quality=90&format=webp" alt="${alt}" />
         </picture>
         `;
 
@@ -132,6 +132,27 @@ if (proyectos && proyectos.length) {
   </main>
 </Plantilla>
 
+<script>
+  // Ampliar fotos de galería
+  const galeria = document.querySelector('.galeria');
+  const imagenesGaleria = document.querySelectorAll('.imagenGaleria');
+  const contenedorImgGrande = document.createElement('div') as HTMLDivElement;
+  contenedorImgGrande.classList.add('imagenGrande');
+  imagenesGaleria.forEach((imagen) => {
+    imagen.addEventListener('click', () => {
+      const urlImagen = imagen.getAttribute('src');
+      contenedorImgGrande.style.backgroundImage = `url("${urlImagen}")`;
+      contenedorImgGrande.classList.toggle('visible');
+    });
+  });
+  contenedorImgGrande.addEventListener('click', () => {
+    if (contenedorImgGrande.classList.contains('visible')) {
+      contenedorImgGrande.classList.remove('visible');
+    }
+  });
+  galeria.appendChild(contenedorImgGrande);
+</script>
+
 <style lang="scss">
   @import '../../scss/_constantes.scss';
   @import '../../scss/_mixins.scss';
@@ -183,7 +204,7 @@ if (proyectos && proyectos.length) {
 
   .contenidoProyecto {
     padding: 0em 2em;
-   
+
     .contenedorVideo169 {
       width: 100%;
       padding-top: 56.25%;
@@ -199,34 +220,28 @@ if (proyectos && proyectos.length) {
     }
   }
 
-  
-
   @media (min-width: $minTablet) {
-   
-  .contenidoProyecto {
-    padding: 3em 4em;
-  }
+    .contenidoProyecto {
+      padding: 3em 4em;
+      width: 90vw;
     }
+  }
   @media (min-width: $minPantalla) {
     #portada {
       display: flex;
       flex-direction: row;
 
-    .contenidoPortada {
-      flex-basis: 50%;
-      padding: 4em 5%;
-      margin: auto;
+      .contenidoPortada {
+        flex-basis: 50%;
+        padding: 4em 5%;
+        margin: auto;
+      }
     }
-  }
-  .contenidoProyecto {
-    padding: 3em 4em;
-  }
+    .contenidoProyecto {
+      padding: 3em 4em;
+      width: 90vw;
     }
-
-    
-  
-
-
+  }
 </style>
 
 <style lang="scss" is:global>
@@ -262,28 +277,69 @@ if (proyectos && proyectos.length) {
     }
 
     .fotoSingular {
-      width: 50vw;
-      margin: 1em 0;
+      width: 40vw;
+      margin: 1em;
     }
 
     .galeria {
       margin: 1em 0;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .imagenGaleria {
+      cursor: pointer;
+      display: block;
+      position: relative;
+      width: auto;
+      margin: 0.5em;
+      max-height: 30vh;
+    }
+
+    .imagenGrande {
+      display: none;
+      position: absolute;
+      z-index: 9;
+      cursor: pointer;
+      border: 3px black solid;
+      left: 15%;
+      width: 70%;
+      background-color: rgba(255, 255, 255, 0.83);
+      height: 100vh;
+      background-position: center;
+      background-image: url(https://api.enflujo.com/assets/479f5d89-801a-4a70-a259-4386ac3028e5?height=500&quality=90&format=webp);
+      background-repeat: no-repeat;
+      background-size: contain;
+
+      &.visible {
+        display: block;
+      }
     }
   }
 
-  @media (min-width: $minPantalla) {
+  @media (min-width: $minTablet) {
     .contenidoProyecto {
+      .imagenGrande {
+        left: 10%;
+        width: 80%;
+      }
+    }
+  }
 
-      
+  @media (min-width: $minPantalla) {
+    .contenidoProyecto {
       p {
-        padding: 10px 20px;
-        max-width: 900px;
+        padding: 1em;
         margin-top: 0;
       }
 
       h2 {
         padding: 20px;
       }
+      .imagenGrande {
+        left: 5vw;
+        width: 90%;
+      }
     }
   }
 </style>

From 0f227135827c006347ecb36c0638c2b1b938a784 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Thu, 27 Jun 2024 17:13:52 -0500
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20pasar=20fotos=20con=20flechas?=
 =?UTF-8?q?=20en=20galer=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/proyectos/[slug].astro | 66 ++++++++++++++++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/pages/proyectos/[slug].astro b/src/pages/proyectos/[slug].astro
index 0aaf66f..6d1e052 100644
--- a/src/pages/proyectos/[slug].astro
+++ b/src/pages/proyectos/[slug].astro
@@ -137,19 +137,62 @@ if (proyectos && proyectos.length) {
   const galeria = document.querySelector('.galeria');
   const imagenesGaleria = document.querySelectorAll('.imagenGaleria');
   const contenedorImgGrande = document.createElement('div') as HTMLDivElement;
+  const botonSiguiente = document.createElement('div') as HTMLDivElement;
+  const botonAnterior = document.createElement('div') as HTMLDivElement;
+
   contenedorImgGrande.classList.add('imagenGrande');
-  imagenesGaleria.forEach((imagen) => {
+  botonSiguiente.classList.add('botonGaleria');
+  botonAnterior.classList.add('botonGaleria');
+
+  botonSiguiente.id = 'botonSiguiente';
+  botonAnterior.id = 'botonAnterior';
+
+  botonSiguiente.innerText = '>';
+  botonAnterior.innerText = '<';
+
+  contenedorImgGrande.appendChild(botonAnterior);
+  contenedorImgGrande.appendChild(botonSiguiente);
+
+  let imagenActual: number;
+
+  botonSiguiente.addEventListener('click', () => {
+    if(imagenActual < imagenesGaleria.length-1) {
+      imagenActual++;
+    }
+  })
+
+  botonAnterior.addEventListener('click', () => {
+    if(imagenActual > 0)
+      imagenActual--;
+  })
+
+  imagenesGaleria.forEach((imagen, i) => {
     imagen.addEventListener('click', () => {
+      imagenActual = i
       const urlImagen = imagen.getAttribute('src');
       contenedorImgGrande.style.backgroundImage = `url("${urlImagen}")`;
       contenedorImgGrande.classList.toggle('visible');
     });
+
+    botonSiguiente.addEventListener('click', () => {
+      const urlNuevaImagen = imagenesGaleria[imagenActual].getAttribute('src')
+      contenedorImgGrande.style.backgroundImage = `url("${urlNuevaImagen}")`;
+    })
+
+    botonAnterior.addEventListener('click', () => {
+      const urlNuevaImagen = imagenesGaleria[imagenActual].getAttribute('src')
+      contenedorImgGrande.style.backgroundImage = `url("${urlNuevaImagen}")`;
+    })
   });
-  contenedorImgGrande.addEventListener('click', () => {
-    if (contenedorImgGrande.classList.contains('visible')) {
-      contenedorImgGrande.classList.remove('visible');
+
+  contenedorImgGrande.addEventListener('click', (event) => {
+    if ( event.target !== botonAnterior &&  event.target !== botonSiguiente) {
+      if (contenedorImgGrande.classList.contains('visible') ) {
+        contenedorImgGrande.classList.remove('visible');
+      }
     }
   });
+
   galeria.appendChild(contenedorImgGrande);
 </script>
 
@@ -315,6 +358,21 @@ if (proyectos && proyectos.length) {
         display: block;
       }
     }
+
+    .botonGaleria {
+      padding: 0.5em;
+      position: absolute;
+      font-size: 2em;
+      top: 40%;
+
+      &:hover {
+        color: $colorPrincipal;
+      }
+    }
+
+    #botonSiguiente {
+      right: 0;
+    }
   }
 
   @media (min-width: $minTablet) {

From 195aa24c2f68590a4e4151837775f7f41fab9ee5 Mon Sep 17 00:00:00 2001
From: anattolia <anattolia@gmail.com>
Date: Thu, 27 Jun 2024 17:23:22 -0500
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=9D=20altura=20foto=20grande?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/proyectos/[slug].astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/proyectos/[slug].astro b/src/pages/proyectos/[slug].astro
index 6d1e052..7dbe3cf 100644
--- a/src/pages/proyectos/[slug].astro
+++ b/src/pages/proyectos/[slug].astro
@@ -348,7 +348,7 @@ if (proyectos && proyectos.length) {
       left: 15%;
       width: 70%;
       background-color: rgba(255, 255, 255, 0.83);
-      height: 100vh;
+      height: 80vh;
       background-position: center;
       background-image: url(https://api.enflujo.com/assets/479f5d89-801a-4a70-a259-4386ac3028e5?height=500&quality=90&format=webp);
       background-repeat: no-repeat;