Skip to content

irradev/propuestas-open-bootcamp-ui-modal-hoja-de-ruta

Repository files navigation

Propuesta ui - modal Seleción de hoja de Ruta


Descripción


A continuación comparto algunos cambios que me gustarían añadieran al componente modal de selección de hoja de ruta.

Al final de éste documento se muestra una Demo funcional y un CodeSandbox para interactuar con el código en tiempo real.



Tecnologías y librerías utilizadas





Implementaciones



1.- Slide Info


PROBLEM

En el modo mobile. Al seleccionar una ruta, no se muestra la información de la ruta ni tampoco el listado de los cursos que contiene.

FIXED

Se implementó una ventana slide para mostrarse cada vez que se haga click en una ruta.

Se añade un efecto blur, un div mask y un botón close para cerrar el slide.

Tanto el div mask como el botón close al hacer click en ellos, cerrarán el slide.


PROBLEM FIXED
Problem Click Nothing Fix Open Slide



2.- Scroll Horizontal en Categorias


PROBLEM

Al hacer scroll horizontalmente en el componente de categorías, se arrastra también la sección de listado de rutas.

FIXED

La sección de listado de rutas ya no se moverá al hacer scroll horizontalmente en el componente de categorías.


PROBLEM FIXED
Problem Scroll Categories Fix Scroll Categories



3.- Scroll Vertical en Listado de Rutas


PROBLEM

Al hacer scroll verticalmente en el listado de rutas, el componente de categorías se mueve con el listado haciendolo desaparecer al hacer scroll hacia abajo.

FIXED

La sección categorías ya no se moverá al hacer scroll verticalmente en el listado de rutas.

Así mismo, se han implementado unos botones de navegación para poder navegar entre las categorías sin hacer scroll.

PROBLEM FIXED
Problem Categories Disappear on Scroll Down Fix Categories Persists on Scroll Donw



4.- Botones de navegación en modo mobile (UX)


PROBLEM

En el modo para dispositivos móviles, la sección de categorías es difícil de acceder para el pulgar de la mano porque están en la parte superior de la pantalla.

FIXED

Se implementaron botones de navegación cercanos al dedo pulgar de la mano para poder navegar entre las categorías.


PROBLEM FIXED
Problem Categories Big Thumb Distance Fix Categories Big Thumb Distance


Let's code!


Demo

Play in CodeSandBox

GitHub




Open Bootcamp





With Love <3


Linux Zorin Os Visual Code Typescript ReactJs

About

Propuesta Ui modal de hoja de ruta para Open Bootcamp

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages