Chamilo LMS

this = 1.10.0?

Yannick Warnier wrote:

this = 1.10.0?

from 1.10 to v2

Yes.

I don't have the option to select 1.10 in Redmine ...

Para migrar a bootstrap 3, debemos seguir los siguiente parametros establecidos en la documentacion oficial de bootstrap.

Sobre el sistema de grillas¶

Se a cambiado el llamado de todas las grillas y eliminado muchas clases., en la versión anterior proporcionaban grillas fijas con el .row o el .container, en la versión 3 ya estas clases no tienen estas características de ser fijas(que era una anchura en pixeles), ahora tienen una anchura fluida que permite que el dispositivo se adapte al contenido y no el contenido al dispositivo , entrando con mas firmesa al tema de diseño responsivo

Aquí podemos observar las clases remplazadas en el sistema de grillas.

Sobre la parte móvil¶

Pero teniendo en cuenta lo siguiente en el aspecto móvil, para bootstrap 3, prioriza que el diseño responsivo del móvil es primero, luego sigue el de tablet y por ultimo el destokp, por eso en la versión 2 de bootstrap primero era el destkop y luego los demás dispositivos, por eso se llamaba en una linea después del bootstrap.css al bootstrap-responsive.css, en la versión 3, el archivo bootstrap-responsive.css ya no existe, fue eliminado y todas las características están dentro del bootstrap.css por tal razón en la migración debemos de replantear el diseño móvil primero antes que el desktop.

Así que si se realiza la migración conlleva a que se rompa la parte móvil, pero sera un tiempo de trabajo con beneficios a futuro.

Sobre los componentes con javascripts.¶

El marco de las ventanas Modales (Modal) ha cambiado de .modal-header,.modal-body,.modal-footer para .modal-content y .modal-dialog.

También ha cambiado el llamado en javascripts para algunos comportamientos de los tabs, acordeones, modals, así que debemos tener cuidado con la migración, ya que algunas funciones, que usan los componentes de bootstrap 2.0 capaz deja de funcionar.

Sobre los estilos actuales en Chamilo¶

Se tendrá que redefinir el llamado de las clases según el bootstrap 3, mi idea es hacer una base en main/css/chamilo y luego hacer import en las demás solo para cambiar ciertas apariencias en tanto a color o tipo de letra, se eliminaría un 40% de código css que quedaría obsoleto, tambien debemos definir un css base bien establecido ejemplo baseunica.css ya que ahora existe base.css y base_chamilo.css que al parecer cargan doble llamadas de css, deberiamos integrarla en una sola.

Sobre los archivos PHP en chamilo¶

Al parece bootstrap fue colocado antes del sistema de plantillas TWIG ya que la mayoría del html y código css esta introducido dentro de las librerías que se encuentran en main/inc, y algunos llamados de elementos de formulario también tienen clases tipo span4, span3, etc

.span1 => aprox 99 elementos
.span2 => aprox 32 elementos
.span3 => aprox 57 elementos
.span4 => aprox 52 elementos
.span5 => aprox 36 elementos
.span6 => aprox 51 elementos
.span7 => aprox 6 elementos
.span8 => aprox 16 elementos
.span9 => aprox 58 elementos
.span10 => aprox 2 elementos
.span11 = aprox 11 elementos
.span12 => aprox 45 elementos.
.row-fluid = > aprox 19 elementos
.container => aprox 21 elementos
.btn = > aprox 450 elementos.

Luego están los modals, acordiones que se usan en algunas vistas en Chamilo.

Viendo estos detalles documentados anteriormente puedo calcular que me tomara un buen tiempo aprox una semana a full para tener una versión estable con bootstrap 3 ya que la parte movil se va a romper si o si, luego verificar si no se rompe un comportamiento en JS.

Esto nos servira de guia para la migracion en http://www.bootply.com/bootstrap-3-migration-guide

De todas maneras este salto se tiene que hacer, mejor hacerlo ahora que en una version posterior.
Lo mas importante es cambiar los templates y el resto se puede arreglar mientras avanzamos.

Eh empezado con la migración, los avances en mi rama, actualmente voy por el index y userportal.php

[[https://github.com/aragonc/chamilo-lms/tree/bootstrap]]

Alex Aragon wrote:

Eh empezado con la migración, los avances en mi rama, actualmente voy por el index y userportal.php

[[https://github.com/aragonc/chamilo-lms/tree/bootstrap]]

Recomiendo hacer un PR a la rama 1.10.x para poder revisar/comentar poco a poco el avance.

Acabo de enviar un PR, para comentarios de cambios, aun hay partes rotas, por ejemplo en Agenda el Full Calendar dejo de funcionar, capaz es un error de compatibilidad con el jquery.min.js que actualice para el bootstrap 3, no se si te tendra que actualizar el full calendar a su versión 2.

https://github.com/chamilo/chamilo-lms/pull/548

He enviado el segundo PR la cual soluciones varios errores de visualización en el user-portal, course home, course description, entre otros.

(Comentario anterior modificado por mi para obtener más datos)

Acabo de hacer unas correcciones para que funcione de esta manera:

$group = [
            $form_change->addButtonSave(get_lang('SaveSettings'), 'save', true),
            $form_change->addButtonPreview(get_lang('Preview'), 'preview', true),
            $form_change->addButtonDownload(get_lang('Download'), 'download', true)
];
$form_change->addGroup($group);

Envié PR a Alex para el slider de anuncios de la plataforma
https://github.com/aragonc/chamilo-lms/pull/11

Acabo de agregar un nuevo layout "box" (special para el login) para la clase FormValidator.

El login ahora queda asi:

$form = new FormValidator(
            'formLogin',
            'POST',
            null,
            null,
            null,
            FormValidator::LAYOUT_BOX_NO_LABEL
        );

        $form->addText(
            'login',
            get_lang('UserName'),
            true,
            array('id' => 'login', 'autofocus' => 'autofocus', 'icon' => 'user')
        );

        $form->addElement(
            'password',
            'password',
            get_lang('Pass'),
            array('id' => 'password', 'icon' => 'lock')
        );

Donde "'icon' => 'lock'" es tomado en cuenta para mostrar el icono al lado del input.

Estoy corrigiendo los formularios de los ejercicios.

Ha sucedido 4 veces pues siempre he indicado no poner código HTML en los formularios.
Es normal que se rompan cosas que no están integradas en FormValidator mediante templates.

Angel Quiroz wrote:

Los modals de Bootstrap están rotos
No funcionan los eventos para cerrar el modal con ESC o click

Se ve opaco por el 'default.css'

.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}

Si me funciona el ESC.

Es necesario tener el portal en modo "test" para que actualice a cada vez la "cache".

Julio Montoya wrote:

Angel Quiroz wrote:

Los modals de Bootstrap están rotos
No funcionan los eventos para cerrar el modal con ESC o click

Se ve opaco por el 'default.css'

[...]

Si me funciona el ESC.

Es necesario tener el portal en modo "test" para que actualice a cada vez la "cache".

Creo que el problema viene porque el backdrop aparece donde no debería. Se agrega directamente al body, pero debería estar dentro del mismo dialog.

También me funcionaba el ESC, pero hice Ctrl+F5 y dejo de funcionar

Angel Quiroz wrote:

El tpl de buscar usuarios/grupos en la red social, se ve raro

Claro, pues no usa FormValidator. Lo reviso.

Alex, la parte avance temático que aparece en la parte superior de la página principal del curso quedó completamente rota.

Yannick Warnier wrote:

Julio, no te olvides revisar el buscador de la red social. Adjunto otra imagen (lo mismo que Angel, más o menos)

He corregido esa interfaz en mi rama 1.10.x.doctrine

En la herramienta de documentos, al subir un vídeo en FLV, el player aparece un poco roto.

This work is still ongoing and it is likely it will continue after 1.10.0. We have reached an almost-acceptable situation, visually. I'm not closing the task for now, but this is reaching completion in what concerns 1.10.0

chamilo_blue must be named chamilo_electric_blue Renombrado
chamilo_sport_red is missing (rojo + negro) enviado en mi ultimo PR
delicious_bordeaux is missing (vino tinto) enviado en mi ultimo PR
empire_green is missing (verde emperio) enviado en mi ultimo PR
fruity_orange is missing enviado en mi ultimo PR
journal is missing enviado en mi ultimo PR

readable is missing (otra fuente más "blog")
royal_purple is missing (morado real)
silver_line is missing (gris plata)
simplex is missing (algo simple)

Excellent, only 4 left to go!

• sober_brown is missing (marón sobre)
• spacelab is missing (laboratorio del espacio!? - cambia la fuente, mayormente, sobre fondo blanco)
• steel_grey is missing (gris acero)
• tasty_olive is missing (aceituna sabrosa)

Got it. I'm leaving the task open a bit more for the generical styles fix, but otherwise everything is good in terms of re-built CSS styles.