Merge pull request #212 from enflujo/datos

🖌️ Arreglar estilos página Datos
enflujo · Oct 21, 2024 · 6645aa9 · 6645aa9
2 parents b258c31 + ff5b017
commit 6645aa9
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 74 deletions.
diff --git a/aplicaciones/www/src/componentes/FichaTecnica.astro b/aplicaciones/www/src/componentes/FichaTecnica.astro
@@ -14,6 +14,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 
 <div class="fichaTecnica">
   <h2 class="tituloSeccion tituloYa">{datosYa.nombre}</h2>
+  <div class="cerrarFicha">x</div>
   <p class="nombre">{datosIndicador.nombre}</p>
 
   <div class="seccion">
@@ -100,26 +101,46 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
 
 <style lang="scss">
   @import '@/scss/constantes';
+
   .fichaTecnica {
-    min-width: 300px;
     border: solid 2px var(--azulViejo);
-    border-radius: 15px;
+    border-radius: 15px 0 0 15px;
     color: var(--azulViejo);
     background-color: var(--blancoMarfil);
     text-align: center;
+    position: relative;
     z-index: 9;
+    height: fit-content;
+
     font-variation-settings:
       'MONO' 0,
       'CASL' 0,
       'wght' 700,
       'slnt' 0,
       'CRSV' 0;
+    width: 70vw;
+    .cerrarFicha {
+      color: var(--blancoMarfil);
+      position: absolute;
+      right: 0.5em;
+      top: 0.1em;
+      cursor: pointer;
+      border: 1px solid var(--blancoMarfil);
+      padding: 0.2em 0.4em;
+      border-radius: 50%;
+
+      &:hover {
+        background-color: var(--blancoMarfil);
+        color: var(--azulViejo);
+        opacity: 0.8;
+      }
+    }
 
     .tituloSeccion {
       background-color: var(--azulViejo);
       color: var(--blancoMarfil);
       width: auto;
-      padding: 0.3em;
+      padding: 0.3em 2em;
       margin: 0;
       font-size: 1em;
     }
@@ -184,6 +205,7 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
     .fichaTecnica {
       min-width: 330px;
       width: 70vw;
+
       .seccion {
         .titulo {
           flex-basis: 50%;
@@ -193,6 +215,9 @@ const datosIndicador = datosYa.indicadores.find((instancia) => instancia.ruta ==
   }
 
   @media screen and (min-width: $corte2) {
+    .fichaTecnica {
+      width: 50vw;
+    }
   }
 
   @media screen and (min-width: $corte3) {

diff --git a/aplicaciones/www/src/componentes/PropuestaIndicador.astro b/aplicaciones/www/src/componentes/PropuestaIndicador.astro
@@ -49,7 +49,6 @@ import { urlsAEnlacesHTML } from '@enflujo/alquimia';
   @import '@/scss/constantes';
   .contenedorInfoAdicional {
     display: flex;
-    // position: absolute;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: center;

diff --git a/aplicaciones/www/src/pages/[ya]/[indicador].astro b/aplicaciones/www/src/pages/[ya]/[indicador].astro
@@ -101,6 +101,7 @@ const archivosYa: { titulo: string; archivo: string; umbral?: number; ruta: stri
     const comparativo = document.getElementById('comparativo') as HTMLDivElement;
     const botonFicha = document.getElementById('abrirFicha') as HTMLSpanElement;
     const infoAdicional = document.getElementById('contenedorInfoAdicional') as HTMLDivElement;
+    const botonesCerrar = document.querySelectorAll('.cerrarFicha');
 
     if (botonFicha) {
       botonFicha.addEventListener('click', () => {
@@ -189,6 +190,13 @@ const archivosYa: { titulo: string; archivo: string; umbral?: number; ruta: stri
         infoAdicional.classList.remove('abierta');
       }
     });
+
+    // Cerrar ficha con botón cerrar
+    botonesCerrar.forEach((boton) => {
+      boton.addEventListener('click', (evento) => {
+        infoAdicional.classList.remove('abierta');
+      });
+    });
   }
 </script>