7.1 - Vista Móvil

Propósito y Alcance

Este documento detalla el diseño y las adaptaciones específicas para dispositivos móviles en la aplicación Crónicas de Mérida. Cubre cómo la aplicación se transforma de vistas de escritorio a móviles utilizando consultas de medios y técnicas de diseño responsivo. Para información sobre vistas de tabletas y escritorios, consulta la sección correspondiente.

Puntos de Ruptura Móviles

La aplicación implementa dos puntos de ruptura principales para dispositivos móviles:

1. Teléfonos Extra Pequeños: Pantallas con un ancho máximo de 575.98px.
2. Teléfonos Pequeños: Pantallas entre 576px y 767.98px.

Implementación del Menú Móvil

El menú de navegación sufre una transformación significativa en las vistas móviles para adaptarse a pantallas más pequeñas. Se convierte en un menú colapsable con funcionalidad de alternancia.

Características clave del menú móvil:

• Posicionamiento fijo en la parte superior de la pantalla.
• Mecanismo de alternancia para mostrar/ocultar elementos del menú.
• Apilamiento vertical de los elementos del menú (flex-direction: column).
• Los submenús aparecen como bloques en lugar de desplegables.
• Los elementos del menú ocupan todo el ancho disponible (min-width: 100%).

Transformaciones de Diseño

Se realizan varios ajustes de diseño al pasar a la vista móvil:

Componentes Basados en Cuadrícula

Los contenedores de eventos y diseños similares cambian de múltiples columnas a una sola columna.

Tarjetas de Formularios

Las tarjetas de formularios se transforman de un diseño horizontal a un apilamiento vertical.

Adaptaciones Específicas de Componentes

Tablas de Materiales

Las tablas para la gestión de materiales se adaptan con tamaños de fuente más pequeños y espaciado ajustado:

• Tamaño de Fuente: 0.85rem (reducido).
• Relleno de Celdas: 0.5rem - 0.75rem (reducido).
• Tamaño de Fuente del Título: 1.4rem - 1.5rem (reducido).
• Diseño: Apilado en lugar de lado a lado.
• Posición del Filtro: Debajo del contenido en lugar de al lado.

Contenedor del Foro

La vista del foro cambia de un diseño horizontal a una disposición en columna vertical:

.forum__container {
    flex-direction: column;
}

Este cambio apila los elementos del foro verticalmente en lugar de colocarlos uno al lado del otro.

Encabezado y Banner Móviles

El encabezado y el banner reciben ajustes específicos para las vistas móviles:

• Márgenes del Encabezado: margin-bottom: 50px.
• Tamaño de Fuente del Banner:
  • Teléfonos Extra Pequeños: font-size: 1em.
  • Teléfonos Pequeños: font-size: 2.5em.

Adaptación del Formulario de Inicio de Sesión

El formulario de inicio de sesión se centra y dimensiona adecuadamente para pantallas móviles:

.login-box {
    max-width: 80%;
    min-width: 80%;
    align-items: center;
    text-align: center;
}

Flujo de Diseño Móvil Primero

El siguiente diagrama ilustra cómo los elementos de la página se adaptan de las vistas de escritorio a las móviles:

Este sistema responsivo asegura que la aplicación sea utilizable en diferentes tamaños de dispositivos móviles, con ajustes apropiados de diseño y estilo para cada punto de ruptura.