Minor - fix div panels, improve UI because bootstrap 4

main/course_description/course_description_controller.php

@@ -119,6 +119,7 @@ class CourseDescriptionController
         $tpl->assign('is_allowed_to_edit', $is_allowed_to_edit);
         $tpl->assign('actions', $actions);
         $tpl->assign('session_id', $session_id);
+        $tpl->assign('c_id', api_get_course_int_id());
         $templateName = $tpl->get_template('course_description/index.tpl');
         $content = $tpl->fetch($templateName);
         $tpl->assign('content', $content);

main/course_info/infocours.php

@@ -349,26 +349,9 @@ $form->addPanelOption(
 );
 
 // EMAIL NOTIFICATIONS
-$form->addHtml('<div class="panel panel-default">');
+
-$form->addHtml('
+$globalGroup = [];
-    <div class="panel-heading" role="tab" id="heading-email-notifications">
+
-        <h4 class="panel-title">
-            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
-               href="#collapse-email-notifications" aria-expanded="false" aria-controls="collapse-email-notifications">
-');
-$form->addHtml(
-    Display::return_icon('mail.png', get_lang('EmailNotifications')).' '.get_lang('EmailNotifications')
-);
-$form->addHtml('
-            </a>
-        </h4>
-    </div>
-');
-$form->addHtml('
-    <div id="collapse-email-notifications" class="panel-collapse collapse" role="tabpanel"
-         aria-labelledby="heading-email-notifications">
-        <div class="panel-body">
-');
 $group = [];
 $group[] = $form->createElement(
     'radio',
@@ -391,7 +374,7 @@ $group[] = $form->createElement(
     get_lang('NewUserEmailAlertDisable'),
     0
 );
-$form->addGroup($group, '', [get_lang("NewUserEmailAlert")]);
+$globalGroup[get_lang('NewUserEmailAlert')] = $group;
 
 $group = [];
 $group[] = $form->createElement(
@@ -415,7 +398,8 @@ $group[] = $form->createElement(
     get_lang('NewHomeworkEmailAlertDisable'),
     0
 );
-$form->addGroup($group, '', [get_lang("NewHomeworkEmailAlert")]);
+$globalGroup[get_lang('NewHomeworkEmailAlert')] = $group;
+
 
 $group = [];
 $group[] = $form->createElement(
@@ -446,7 +430,8 @@ $group[] = $form->createElement(
     get_lang('WorkEmailAlertDeactivate'),
     0
 );
-$form->addGroup($group, '', [get_lang("WorkEmailAlert")]);
+
+$globalGroup[get_lang('WorkEmailAlert')] = $group;
 
 $group = [];
 $group[] = $form->createElement(
@@ -463,7 +448,8 @@ $group[] = $form->createElement(
     get_lang('DropboxEmailAlertDeactivate'),
     0
 );
-$form->addGroup($group, '', [get_lang("DropboxEmailAlert")]);
+
+$globalGroup[get_lang('DropboxEmailAlert')] = $group;
 
 // Exercises notifications
 $emailAlerts = ExerciseLib::getNotificationSettings();
@@ -478,7 +464,7 @@ foreach ($emailAlerts as $itemId => $label) {
     );
 }
 
-$form->addGroup($group, '', [get_lang('Exercises')]);
+$globalGroup[get_lang('Exercises')] = $group;
 
 $group = [];
 $group[] = $form->createElement(
@@ -495,15 +481,18 @@ $group[] = $form->createElement(
     get_lang('No'),
     2
 );
-$form->addGroup($group, '', [get_lang("EmailToTeachersWhenNewWorkFeedback")]);
 
-$form->addButtonSave(get_lang('SaveSettings'), 'submit_save');
+$globalGroup[get_lang('EmailToTeachersWhenNewWorkFeedback')] = $group;
+
+$myButton = $form->addButtonSave(get_lang('SaveSettings'), 'submit_save', true);
+$globalGroup[] = $myButton;
+
+$form->addPanelOption(
+    'email-notifications',
+    Display::return_icon('mail.png', get_lang('EmailNotifications')).' '.get_lang('EmailNotifications'),
+    $globalGroup
+);
 
-$form->addHtml('
-        </div>
-    </div>
-');
-$form->addHtml('</div>');
 
 $group = [];
 $group[] = $form->createElement(
@@ -705,7 +694,7 @@ if ($exerciseInvisible === 'true' &&
             0
         ),
     ];
-    $form->addGroup($group, '', [get_lang("ExerciseInvisibleInSession")]);
+    $form->addGroup($group, '', [get_lang('ExerciseInvisibleInSession')]);
 }
 
 if (is_settings_editable()) {

main/inc/lib/display.lib.php

@@ -2449,8 +2449,9 @@ class Display
             $headerStyle = 'style = "color: white; background-color: '.$customColor.'" ';
         }
 
-        $title = !empty($title) ? '<div class="panel-heading" '.$headerStyle.' ><h3 class="panel-title">'.$title.'</h3>'.$extra.'</div>' : '';
+        //$title = !empty($title) ? '<div class="panel-heading" '.$headerStyle.' ><h3 class="panel-title">'.$title.'</h3>'.$extra.'</div>' : '';
-        $footer = !empty($footer) ? '<div class="panel-footer">'.$footer.'</div>' : '';
+        $title = !empty($title) ? '<h4 class="card-header">'.$title.'</h4>'.$extra : '';
+        $footer = !empty($footer) ? '<div class="card-footer">'.$footer.'</div>' : '';
         $typeList = ['primary', 'success', 'info', 'warning', 'danger'];
         $style = !in_array($type, $typeList) ? 'default' : $type;
 
@@ -2458,8 +2459,9 @@ class Display
             $id = " id='$id'";
         }
 
+        //<div '.$id.' class="panel panel-'.$style.'">
         return '
-            <div '.$id.' class="panel panel-'.$style.'">
+            <div '.$id.' class="card">
                 '.$title.'
                 '.self::contentPanel($content).'
                 '.$footer.'
@@ -2472,13 +2474,13 @@ class Display
      *
      * @return string
      */
-    public static function contentPanel($content)
+    public static function contentPanel($content): string
     {
         if (empty($content)) {
             return '';
         }
 
-        return '<div class="panel-body">'.$content.'</div>';
+        return '<div class="card-text">'.$content.'</div>';
     }
 
     /**
@@ -2531,7 +2533,7 @@ class Display
             });
         }
 
-        $html = '<div id="'.$id.'" class="actions">';
+        $html = '<div id="'.$id.'" >';
         $html .= '<div class="row">';
 
         for ($i = 0; $i < $col; $i++) {
@@ -2628,31 +2630,26 @@ class Display
             $contentClass = 'panel-collapse collapse ';
             $contentClass .= $open ? 'in' : '';
             $ariaExpanded = $open ? 'true' : 'false';
+$html = <<<HTML
             
-            $html = <<<HTML
+                <div class="card" id="$id">
-                <div class="panel-group" id="$idAccordion" role="tablist" aria-multiselectable="true">
+                    <div class="card-header">                        
-                    <div class="panel panel-default" id="$id">
+                        $title                        
-                        <div class="panel-heading" role="tab">
-                            <h4 class="panel-title">
-                                <a class="$headerClass" role="button" data-toggle="collapse" data-parent="#$idAccordion" href="#$idCollapse" aria-expanded="$ariaExpanded" aria-controls="$idCollapse">$title</a>
-                            </h4>
-                        </div>
-                        <div id="$idCollapse" class="$contentClass" role="tabpanel">
-                            <div class="panel-body">$content</div>
-                        </div>
                     </div>                    
+                    <div class="card-body">$content</div>                    
                 </div>
+            
 HTML;
         } else {
             if (!empty($id)) {
                 $params['id'] = $id;
             }
-            $params['class'] = 'panel panel-default';
+            $params['class'] = 'card';
             $html = null;
             if (!empty($title)) {
-                $html .= '<div class="panel-heading">'.$title.'</div>'.PHP_EOL;
+                $html .= '<div class="card-header">'.$title.'</div>'.PHP_EOL;
             }
-            $html .= '<div class="panel-body">'.$content.'</div>'.PHP_EOL;
+            $html .= '<div class="card-body">'.$content.'</div>'.PHP_EOL;
             $html = self::div($html, $params);
         }
 

main/inc/lib/formvalidator/FormValidator.class.php

@@ -947,7 +947,7 @@ EOT;
      */
     public function addPanelOption($name, $title, $groupList)
     {
-        $this->addHtml('<div class="panel panel-default">');
+        /*$this->addHtml('<div class="panel panel-default">');
         $this->addHtml(
             '
             <div class="panel-heading" role="tab" id="heading-'.$name.'-settings">
@@ -975,6 +975,32 @@ EOT;
         }
 
         $this->addHtml('</div></div>');
+        $this->addHtml('</div>');*/
+
+        $this->addHtml('<div class="card">');
+        $this->addHtml(
+            '            
+                <h4 class="card-header">
+                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
+                       href="#collapse-'.$name.'-settings" aria-expanded="false" aria-controls="collapse-'.$name.'-settings">
+        '
+        );
+        $this->addHtml($title);
+        $this->addHtml('</a></h4>');
+        $this->addHtml('<div class="card-body">');
+
+        foreach ($groupList as $groupName => $group) {
+            // Add group array
+            if (!empty($groupName) && is_array($group)) {
+                $this->addGroup($group, '', $groupName);
+            }
+            // Add element
+            if ($group instanceof HTML_QuickForm_element) {
+                $this->addElement($group);
+            }
+        }
+
+        $this->addHtml('</div>');
         $this->addHtml('</div>');
     }
 

main/inc/lib/social.lib.php

@@ -940,7 +940,7 @@ class SocialManager extends UserManager
             $show,
             ['shared_profile', 'groups', 'group_edit', 'member_list', 'waiting_list', 'invite_friends']
         )) {
-            $links = '<ul class="nav nav-pills nav-stacked">';
+            $links = '<ul class="nav navbar-nav">';
             $active = $show == 'home' ? 'active' : null;
             $links .= '
                 <li class="home-icon '.$active.'">
@@ -1052,7 +1052,7 @@ class SocialManager extends UserManager
         }
 
         if ($show == 'shared_profile') {
-            $links = '<ul class="nav nav-pills nav-stacked">';
+            $links = '<ul class="nav navbar-nav">';
             // My own profile
             if ($show_full_profile && $user_id == intval(api_get_user_id())) {
                 $links .= '
@@ -1966,12 +1966,10 @@ class SocialManager extends UserManager
         $template->assign('user_relation', $userRelationType);
         $template->assign('user_relation_type_friend', USER_RELATION_TYPE_FRIEND);
         $template->assign('show_full_profile', $show_full_profile);
-        $templateName = $template->get_template('social/user_block.tpl');
-
-        if (in_array($groupBlock, ['groups', 'group_edit', 'member_list'])) {
-            $templateName = $template->get_template('social/group_block.tpl');
-        }
 
+        $inGroup = in_array($groupBlock, ['groups', 'group_edit', 'member_list']);
+        $template->assign('in_group', $inGroup);
+        $templateName = $template->get_template('social/user_block.tpl');
         $template->assign('social_avatar_block', $template->fetch($templateName));
     }
 

main/social/home.php

@@ -82,7 +82,7 @@ $social_menu_block = SocialManager::show_social_menu('home');
 
 $social_search_block = Display::panel(
     UserManager::get_search_form(''),
-    get_lang("SearchUsers")
+    get_lang('SearchUsers')
 );
 
 $results = $userGroup->get_groups_by_age(1, false);

main/template/default/admin/settings_index.html.twig

@@ -45,18 +45,19 @@
     {% 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="panel panel-default {{ block_item.class }}">#}
-                    <div class="panel-heading">
+                <div class="card">
+                    <div class="card-header">
                         {{ block_item.icon }} {{ block_item.label }}
                         {% if block_item.editable and _u.is_admin %}
-                            <button type="button" class="btn btn-link btn-sm admin-edit-block pull-right"
+                            <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 %}
                     </div>
-                    <div class="panel-body">
+                    <div class="card-body">
                         <div style="display: block;">
                             {{ block_item.search_form }}
                         </div>

main/template/default/social/edit_profile.html.twig

@@ -6,6 +6,9 @@
         <div class="col-md-3">
             <div class="social-network-menu">
                 {{ social_avatar_block }}
+
+                {% extends "@ChamiloTheme/Layout/base-layout.html.twig" %}
+
                 {{ social_menu_block }}
             </div>
         </div>

main/template/default/social/group_block.html.twig

@@ -1 +0,0 @@
-{{ social_avatar_block }}

main/template/default/social/home.html.twig

@@ -1,4 +1,5 @@
 {% extends "@ChamiloTheme/Layout/layout_one_col.html.twig" %}
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
 
 {% block content %}
 {% autoescape false %}
@@ -19,39 +20,10 @@
             {{ social_auto_extend_link }}
         </div>
         <div class="col-md-3">
-            <!-- Block chat list -->
+            {{ macro.panel("SocialFriend" | get_lang, social_friend_block ) }}
-            <div class="chat-friends">
-                <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-default">
-                        <div class="panel-heading" role="tab" id="headingOne">
-                            <h4 class="panel-title">
-                                <a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
-                                    {{ "SocialFriend" | get_lang }}
-                                </a>
-                            </h4>
-                        </div>
-                        <div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                            <div class="panel-body">
-                                {{ social_friend_block }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
             <!-- Block session list -->
-            {% if session_list != null %}
+            {% set sessionList %}
-            <div class="panel-group" id="session-block" role="tablist" aria-multiselectable="true">
-                <div class="panel panel-default">
-                    <div class="panel-heading" role="tab" id="headingOne">
-                        <h4 class="panel-title">
-                            <a role="button" data-toggle="collapse" data-parent="#session-block" href="#sessionList" aria-expanded="true" aria-controls="sessionList">
-                               {{ "MySessions" | get_lang }}
-                            </a>
-                        </h4>
-                    </div>
-                    <div id="sessionList" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                        <div class="panel-body">
                 <ul class="list-group">
                     {% for session in session_list %}
                         <li id="session_{{ session.id }}" class="list-group-item" style="min-height:65px;">
@@ -60,11 +32,9 @@
                         </li>
                     {% endfor %}
                 </ul>
-                        </div>
+            {% endset %}
-                    </div>
+
-                </div>
+            {{ macro.panel("MySessions" | get_lang, sessionList) }}
-             </div>
-             {% endif %}
         </div>
     </div>
 {% endautoescape %}

main/template/default/social/user_block.html.twig

@@ -1,16 +1,8 @@
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
+
 {% autoescape false %}
 <div class="sidebar-avatar">
-    <div class="panel-group" id="sn-avatar" role="tablist" aria-multiselectable="true">
+    {% set profile_body %}
-        <div class="panel panel-default">
-            <div class="panel-heading" role="tab" id="heading-sn">
-                <h4 class="panel-title">
-                    <a role="button" data-toggle="collapse" data-parent="#sn-avatar" href="#sn-avatar-one" aria-expanded="true" aria-controls="sn-avatar-one">
-                    {{ "Profile" | get_lang }}
-                    </a>
-                </h4>
-            </div>
-            <div id="sn-avatar-one" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-sn">
-                <div class="panel-body">
         {{ social_avatar_block }}
         <ul class="list-user-data">
             <li class="item">
@@ -89,9 +81,7 @@
                 </li>
             {% endif %}
         </ul>
-                </div>
+    {% endset %}
-            </div>
+    {{ macro.panel("Profile" | get_lang, profile_body ) }}
-        </div>
-    </div>
 </div>
 {% endautoescape %}

src/CoreBundle/Menu/LeftMenuBuilder.php

@@ -156,7 +156,7 @@ class LeftMenuBuilder implements ContainerAwareInterface
         $translator = $this->container->get('translator');
 
         if ($security->isGranted('IS_AUTHENTICATED_FULLY')) {
-            $menu->setChildrenAttribute('class', 'nav nav-pills nav-stacked');
+            $menu->setChildrenAttribute('class', 'navbar-nav');
 
             $menu->addChild(
                 $translator->trans('Inbox'),
@@ -219,6 +219,13 @@ class LeftMenuBuilder implements ContainerAwareInterface
             );
         }
 
+        // Set CSS classes for the items
+        foreach ($menu->getChildren() as $child) {
+            $child
+                ->setLinkAttribute('class', 'nav-link')
+                ->setAttribute('class', 'nav-item');
+        }
+
         return $menu;
     }
 

src/ThemeBundle/Resources/views/Layout/base-layout.html.twig

@@ -93,7 +93,6 @@
                 </div>
             </section>
 
-
             {# menu #}
             {% block chamilo_menu %}
                 <div id="menu-bar">
@@ -107,6 +106,7 @@
         </header>
         {% endblock %}
 
+        {#<div id="top_main_content" class="container">#}
         <div id="top_main_content" class="container">
         {# course navigation links/shortcuts need to be activated by the admin #}
         {% include "@ChamiloTheme/Layout/course_navigation.html.twig" %}
@@ -123,7 +123,6 @@
             {#</header>#}
         {% block page_content %}
         {% endblock %}
-
         </div> {# end top_main_content #}
     </div> {# End page-wrap div #}
     {% block chamilo_footer %}

src/ThemeBundle/Resources/views/Layout/layout_one_col.html.twig

@@ -28,7 +28,6 @@
     {% endif %}
 
     <section id="content-section">
-        <div class="container">
         <div class="row">
             <div class="col-xs-12 col-md-12">
                 {% autoescape false %}
@@ -57,7 +56,6 @@
                 {% endautoescape %}
             </div>
         </div>
-        </div>
     </section>
 
      {% if plugin_content_bottom %}

src/ThemeBundle/Resources/views/Layout/layout_two_col.html.twig

@@ -6,6 +6,7 @@
 {#%}#}
 
 {% block page_content %}
+    <div class="row">
         {% autoescape false %}
         {% if plugin_main_top %}
         <div id="plugin_main_top" class="col-md-12">
@@ -76,6 +77,7 @@
         <div id="plugin_main_bottom" class="col-md-12">
             {{ plugin_main_bottom }}
         </div>
+    </div>
     {% endif %}
     {% endautoescape %}
 {% endblock %}

src/ThemeBundle/Resources/views/Macros/box.html.twig

@@ -53,13 +53,9 @@
 
 {% macro panel(title, content) %}
     {% autoescape false %}
-        <div class="panel panel-default">
+        <div class="card">
-            <div class="panel-heading">
+            <div class="card-header"> {{ title }} </div>
-                <div class="panel-title">
+            <div class="card-body">
-                    <h4> {{ title }} </h4>
-                </div>
-            </div>
-            <div class="panel-body">
                 {{ content }}
             </div>
         </div>

src/ThemeBundle/Resources/views/Sidebar/left_menu.html.twig

@@ -5,22 +5,22 @@
 {% if is_granted('IS_AUTHENTICATED_FULLY') %}
     {{ macro.panel(
         'Profile' | trans,
-        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:profileMenu', {'automenu': 'pills', 'stacked':true})
+        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:profileMenu', {'automenu': 'navbar', 'stacked':false})
     ) }}
 
     {{ macro.panel(
         'Courses' | trans,
-        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:courseMenu', {'automenu': 'pills', 'stacked':true})
+        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:courseMenu', {'automenu': 'navbar', 'stacked':false})
     ) }}
 
     {{ macro.panel(
         'Sessions' | trans,
-        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:sessionMenu', {'automenu': 'pills', 'stacked':true})
+        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:sessionMenu', {'automenu': 'navbar', 'stacked':false})
     ) }}
 
     {{ macro.panel(
         'Skills' | trans,
-        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:skillsMenu', {'automenu': 'pills', 'stacked':true})
+        mopa_bootstrap_menu('ChamiloCoreBundle:LeftMenuBuilder:skillsMenu', {'automenu': 'navbar', 'stacked':false})
     ) }}
 {% else %}
     {# Plugin login before/after tpls #}