Para Open Bootcamp
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.
-
Vite - Para la creación del proyecto.
-
React - Para el desarrollo de la interfaz
-
Typescript - Para el desarrollo del código
-
Tailwind CSS - Para el diseño de la interfaz
-
React Icons - Para los iconos de los botones
-
DevIcon ❤️ - Para los iconos de las tecnologías
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.
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 |
---|---|
![]() |
![]() |
Al hacer scroll horizontalmente en el componente de categorías, se arrastra también la sección de listado de rutas.
La sección de listado de rutas ya no se moverá al hacer scroll horizontalmente en el componente de categorías.
PROBLEM | FIXED |
---|---|
![]() |
![]() |
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.
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 |
---|---|
![]() |
![]() |
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.
Se implementaron botones de navegación cercanos al dedo pulgar de la mano para poder navegar entre las categorías.
PROBLEM | FIXED |
---|---|
![]() |
![]() |