Merge pull request #45 from enflujo/estilo-celular

☎️  Estilo celular

aplicaciones/www/src/Aplicacion.vue

@@ -3,20 +3,44 @@ import { RouterLink, RouterView } from 'vue-router';
 import Ficha from './componentes/Ficha.vue';
 import { usarCerebroGeneral } from './cerebros/general';
 import { storeToRefs } from 'pinia';
+import { onMounted, Ref, ref } from 'vue';
 const cerebroGeneral = usarCerebroGeneral();
 const { paginaActual } = storeToRefs(cerebroGeneral);
+
+const menu: Ref<HTMLElement | null> = ref(null);
+
+function abrirCerrarMenu() {
+  if (!menu.value?.classList.contains('abierto')) {
+    menu.value?.classList.add('abierto');
+  } else {
+    menu.value?.classList.remove('abierto');
+  }
+}
+
+function clicFuera(evento: MouseEvent) {
+  if (!menu.value) return;
+  const elemento = evento.target as HTMLElement;
+  if (!(menu.value === elemento || menu.value.contains(elemento))) {
+    menu.value?.classList.remove('abierto');
+  }
+}
+
+onMounted(() => {
+  document.body.addEventListener('click', clicFuera);
+});
 </script>
 
 <template>
   <header>
-    <nav id="menu">
-      <RouterLink class="icono" to="/"><img src="/icono_cuenco.webp" /></RouterLink>
+    <nav id="menu" ref="menu">
+      <div :onclick="abrirCerrarMenu" class="icono"><img src="/icono_cuenco.webp" /></div>
       <RouterLink class="elementoMenu" to="/">Inicio</RouterLink>
       <RouterLink class="elementoMenu" :class="paginaActual === 'colectivos' ? 'activo' : ''" to="/colectivos/mapa">
         Colectivos y Ámbitos
       </RouterLink>
       <RouterLink class="elementoMenu" to="/publicaciones">Producción Académica</RouterLink>
       <RouterLink class="elementoMenu" to="/encuentros">Encuentros</RouterLink>
+      <RouterLink class="elementoMenu" to="/creditos">Créditos</RouterLink>
     </nav>
   </header>
 
@@ -31,22 +55,28 @@ const { paginaActual } = storeToRefs(cerebroGeneral);
 
 #menu {
   width: 100vw;
-  height: $altoMenu;
+  height: $altoMenuCelular;
   display: flex;
-  justify-content: space-evenly;
-  padding: 1em 20em;
+  padding: 1em 1em;
   z-index: 9;
-  line-height: 1.5;
+  line-height: 1.2;
   position: fixed;
   top: 0;
   z-index: 9;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.9);
+  flex-direction: column;
+  overflow: hidden;
+
+  &.abierto {
+    height: 100vh;
+    width: 40vw;
+  }
 
   .elementoMenu {
     padding: 0.5em 0.7em;
     color: var(--magentaCuenco);
     display: inline-block;
-    padding: 0 1rem;
+    padding: 0.5rem 1rem;
 
     &.router-link-exact-active,
     &.activo {
@@ -59,4 +89,30 @@ const { paginaActual } = storeToRefs(cerebroGeneral);
     }
   }
 }
+
+@media screen and (min-width: $minTablet) {
+  #menu {
+    max-width: 30vw;
+  }
+}
+
+@media screen and (min-width: $minPantalla) {
+  #menu {
+    width: 100vw;
+    max-width: 100vw;
+    height: $altoMenuPantalla;
+    justify-content: space-evenly;
+    align-items: flex-start;
+    padding: 1em 1em;
+    flex-direction: row;
+    line-height: 1.5;
+    justify-content: space-around;
+    align-items: center;
+
+    &.abierto {
+      height: $altoMenuPantalla;
+      width: 100vw;
+    }
+  }
+}
 </style>

aplicaciones/www/src/aplicacion.ts

@@ -33,6 +33,11 @@ const rutas = createRouter({
       name: 'encuentros',
       component: () => import('@/paginas/Encuentros.vue'),
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'creditos',
+      component: import('@/paginas/Creditos.vue'),
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'perdido',

aplicaciones/www/src/componentes/Ficha.vue

@@ -140,12 +140,12 @@ $margenY: 10px;
 #contenedorFicha {
   z-index: 99;
   width: 80vw;
-  height: calc(100vh - $altoMenu - $altoLinea);
+  height: calc(100vh - $altoMenuPantalla - $altoLinea);
   @include gradienteAzulCircular;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-  top: $altoMenu;
+  top: $altoMenuPantalla;
   border-radius: 20px;
   padding: 1em;
   overflow: hidden;

aplicaciones/www/src/componentes/Mapa.vue

@@ -155,6 +155,7 @@ function crearTextoSede(datos: PropiedadesGeoColectivos) {
 
 <style lang="scss">
 @use '@/scss/constantes' as *;
+
 #infoMapa {
   @include gradienteAzulCircular;
   color: var(--blanco);
@@ -189,8 +190,24 @@ function crearTextoSede(datos: PropiedadesGeoColectivos) {
 </style>
 
 <style lang="scss" scoped>
+@use '@/scss/constantes' as *;
 #contenedorMapa {
-  width: 55vw;
+  width: 80vw;
   height: 60vh;
+  margin: 1em auto;
+}
+
+@media screen and (min-width: $minTablet) {
+  #contenedorMapa {
+    width: 45vw;
+    margin: 7em 0;
+  }
+}
+
+@media screen and (min-width: $minPantalla) {
+  #contenedorMapa {
+    width: 55vw;
+    margin: 7em 0;
+  }
 }
 </style>

aplicaciones/www/src/paginas/404.vue

@@ -23,7 +23,7 @@ export default {
 
 .pagina-404 {
   text-align: center;
-  margin-top: $altoMenu;
+  margin-top: $altoMenuPantalla;
   width: 100vw;
   display: block;
   min-height: 100vh;

aplicaciones/www/src/paginas/Creditos.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <main>
+    <div id="contenedorCreditos">
+      <h1>Créditos</h1>
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+#contenedorCreditos {
+  width: 70vw;
+  margin-left: 10vw;
+  margin-top: 5vw;
+}
+</style>

aplicaciones/www/src/paginas/Inicio.vue

@@ -52,10 +52,29 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
+@use '@/scss/constantes' as *;
+
 #presentacion {
   overflow: auto;
-  margin-left: 4em;
+  margin: 0 10vw;
   padding-right: 1em;
-  width: 25vw;
+  width: 80vw;
+}
+
+@media screen and (min-width: $minTablet) {
+  #presentacion {
+    margin: 0 2em;
+    padding-right: 1em;
+    width: 40vw;
+  }
+}
+
+@media screen and (min-width: $minPantalla) {
+  #presentacion {
+    overflow: auto;
+    margin-left: 4em;
+    padding-right: 1em;
+    width: 30vw;
+  }
 }
 </style>

aplicaciones/www/src/paginas/Publicaciones.vue

@@ -52,7 +52,7 @@ onUnmounted(() => {
 @use '@/scss/constantes' as *;
 
 .columna {
-  height: calc(100vh - $altoMenu - $altoLinea);
+  height: calc(100vh - $altoMenuPantalla - $altoLinea);
 }
 
 .botonesVista {

aplicaciones/www/src/scss/_constantes.scss

@@ -12,7 +12,8 @@
   --enlacesFondoOscuro: #f7e9b7;
 }
 
-$altoMenu: 60px;
+$altoMenuPantalla: 60px;
+$altoMenuCelular: 35px;
 $altoLinea: 80px;
 
 // Tamaños Pantallas 🖥️ 📺 📱

aplicaciones/www/src/scss/estilos.scss

@@ -52,8 +52,9 @@ a:link {
 }
 
 main {
-  margin-top: $altoMenu;
+  margin-top: $altoMenuCelular;
   display: flex;
+  flex-direction: column;
 }
 
 ul {
@@ -77,7 +78,7 @@ ul {
 }
 
 .columna {
-  height: calc(100vh - $altoMenu);
+  height: calc(100vh - $altoMenuPantalla);
   overflow: auto;
 }
 
@@ -122,3 +123,10 @@ ul {
     }
   }
 }
+
+@media screen and (min-width: $minTablet) {
+  main {
+    margin-top: $altoMenuPantalla;
+    flex-direction: row;
+  }
+}