Responsive - simplificar secciones

[marta-vilaseca]

TAREA: Simplificar las pantallas para que el mini juego/app sea navegable en móvil

Acerca del repo

A nivel de funcionalidad el código es muy sencillo:

• Se reparten unas cartas, las cuales inicialmente están todas boca abajo.
• Al clicar el usuario sobre cualquiera de ellas, la carta se da la vuelta y muestra una imagen relacionada con un concepto relacionado con la pregunta "Entraré a formar parte de los equipos de trabajo de #AdoptaUnJunior?"
• Si clicamos sobre el icono en la parte baja de la carta, éste nos llevará a una respuesta a la pregunta planteada, relacionada con el concepto que dicha carta representa
• Tendremos la opción de volver hacia arriba y clicar en cualquiera de las otras cartas para obtener otra respuesta diferente :)

Mi idea fue desde un principio pensando en unas cartas repartidas sobre una mesa, así que contrariamente a lo habitual no seguí la filosofía mobile first... ¡y ahora en pantallas pequeñas se ve todo fatal! 🤦🏻‍♀️

Lo que hay que hacer

• Clonarse el repo y crear una nueva rama donde trabajar (por ejemplo: responsive)
• Ajustar la distribución y tamaños de la página inicial (con la pregunta y las cartas) para que se visualice correctamente en móvil
  • Si es necesario se puede ocultar info extra (las instrucciones) o funcionalidades extras (el botón de barajar) para aprovechar mejor el espacio
• Reducir las pantallas de respuesta a su mínima expresión, dejando sólo la respuesta con su pequeño texto explicativo y el botón de volver hacia arriba - es decir, ocultando el <aside> que contiene las animaciones y emoticonos que en la versión desktop aparecen a la izquierda.
• OPCIONAL: sería interesante también modificar el CSS de las secciones de forma que viendo la app en modo portrait pero en dispositivos más grandes (tablets, monitor vertical) se muestre el <aside> con los emojis y animaciones en la parte superior de la pantalla y el texto debajo de éstas, o al revés, en vez de una al lado de la otra como aparecen ahora.

Notas útiles:

• El CSS se ha separado en varios archivos para facilitar un poco el proceso, la idea sería añadir los media queries pertinentes donde se requiera (en principio en los archivos marcados con ⭐):
  • reset.css
  • ⭐ main.css se encarga de los estilos principales y de los de la pantalla inicial, EXCEPTO el CSS relacinado con las cartas en sí
  • ... cuyos estilos se ha recogido en ⭐ cards.css
  • ⭐ sections.css se encarga de dar forma a las pantallas que van mostrando las distintas respuestas a las cartas levantadas
  • Y finalmente, en animations.css están definidas tanto las animaciones que se utilizan en los distintos apartados como para manejar las cartas
• En la medida de lo posible, no modificar nada de la estructura HTML

[scsanchez]

¡Hola Marta! Me encantaría colaborarte en esta issue.

[marta-vilaseca]

Hola Sergio! Toda tuya, te la acabo de asignar. Muchas gracias! :D

[marta-vilaseca]

Cierro la PR! Terminada la parte pendiente de trabajar el responsive de las secciones con aside, sobre todo de cara a, como Sergio comentaba, ofrecer una mejor experiencia de usuario en los dispositivos con pantallas pequeñas.

Por el camino he aprovechado para reestructurar un poco, realizar correcciones y añadir algunos breakpoints más en los media queries, según el caso.