feat(Gallery, UX): added swipe animation for mobile users

[AlejandroSuero]

Descripción

Se añade soporte para dispositivos táctiles en Gallery.astro para pasar de foto.

Problema solucionado

En dispositivos móviles, tablet o similares, al no aparecer las flechas para pasar de foto, había que cerrar y volver a elegir foto. Con esta PR se añade una manera intuitiva de pasar de foto usando gestos de movimiento touch{start|move|end}.

Cambios propuestos

1. Añadir clase swipe-element para la imagen que va a ser animada.
2. Añadir eventListener("touchstart", swipeImage, { passive: true }) con la opción de passive: true para mejorar rendimiento de estos eventos.
3. Añadir función swipeImage en la cuál se realizará la animación y la lógica para saber si hay que mostrar la siguiente image o la anterior a la actualmente mostrada.
4. Añadir eventListener("touchmove", ...) y evenListener("thouchend", ...) dentro de la función swipeImage.

Capturas de pantalla (si corresponde)

Screen.Recording.2024-05-28.at.13.51.41.mov

Note

También he probado los cambios en mi dispositivo móvil haciendo uso de pnpm dev --host.

Comprobación de cambios

• He revisado que no haya ninguna PR (pull request) ya abierta con un problema similar, siguiendo el apartado de buenas prácticas
• He revisado localmente los cambios para asegurarme de que no haya errores ni problemas.
• He probado estos cambios en múltiples dispositivos y navegadores para asegurarme de que la landing page se vea y funcione correctamente.
• He actualizado la documentación, si corresponde.

Impacto potencial

Mejoras de experiencia para usuarios de dispositivos táctiles como móvil, tablet, etc.

Contexto adicional

He probado a no realizar ninguna animación indicativa del swipe pero creo que el usuario llega a entender mejor que movimiento se está realizando si se muestra la imagen deslizándose y desapareciendo conforme se realiza la acción.

Enlaces útiles

• Documentación del proyecto:
• Código de referencia:

[vercel]

@AlejandroSuero is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.