[DESIGN] Hacer la página más responsive

[mellamopepino]

Descripción

Actualmente la página no está muy pensada en terminos de responsive, lo cual trae muchos problemas con pantallas no lo suficientemente grandes.
Algunas de las pantallas que ví que tienen problemas son:

• Perfil.
• Editar perfil.
• Editar curso.
• Dashboard.
• Editar actividad.
• Actividad (como alumno).
• Actividades definitivas.

Posible solución

• Si no hay suficiente lugar que el sidebar aparezca por encima de las pantallas. Así cuando este se abre no achica el espacio de la pantalla.
• Poner margins y paddings de las pantallas acorde a breakpoints (osea, settear un margin para lg, uno para md, etc...). Para que siempre ocupen el mayor espacio disponible.
• Poner scrolls/flechas scrolleables para overflows (ej: para lo que pasa en la pantalla de dashboard, ver imagenes).
• Reacomodar elementos (ej: botones, inputs, etc...). Cuando incluso achicando margins y paddings todavía no hay suficiente espacio para los elementos de esta pantalla se los puede reacomodar para en vez de intentar ocupar espacio horizontal que no hay, ocupen espacio vertical.
• Ocultar elementos y ponerlos en menús desplegables cuando no hay suficiente lugar (esto puede ser útil más que nada en tablas con sus acciones).

Visual

• Perfil:
  

• Editar perfil:
  

• Editar curso (se llega a ver pero está en su límite y además tiene espacio como para poder verse mejor):
  

• Dashboard (notar que se esconden las tabs y no se pueden seleccionar):
  

• Actividades definitivas: