🗑️ limpiar HTML

enflujo · Feb 13, 2024 · b5fcb74 · b5fcb74
1 parent d342a50
commit b5fcb74
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 20 deletions.
diff --git a/src/componentes/LineaTiempo.astro b/src/componentes/LineaTiempo.astro
@@ -35,7 +35,7 @@ tiempo.forEach((marca, i) => {
 <div id="contenedorLineaTiempo">
   <div id="contenedorGrafica">
     <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-      <g id="decadas">
+      <g id="grupoDecadas">
         {
           decadas.map((decada, i) => (
             <rect x={`${i * anchoDecada}%`} y="0" width={`${anchoDecada}%`} height={`${altoDecada(decada.conteo)}px`} />

diff --git a/src/componentes/ListaNodos.astro b/src/componentes/ListaNodos.astro
@@ -11,7 +11,7 @@ const { lista, titulo, id } = Astro.props;
 ---
 
 <section id={id} class="lista">
-  <h2 class="titulo" id="titulo">{titulo}</h2>
+  <h2 class="titulo">{titulo}</h2>
   <ul class=`contenedorElementos ${id}` data-lista=`${titulo}`>
     {
       lista.map((elemento, i) => (
@@ -29,14 +29,18 @@ const { lista, titulo, id } = Astro.props;
 
 <script>
   const listas = document.querySelectorAll<HTMLElement>('.lista');
-
+  const contenedorListas = document.getElementById('contenedorListas') as HTMLDivElement;
   // Función para abrir y cerrar listas. Falta decidir si se usa en teléfonos
   listas.forEach((lista) => {
     const titulo = lista.querySelector('.titulo');
     const contenedorElementos = lista.querySelector('.contenedorElementos');
 
     titulo?.addEventListener('click', () => {
-      contenedorElementos?.classList.toggle('abierto');
+      const listaAbierta = contenedorListas.querySelector('.abierto');
+      if (listaAbierta && !contenedorElementos?.classList.contains('abierto')) {
+        listaAbierta.classList.remove('abierto');
+        contenedorElementos?.classList.add('abierto');
+      } else contenedorElementos?.classList.toggle('abierto');
     });
   });
 </script>

diff --git a/src/componentes/Proyectos.astro b/src/componentes/Proyectos.astro
@@ -9,7 +9,7 @@ proyectos.sort((a, b) => {
 ---
 
 <div id="listaProyectos">
-  <h2 id="titulo">Proyectos</h2>
+  <h2>Proyectos</h2>
 
   <ul>
     {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -24,28 +24,26 @@ import Proyectos from '@/componentes/Proyectos.astro';
 
 <style lang="scss" is:global>
   @import '@/scss/constantes';
+
   #contenedorListas {
     display: none;
     flex-direction: column;
-    flex-wrap: wrap;
     z-index: 4;
     position: relative;
     max-width: 400px;
-    //height: calc(100vh - 50px);
+    height: calc(100vh - 50px);
     margin-top: 50px;
     background-color: var(--grisClaro);
     width: 80vw;
     padding: 3rem 2rem;
+    overflow: auto;
 
     ul {
       li {
-        // display: none;
         opacity: 0.3;
 
         &.visible {
           opacity: 1;
-          // display: block;
-          // font-size: 0.75em;
         }
       }
 
@@ -69,9 +67,6 @@ import Proyectos from '@/componentes/Proyectos.astro';
     }
 
     .lista {
-      height: calc((100vh - 150px) / 2);
-      overflow-y: auto;
-      overflow-x: hidden;
       position: relative;
       background-color: rgba(255, 255, 255, 0.6);
       flex-basis: 20%;
@@ -118,12 +113,6 @@ import Proyectos from '@/componentes/Proyectos.astro';
         color: var(--textoOscuro);
       }
     }
-
-    #titulo {
-      color: var(--fondoVerdeOscuro);
-      background-color: var(--textoClaro);
-      padding: 0.2em;
-    }
   }
 
   // Cambiar estilos según tamaño de pantalla

diff --git a/src/plantillas/Plantilla.astro b/src/plantillas/Plantilla.astro
@@ -22,7 +22,6 @@ const altImg = imagen ? imagen.alt : nombreProyecto;
 <html lang="es">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Descripción de la página" />
     <meta name="viewport" content="width=device-width" />
 
     <link rel="preconnect" href="https://rsms.me/" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ proyectos.sort((a, b) => { @@
     ---
     <div id="listaProyectos">
-      <h2 id="titulo">Proyectos</h2>
+      <h2>Proyectos</h2>
       <ul>
         {
@@ Expand Down @@