From 595fcf30eb638e59896d76efeaeb9f34fc55f267 Mon Sep 17 00:00:00 2001
From: Julio Montoya <gugli100@gmail.com>
Date: Tue, 21 Aug 2018 10:26:16 +0200
Subject: [PATCH] Minor - UI bootstrap v4 improvements, fix form (WIP),
 breadcrumb

---
 .../lib/formvalidator/Element/DatePicker.php  |   4 +-
 .../formvalidator/Element/DateTimePicker.php  |   4 +-
 .../lib/formvalidator/FormValidator.class.php |  12 +-
 main/inc/lib/pear/HTML/QuickForm/Action.php   |  34 +++--
 .../pear/HTML/QuickForm/advanced_settings.php |   8 +-
 .../lib/pear/HTML/QuickForm/advcheckbox.php   |   3 +-
 .../lib/pear/HTML/QuickForm/autocomplete.php  |   3 +-
 main/inc/lib/pear/HTML/QuickForm/button.php   |   4 +-
 main/inc/lib/pear/HTML/QuickForm/checkbox.php |   4 +-
 main/inc/lib/pear/HTML/QuickForm/element.php  |   4 -
 main/inc/lib/pear/HTML/QuickForm/group.php    |   4 +-
 main/inc/lib/pear/HTML/QuickForm/header.php   |   6 +-
 main/inc/lib/pear/HTML/QuickForm/hidden.php   |   8 +-
 .../lib/pear/HTML/QuickForm/hiddenselect.php  |  10 +-
 main/inc/lib/pear/HTML/QuickForm/image.php    |  18 +--
 main/inc/lib/pear/HTML/QuickForm/select.php   |   4 +-
 main/inc/lib/pear/HTML/QuickForm/submit.php   |   5 +-
 main/inc/lib/pear/HTML/QuickForm/text.php     |   7 +-
 main/inc/lib/pear/HTML/QuickForm/textarea.php |   6 +-
 .../default/admin/settings_index.html.twig    |  76 ++++++-----
 main/template/default/macro/macro.tpl         | 118 ----------------
 .../Block/BreadcrumbBlockService.php          |  14 +-
 .../default/layout/hot_course_item.html.twig  | 118 ++++++++--------
 .../Twig/Extension/ChamiloExtension.php       |   2 +
 .../Breadcrumb/breadcrumb_legacy.html.twig    |   9 ++
 .../views/Layout/breadcrumb.html.twig         |   1 +
 .../Resources/views/Macros/box.html.twig      | 129 +++++++++++++++++-
 27 files changed, 306 insertions(+), 309 deletions(-)
 delete mode 100644 main/template/default/macro/macro.tpl
 create mode 100644 src/ThemeBundle/Resources/views/Breadcrumb/breadcrumb_legacy.html.twig

diff --git a/main/inc/lib/formvalidator/Element/DatePicker.php b/main/inc/lib/formvalidator/Element/DatePicker.php
index 81eac23a7e..65eea5f71a 100644
--- a/main/inc/lib/formvalidator/Element/DatePicker.php
+++ b/main/inc/lib/formvalidator/Element/DatePicker.php
@@ -123,8 +123,8 @@ class DatePicker extends HTML_QuickForm_text
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for} class="col-sm-'.$size[0].' control-label {extra_label_class}" >
+                <div class="form-group row {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' col-form-label {extra_label_class}" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/formvalidator/Element/DateTimePicker.php b/main/inc/lib/formvalidator/Element/DateTimePicker.php
index 1139c2aa4e..b83f08a6c4 100755
--- a/main/inc/lib/formvalidator/Element/DateTimePicker.php
+++ b/main/inc/lib/formvalidator/Element/DateTimePicker.php
@@ -115,8 +115,8 @@ class DateTimePicker extends HTML_QuickForm_text
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for} class="col-sm-'.$size[0].' control-label {extra_label_class}" >
+                <div class="form-group row {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' col-form-label {extra_label_class}" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/formvalidator/FormValidator.class.php b/main/inc/lib/formvalidator/FormValidator.class.php
index 1c61b4cc9a..a058785a83 100755
--- a/main/inc/lib/formvalidator/FormValidator.class.php
+++ b/main/inc/lib/formvalidator/FormValidator.class.php
@@ -7,10 +7,10 @@
  */
 class FormValidator extends HTML_QuickForm
 {
-    const LAYOUT_HORIZONTAL = 'horizontal';
-    const LAYOUT_INLINE = 'inline';
-    const LAYOUT_BOX = 'box';
-    const LAYOUT_BOX_NO_LABEL = 'box-no-label';
+    public const LAYOUT_HORIZONTAL = 'horizontal';
+    public const LAYOUT_INLINE = 'inline';
+    public const LAYOUT_BOX = 'box';
+    public const LAYOUT_BOX_NO_LABEL = 'box-no-label';
 
     public $with_progress_bar = false;
     private $layout;
@@ -133,8 +133,8 @@ EOT;
     public function getDefaultElementTemplate()
     {
         return '
-            <div class="form-group {error_class}">
-                <label {label-for} class="col-sm-2 control-label {extra_label_class}" >
+            <div class="form-group row {error_class}">
+                <label {label-for} class="col-sm-2 col-form-label {extra_label_class}" >
                     <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                     {label}
                 </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/Action.php b/main/inc/lib/pear/HTML/QuickForm/Action.php
index 20d71d434f..ec3761c7ac 100755
--- a/main/inc/lib/pear/HTML/QuickForm/Action.php
+++ b/main/inc/lib/pear/HTML/QuickForm/Action.php
@@ -1,9 +1,9 @@
-<?php
+<?php
 /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
-
-/**
+
+/**
  * Class representing an action to perform on HTTP request.
- *
+ *
  * PHP versions 4 and 5
  *
  * LICENSE: This source file is subject to version 3.01 of the PHP license
@@ -33,23 +33,21 @@
  * @author      Alexey Borzov <avb@php.net>
  * @version     Release: 1.0.10
  * @abstract
- */
-class HTML_QuickForm_Action
-{
-   /**
-    * Processes the request. This method should be overriden by child classes to
-    * provide the necessary logic.
-    *
+ */
+class HTML_QuickForm_Action
+{
+   /**
+    * Processes the request. This method should be overriden by child classes to
+    * provide the necessary logic.
+    *
     * @access   public
     * @param    HTML_QuickForm_Page    The current form-page
     * @param    string                 Current action name, as one Action object
     *                                  can serve multiple actions
     * @throws   PEAR_Error
     * @abstract
-    */
-    function perform(&$page, $actionName)
-    {
-    }
-}
-
-?>
+    */
+    function perform(&$page, $actionName)
+    {
+    }
+}
diff --git a/main/inc/lib/pear/HTML/QuickForm/advanced_settings.php b/main/inc/lib/pear/HTML/QuickForm/advanced_settings.php
index c86d2950c7..0cc5ddf190 100755
--- a/main/inc/lib/pear/HTML/QuickForm/advanced_settings.php
+++ b/main/inc/lib/pear/HTML/QuickForm/advanced_settings.php
@@ -46,24 +46,26 @@ class HTML_QuickForm_advanced_settings extends HTML_QuickForm_static
         $text = $this->getAttribute('label');
         $label = is_array($text) ? $text[0] : $text;
 
-        $html = '<div class="form-group"><div class="col-sm-10 col-sm-offset-2">';
+        $html = '<div class="form-group row"><label class="col-sm-2 col-form-label"></label>';
 
         if (is_array($text) && isset($text[1])) {
             $html .= '<span class="clearfix">'.$text[1].'</span>';
         }
 
-        $html .= '           
+        $html .= '  
+            <div class="col-sm-10">         
             <button id="'.$name.'" type="button" class="btn btn-default advanced_options"
                     data-toggle="button" aria-pressed="false" autocomplete="off">
                 <em class="fa fa-bars"></em> '.$label.'
             </button>
+            </div>
         ';
 
         if (is_array($text) && isset($text[2])) {
             $html .= '<div class="help-block">'.$text[2].'</div>';
         }
 
-        $html .= '</div></div>';
+        $html .= '</div>';
 
         return $html;
     }
diff --git a/main/inc/lib/pear/HTML/QuickForm/advcheckbox.php b/main/inc/lib/pear/HTML/QuickForm/advcheckbox.php
index a74fcd74a6..84d122bc88 100755
--- a/main/inc/lib/pear/HTML/QuickForm/advcheckbox.php
+++ b/main/inc/lib/pear/HTML/QuickForm/advcheckbox.php
@@ -277,5 +277,4 @@ class HTML_QuickForm_advcheckbox extends HTML_QuickForm_checkbox
         return $this->_prepareValue($value, $assoc);
     }
     // }}}
-} //end class HTML_QuickForm_advcheckbox
-?>
+}
diff --git a/main/inc/lib/pear/HTML/QuickForm/autocomplete.php b/main/inc/lib/pear/HTML/QuickForm/autocomplete.php
index 669107c3b3..e45242b985 100755
--- a/main/inc/lib/pear/HTML/QuickForm/autocomplete.php
+++ b/main/inc/lib/pear/HTML/QuickForm/autocomplete.php
@@ -249,5 +249,4 @@ EOS;
     }// end func toHtml
 
     // }}}
-} // end class HTML_QuickForm_autocomplete
-?>
+}
diff --git a/main/inc/lib/pear/HTML/QuickForm/button.php b/main/inc/lib/pear/HTML/QuickForm/button.php
index 9c496d47ca..34c090a4c8 100755
--- a/main/inc/lib/pear/HTML/QuickForm/button.php
+++ b/main/inc/lib/pear/HTML/QuickForm/button.php
@@ -235,8 +235,8 @@ class HTML_QuickForm_button extends HTML_QuickForm_input
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for} class="col-sm-'.$size[0].' control-label" >
+                <div class="form-group row {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' col-form-label" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/checkbox.php b/main/inc/lib/pear/HTML/QuickForm/checkbox.php
index af96986b12..a59750a3b5 100755
--- a/main/inc/lib/pear/HTML/QuickForm/checkbox.php
+++ b/main/inc/lib/pear/HTML/QuickForm/checkbox.php
@@ -195,8 +195,8 @@ class HTML_QuickForm_checkbox extends HTML_QuickForm_input
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for}  class="col-sm-'.$size[0].' control-label  {extra_label_class}" >
+                <div class="form-group row {error_class}">
+                    <label {label-for}  class="col-sm-'.$size[0].' col-form-label  {extra_label_class}" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/element.php b/main/inc/lib/pear/HTML/QuickForm/element.php
index f4050f2873..71c9e22f08 100755
--- a/main/inc/lib/pear/HTML/QuickForm/element.php
+++ b/main/inc/lib/pear/HTML/QuickForm/element.php
@@ -609,8 +609,4 @@ class HTML_QuickForm_element extends HTML_Common
 
         return $this;
     }
-
-
-
-
 }
diff --git a/main/inc/lib/pear/HTML/QuickForm/group.php b/main/inc/lib/pear/HTML/QuickForm/group.php
index 0f090aed30..6096bc68b7 100755
--- a/main/inc/lib/pear/HTML/QuickForm/group.php
+++ b/main/inc/lib/pear/HTML/QuickForm/group.php
@@ -568,8 +568,8 @@ class HTML_QuickForm_group extends HTML_QuickForm_element
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}" id="'.$this->getName().'-group">
-                    <label {label-for}  class="col-sm-'.$size[0].' control-label  {extra_label_class}" >
+                <div class="form-group row {error_class}" id="'.$this->getName().'-group">
+                    <label {label-for}  class="col-sm-'.$size[0].' col-form-label  {extra_label_class}" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/header.php b/main/inc/lib/pear/HTML/QuickForm/header.php
index 66e24da381..0148a789b1 100755
--- a/main/inc/lib/pear/HTML/QuickForm/header.php
+++ b/main/inc/lib/pear/HTML/QuickForm/header.php
@@ -65,8 +65,4 @@ class HTML_QuickForm_header extends HTML_QuickForm_static
     {
         $renderer->renderHeader($this);
     } // end func accept
-
-    // }}}
-
-} //end class HTML_QuickForm_header
-?>
+}
diff --git a/main/inc/lib/pear/HTML/QuickForm/hidden.php b/main/inc/lib/pear/HTML/QuickForm/hidden.php
index b6904ef349..b80cbc73e2 100755
--- a/main/inc/lib/pear/HTML/QuickForm/hidden.php
+++ b/main/inc/lib/pear/HTML/QuickForm/hidden.php
@@ -82,9 +82,5 @@ class HTML_QuickForm_hidden extends HTML_QuickForm_input
     function accept(&$renderer, $required=false, $error=null)
     {
         $renderer->renderHidden($this);
-    } // end func accept
-
-    // }}}
-
-} //end class HTML_QuickForm_hidden
-?>
+    }
+}
diff --git a/main/inc/lib/pear/HTML/QuickForm/hiddenselect.php b/main/inc/lib/pear/HTML/QuickForm/hiddenselect.php
index cddcc4722e..30e82f2608 100755
--- a/main/inc/lib/pear/HTML/QuickForm/hiddenselect.php
+++ b/main/inc/lib/pear/HTML/QuickForm/hiddenselect.php
@@ -95,10 +95,7 @@ class HTML_QuickForm_hiddenselect extends HTML_QuickForm_select
         }
 
         return $strHtml;
-    } //end func toHtml
-
-    // }}}
-    // {{{ accept()
+    }
 
    /**
     * This is essentially a hidden element and should be rendered as one
@@ -107,7 +104,4 @@ class HTML_QuickForm_hiddenselect extends HTML_QuickForm_select
     {
         $renderer->renderHidden($this);
     }
-
-    // }}}
-} //end class HTML_QuickForm_hiddenselect
-?>
+}
\ No newline at end of file
diff --git a/main/inc/lib/pear/HTML/QuickForm/image.php b/main/inc/lib/pear/HTML/QuickForm/image.php
index b3eeec250d..b734c0d60b 100755
--- a/main/inc/lib/pear/HTML/QuickForm/image.php
+++ b/main/inc/lib/pear/HTML/QuickForm/image.php
@@ -84,10 +84,7 @@ class HTML_QuickForm_image extends HTML_QuickForm_input
     function setBorder($border)
     {
         $this->updateAttributes(array('border' => $border));
-    } // end func setBorder
-
-    // }}}
-    // {{{ setAlign()
+    }
 
     /**
      * Sets alignment for image element
@@ -100,10 +97,7 @@ class HTML_QuickForm_image extends HTML_QuickForm_input
     function setAlign($align)
     {
         $this->updateAttributes(array('align' => $align));
-    } // end func setAlign
-
-    // }}}
-    // {{{ freeze()
+    }
 
     /**
      * Freeze the element so that only its value is returned
@@ -114,9 +108,5 @@ class HTML_QuickForm_image extends HTML_QuickForm_input
     function freeze()
     {
         return false;
-    } //end func freeze
-
-    // }}}
-
-} // end class HTML_QuickForm_image
-?>
+    }
+}
\ No newline at end of file
diff --git a/main/inc/lib/pear/HTML/QuickForm/select.php b/main/inc/lib/pear/HTML/QuickForm/select.php
index fe5468c97a..7a71eba651 100755
--- a/main/inc/lib/pear/HTML/QuickForm/select.php
+++ b/main/inc/lib/pear/HTML/QuickForm/select.php
@@ -620,8 +620,8 @@ class HTML_QuickForm_select extends HTML_QuickForm_element
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for}  class="col-sm-'.$size[0].' control-label  {extra_label_class}" >
+                <div class="form-group row {error_class}">
+                    <label {label-for}  class="col-sm-'.$size[0].' col-form-label {extra_label_class}" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/submit.php b/main/inc/lib/pear/HTML/QuickForm/submit.php
index 801917fae1..65f6ee8a5b 100755
--- a/main/inc/lib/pear/HTML/QuickForm/submit.php
+++ b/main/inc/lib/pear/HTML/QuickForm/submit.php
@@ -78,7 +78,4 @@ class HTML_QuickForm_submit extends HTML_QuickForm_input
     {
         return $this->_prepareValue($this->_findValue($submitValues), $assoc);
     }
-
-    // }}}
-} //end class HTML_QuickForm_submit
-?>
+}
\ No newline at end of file
diff --git a/main/inc/lib/pear/HTML/QuickForm/text.php b/main/inc/lib/pear/HTML/QuickForm/text.php
index ab972beb8c..e290185832 100755
--- a/main/inc/lib/pear/HTML/QuickForm/text.php
+++ b/main/inc/lib/pear/HTML/QuickForm/text.php
@@ -128,17 +128,18 @@ class HTML_QuickForm_text extends HTML_QuickForm_input
             case FormValidator::LAYOUT_INLINE:
                 return '
                 <div class="form-group {error_class}">
-                    <label {label-for} >
+                    <label class="sr-only"  {label-for} >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
+                    
                     {element}
                 </div>';
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for} class="col-sm-'.$size[0].' control-label" >
+                <div class="form-group row {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' col-form-label" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
diff --git a/main/inc/lib/pear/HTML/QuickForm/textarea.php b/main/inc/lib/pear/HTML/QuickForm/textarea.php
index 78979a547f..7906b1e5b7 100755
--- a/main/inc/lib/pear/HTML/QuickForm/textarea.php
+++ b/main/inc/lib/pear/HTML/QuickForm/textarea.php
@@ -245,8 +245,8 @@ class HTML_QuickForm_textarea extends HTML_QuickForm_element
                 break;
             case FormValidator::LAYOUT_HORIZONTAL:
                 return '
-                <div class="form-group {error_class}">
-                    <label {label-for} class="col-sm-'.$size[0].' control-label" >
+                <div class="form-group row {error_class}">
+                    <label {label-for} class="col-sm-'.$size[0].' col-form-label" >
                         <!-- BEGIN required --><span class="form_required">*</span><!-- END required -->
                         {label}
                     </label>
@@ -281,6 +281,4 @@ class HTML_QuickForm_textarea extends HTML_QuickForm_element
                 break;
         }
     }
-
-
 }
diff --git a/main/template/default/admin/settings_index.html.twig b/main/template/default/admin/settings_index.html.twig
index 3235d854bf..c89b522fde 100644
--- a/main/template/default/admin/settings_index.html.twig
+++ b/main/template/default/admin/settings_index.html.twig
@@ -1,3 +1,5 @@
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
+
 <script>
     $(document).ready(function () {
         $.ajax({
@@ -45,47 +47,47 @@
         {% for block_item in blocks %}
             {% if block_item.items %}
                 <div id="tabs-{{ loop.index }}" class="settings-block col-md-6">
-                    {#<div class="panel panel-default {{ block_item.class }}">#}
-                    <div class="card">
-                        <div class="card-header">
-                            {{ block_item.icon|raw }} {{ block_item.label }}
-                            {% if block_item.editable and _u.is_admin %}
-                                <button type="button" class="btn btn-link btn-sm admin-edit-block float-right"
-                                        data-label="{{ block_item.label }}" data-id="{{ block_item.class }}">
-                                    <img src="{{ "edit.png"|icon(22) }}" width="22" height="22"
-                                         alt="{{ "Edit"|get_lang }}" title="{{ "Edit"|get_lang }}"/>
-                                </button>
-                            {% endif %}
+                    {% set header %}
+                        {{ block_item.icon|raw }} {{ block_item.label }}
+                        {% if block_item.editable and _u.is_admin %}
+                            <button type="button" class="btn btn-link btn-sm admin-edit-block float-right"
+                                    data-label="{{ block_item.label }}" data-id="{{ block_item.class }}">
+                                <img src="{{ "edit.png"|icon(22) }}" width="22" height="22"
+                                     alt="{{ "Edit"|get_lang }}" title="{{ "Edit"|get_lang }}"/>
+                            </button>
+                        {% endif %}
+                    {% endset %}
+
+                    {% set content %}
+                        <div style="display: block;">
+                            {{ block_item.search_form|raw }}
                         </div>
-                        <div class="card-body">
-                            <div style="display: block;">
-                                {{ block_item.search_form|raw }}
+                        {% if block_item.items is not null %}
+                            <div class="block-items-admin">
+                                <ul class="list-items-admin">
+                                    {% for url in block_item.items %}
+                                        <li>
+                                            <a href="{{ url.url }}">
+                                                {{ url.label }}
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
                             </div>
-                            {% if block_item.items is not null %}
-                                <div class="block-items-admin">
-                                    <ul class="list-items-admin">
-                                        {% for url in block_item.items %}
-                                            <li>
-                                                <a href="{{ url.url }}">
-                                                    {{ url.label }}
-                                                </a>
-                                            </li>
-                                        {% endfor %}
-                                    </ul>
-                                </div>
-                            {% endif %}
+                        {% endif %}
 
-                            {% if block_item.extra is not null %}
-                                <div>
-                                    {{ block_item.extra|raw }}
-                                </div>
-                            {% endif %}
+                        {% if block_item.extra is not null %}
+                            <div>
+                                {{ block_item.extra|raw }}
+                            </div>
+                        {% endif %}
 
-                            {% if block_item.extraContent %}
-                                <div>{{ block_item.extraContent|raw }}</div>
-                            {% endif %}
-                        </div>
-                    </div>
+                        {% if block_item.extraContent %}
+                            <div>{{ block_item.extraContent|raw }}</div>
+                        {% endif %}
+                    {% endset %}
+
+                    {{ macro.panel(header, content) }}
                 </div>
             {% endif %}
         {% endfor %}
diff --git a/main/template/default/macro/macro.tpl b/main/template/default/macro/macro.tpl
deleted file mode 100644
index c47a9926d2..0000000000
--- a/main/template/default/macro/macro.tpl
+++ /dev/null
@@ -1,118 +0,0 @@
-{# special macros to generate repeated html code #}
-
-{% macro collapse(name, title, content, list = false) %}
-{% autoescape false %}
-    <div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
-        <div class="panel panel-default" id="{{ name }}_block">
-            <div class="panel-heading" role="tab">
-                <h4 class="panel-title">
-                    <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
-                        {{ title }}
-                    </a>
-                </h4>
-            </div>
-            <div style="" aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
-                <div class="panel-body">
-                    {% if list %}
-                        <ul class="nav nav-pills nav-stacked">
-                            {{ content }}
-                        </ul>
-                    {% else %}
-                        {{ content }}
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-{% endautoescape %}
-{% endmacro %}
-
-{% macro collapseFor(name, title, array) %}
-{% autoescape false %}
-<div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
-    <div class="panel panel-default" id="{{ name }}_block">
-        <div class="panel-heading" role="tab">
-            <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
-                    {{ title }}
-                </a>
-            </h4>
-        </div>
-        <div style="" aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
-            <div class="panel-body">
-                <ul class="nav nav-pills nav-stacked">
-                    {% for item in array %}
-                    <li>
-                        <a href="{{ item.link }}">{{ item.title }}</a>
-                    </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-{% endautoescape %}
-{% endmacro %}
-
-{% macro collapseMenu(name, title, array) %}
-{% autoescape false %}
-<div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
-    <div class="panel panel-default" id="{{ name }}_block">
-        <div class="panel-heading" role="tab">
-            <h4 class="panel-title">
-                <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
-                    {{ title }}
-                </a>
-            </h4>
-        </div>
-        <div aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
-            <div class="panel-body">
-                <ul class="list-group">
-                    {% for item in array %}
-                        <li class="list-group-item {{ item.class }}">
-                            <span class="item-icon">{{ item.icon }}</span>
-                            <a href="{{ item.link }}">{{ item.title }}</a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-{% endautoescape %}
-{% endmacro %}
-
-{% macro pluginSidebar(name, content) %}
-{% autoescape false %}
-    <div id="{{ name }}" class="plugin plugin_{{ name }}">
-        {{ content }}
-    </div>
-{% endautoescape %}
-{% endmacro %}
-
-{% macro pluginPanel(name, content) %}
-{% autoescape false %}
-    <div id="{{ name }}" class="plugin plugin_{{ name }}">
-        <div class="row">
-            <div class="col-md-12">
-                {{ content }}
-            </div>
-        </div>
-    </div>
-{% endautoescape %}
-{% endmacro %}
-
-
-{% macro panel(name, content, footer = '') %}
-{% autoescape false %}
-<div class="panel panel-default">
-    <div class="panel-heading"> {{ name }}</div>
-    <div class="panel-body">
-        {{ content }}
-    </div>
-    {% if footer %}
-        <div class="panel-footer">{{ footer }}</div>
-    {% endif %}
-</div>
-{% endautoescape %}
-{% endmacro %}
\ No newline at end of file
diff --git a/src/CoreBundle/Block/BreadcrumbBlockService.php b/src/CoreBundle/Block/BreadcrumbBlockService.php
index f6e85299b6..f4578d3c46 100644
--- a/src/CoreBundle/Block/BreadcrumbBlockService.php
+++ b/src/CoreBundle/Block/BreadcrumbBlockService.php
@@ -33,7 +33,8 @@ class BreadcrumbBlockService extends BaseBreadcrumbMenuBlockService
         parent::configureSettings($resolver);
 
         $resolver->setDefaults([
-            'menu_template' => 'SonataSeoBundle:Block:breadcrumb.html.twig',
+            //'menu_template' => 'SonataSeoBundle:Block:breadcrumb.html.twig',
+            'menu_template' => 'ChamiloThemeBundle:Breadcrumb:breadcrumb_legacy.html.twig',
             'include_homepage_link' => false,
             'context' => false,
         ]);
@@ -82,9 +83,7 @@ class BreadcrumbBlockService extends BaseBreadcrumbMenuBlockService
         }
 
         // Load legacy breadcrumbs
-        $oldBreadCrumb = $blockContext->getBlock()->getSetting(
-            'legacy_breadcrumb'
-        );
+        $oldBreadCrumb = $blockContext->getBlock()->getSetting('legacy_breadcrumb');
 
         if ($oldBreadCrumb) {
             foreach ($oldBreadCrumb as $data) {
@@ -100,6 +99,13 @@ class BreadcrumbBlockService extends BaseBreadcrumbMenuBlockService
             }
         }
 
+        // Set CSS classes for the items
+        foreach ($menu->getChildren() as $child) {
+            $child
+                //->setLinkAttribute('class', 'nav-link')
+                ->setAttribute('class', 'breadcrumb-item');
+        }
+
         return $menu;
     }
 }
diff --git a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig b/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
index 7b0c2fc443..2e252148f3 100644
--- a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
+++ b/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
@@ -1,75 +1,81 @@
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
+
 {% autoescape false %}
 {% for item in hot_courses %}
     {% if item.title %}
         <div class="col-xs-12 col-sm-6 col-md-4">
-            <div class="items items-hotcourse">
+            {% set image %}
+                {% if item.is_registered %}
+                    <a title="{{ item.title}}" href="{{ item.course_public_url }}">
+                        <img src="{{ item.course_image_large }}" class="card-img-top" alt="{{ item.title }}">
+                    </a>
+                {% else %}
+                    <img src="{{ item.course_image_large }}" class="card-img-top" alt="{{ item.title }}">
+                {% endif %}
+            {% endset %}
+
+            {% set content %}
+                {% if item.categoryName != '' %}
+                    <span class="category">{{ item.categoryName }}</span>
+                    <div class="cribbon"></div>
+                {% endif %}
 
-                <div class="image">
+                <div class="card-title">
+                    <div class="user-actions">{{ item.description_button }}</div>
                     {% if item.is_registered %}
-                        <a title="{{ item.title}}" href="{{ item.course_public_url }}">
-                            <img src="{{ item.course_image_large }}" class="img-responsive" alt="{{ item.title }}">
-                        </a>
+                        <h4 class="title">
+                            <a alt="{{ item.title }}" title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title_cut}}</a>
+                        </h4>
                     {% else %}
-                        <img src="{{ item.course_image_large }}" class="img-responsive" alt="{{ item.title }}">
-                    {% endif %}
-                    {% if item.categoryName != '' %}
-                        <span class="category">{{ item.categoryName }}</span>
-                        <div class="cribbon"></div>
+                        <h4 class="title" title="{{ item.title }}">
+                            {{ item.title_cut}}
+                        </h4>
                     {% endif %}
-                    <div class="user-actions">{{ item.description_button }}</div>
                 </div>
-                <div class="description">
-                    <div class="block-title">
-                        {% if item.is_registered %}
-                            <h4 class="title">
-                                <a alt="{{ item.title }}" title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title_cut}}</a>
-                            </h4>
+
+                <div class="ranking">
+                    {{ item.rating_html }}
+                </div>
+
+                <div class="block-author">
+                    {% for teacher in item.teachers %}
+                        {% if item.teachers | length > 2 %}
+                            <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
+                            </a>
                         {% else %}
-                            <h4 class="title" title="{{ item.title }}">
-                                {{ item.title_cut}}
-                            </h4>
+                            <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
+                            </a>
+                            <div class="teachers-details">
+                                <h5>
+                                    <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                        {{ teacher.firstname }} {{ teacher.lastname }}
+                                    </a>
+                                </h5>
+                                <p>{{ 'Teacher' | get_lang }}</p>
+                            </div>
                         {% endif %}
-                    </div>
-                    <div class="ranking">
-                        {{ item.rating_html }}
-                    </div>
-                    <div class="block-author">
-                        {% for teacher in item.teachers %}
+                    {% endfor %}
+                </div>
 
-                            {% if item.teachers | length > 2 %}
-                                <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                    <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
-                                </a>
-                            {% else %}
-                                <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                    <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
-                                </a>
-                                <div class="teachers-details">
-                                    <h5>
-                                        <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                            {{ teacher.firstname }} {{ teacher.lastname }}
-                                        </a>
-                                    </h5>
-                                    <p>{{ 'Teacher' | get_lang }}</p>
-                                </div>
-                            {% endif %}
-                        {% endfor %}
+                <div class="toolbar row">
+                    <div class="col-sm-4">
+                        {#{% if item.price %}#}
+                        {#{{ item.price }}#}
+                        {#{% endif %}#}
                     </div>
-                    <div class="toolbar row">
-                        <div class="col-sm-4">
-                            {#{% if item.price %}#}
-                                {#{{ item.price }}#}
-                            {#{% endif %}#}
-                        </div>
-                        <div class="col-sm-8">
-                            <div class="btn-group" role="group">
-                                {{ item.register_button }}
-                                {#{{ item.unsubscribe_button }}#}
-                            </div>
+                    <div class="col-sm-8">
+                        <div class="btn-group" role="group">
+                            {{ item.register_button }}
+                            {#{{ item.unsubscribe_button }}#}
                         </div>
                     </div>
                 </div>
-            </div>
+            {% endset %}
+
+            {{ macro.panel('', content, '', '', '', image) }}
+
         </div>
     {% endif %}
 {% endfor %}
diff --git a/src/CoreBundle/Twig/Extension/ChamiloExtension.php b/src/CoreBundle/Twig/Extension/ChamiloExtension.php
index 7336d015bb..bf2e0a1544 100644
--- a/src/CoreBundle/Twig/Extension/ChamiloExtension.php
+++ b/src/CoreBundle/Twig/Extension/ChamiloExtension.php
@@ -26,6 +26,8 @@ class ChamiloExtension extends \Twig_Extension
             new \Twig_SimpleFilter('api_is_allowed_to_edit', 'api_is_allowed_to_edit'),
             new \Twig_SimpleFilter('format_date', 'Template::format_date'),
             new \Twig_SimpleFilter('date_to_time_ago', 'Display::dateToStringAgoAndLongDate'),
+            new \Twig_SimpleFilter('api_get_configuration_value', 'api_get_configuration_value'),
+
         ];
     }
 
diff --git a/src/ThemeBundle/Resources/views/Breadcrumb/breadcrumb_legacy.html.twig b/src/ThemeBundle/Resources/views/Breadcrumb/breadcrumb_legacy.html.twig
new file mode 100644
index 0000000000..69df79f871
--- /dev/null
+++ b/src/ThemeBundle/Resources/views/Breadcrumb/breadcrumb_legacy.html.twig
@@ -0,0 +1,9 @@
+{% extends '@KnpMenu/menu.html.twig' %}
+
+{% block list %}
+    {% spaceless %}
+        <nav aria-label="breadcrumb">
+            {{ parent() }}
+        </nav>
+    {% endspaceless %}
+{% endblock%}
\ No newline at end of file
diff --git a/src/ThemeBundle/Resources/views/Layout/breadcrumb.html.twig b/src/ThemeBundle/Resources/views/Layout/breadcrumb.html.twig
index 31c4b9258d..92faf6f9f4 100644
--- a/src/ThemeBundle/Resources/views/Layout/breadcrumb.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/breadcrumb.html.twig
@@ -1,4 +1,5 @@
 {% autoescape false %}
+
     {% if course is not defined %}
         {% set course = '' %}
     {% endif %}
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index 4ea6ad236d..b51426f606 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/src/ThemeBundle/Resources/views/Macros/box.html.twig
@@ -50,14 +50,137 @@
     </li>
 {% endmacro %}
 
+{% macro collapse(name, title, content, list = false) %}
+    {% autoescape false %}
+        <div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default" id="{{ name }}_block">
+                <div class="panel-heading" role="tab">
+                    <h4 class="panel-title">
+                        <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
+                            {{ title }}
+                        </a>
+                    </h4>
+                </div>
+                <div style="" aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
+                    <div class="panel-body">
+                        {% if list %}
+                            <ul class="nav nav-pills nav-stacked">
+                                {{ content }}
+                            </ul>
+                        {% else %}
+                            {{ content }}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}
+
+{% macro collapseFor(name, title, array) %}
+    {% autoescape false %}
+        <div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default" id="{{ name }}_block">
+                <div class="panel-heading" role="tab">
+                    <h4 class="panel-title">
+                        <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
+                            {{ title }}
+                        </a>
+                    </h4>
+                </div>
+                <div style="" aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
+                    <div class="panel-body">
+                        <ul class="nav nav-pills nav-stacked">
+                            {% for item in array %}
+                                <li>
+                                    <a href="{{ item.link }}">{{ item.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}
+
+{% macro collapseMenu(name, title, array) %}
+    {% autoescape false %}
+        <div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default" id="{{ name }}_block">
+                <div class="panel-heading" role="tab">
+                    <h4 class="panel-title">
+                        <a role="button" data-toggle="collapse" data-parent="#{{ name }}" href="#{{ name }}Collapse" aria-expanded="true" aria-controls="{{ name }}Collapse">
+                            {{ title }}
+                        </a>
+                    </h4>
+                </div>
+                <div aria-expanded="true" id="{{ name }}Collapse" class="panel-collapse collapse in" role="tabpanel">
+                    <div class="panel-body">
+                        <ul class="list-group">
+                            {% for item in array %}
+                                <li class="list-group-item {{ item.class }}">
+                                    <span class="item-icon">{{ item.icon }}</span>
+                                    <a href="{{ item.link }}">{{ item.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}
+
+{% macro pluginSidebar(name, content) %}
+    {% autoescape false %}
+        <div id="{{ name }}" class="plugin plugin_{{ name }}">
+            {{ content }}
+        </div>
+    {% endautoescape %}
+{% endmacro %}
 
-{% macro panel(title, content) %}
+{% macro pluginPanel(name, content) %}
+    {% autoescape false %}
+        <div id="{{ name }}" class="plugin plugin_{{ name }}">
+            <div class="row">
+                <div class="col-md-12">
+                    {{ content }}
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}
+
+
+{% macro panel(header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
         <div class="card">
-            <div class="card-header"> {{ title }} </div>
+            {% if top_image %}
+                {{ top_image }}
+            {% endif %}
+
+            {% if header %}
+                <div class="card-header"> {{ header }} </div>
+            {% endif %}
+
             <div class="card-body">
-                {{ content }}
+                {% if title %}
+                    <h5 class="card-title">{{ title }}</h5>
+                {% endif %}
+                {% if subtitle %}
+                    <h5 class="card-subtitle mb-2 text-muted">{{ subtitle }}</h5>
+                {% endif %}
+                <p class="card-text">
+                    {{ content }}
+                </p>
             </div>
+
+            {% if footer %}
+                <div class="card-footer">
+                    {{ footer }}
+                </div>
+            {% endif %}
         </div>
     {% endautoescape %}
 {% endmacro %}