Minor - improve UI using bootstrap 4 elements

assets/css/base.css

@@ -689,7 +689,7 @@ select {
     border: 1px solid #e4e4e4;
     box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
 }
-
+/*
 .card {
     border-radius: 6px;
     box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
@@ -761,7 +761,7 @@ select {
 
 .card .card-title a {
     font-weight: bold;
-}
+}*/
 
 .panel-view {
     padding: 20px;

main/inc/lib/display.lib.php

@@ -2698,26 +2698,18 @@ HTML;
         }
 
         if (!empty($toolbar)) {
-            $toolbar = '<div class="btn-group pull-right">'.$toolbar.'</div>';
+            $toolbar = '<div class="btn-group float-right">'.$toolbar.'</div>';
         }
 
-        return '<div id="user_card_'.$userInfo['id'].'" class="col-md-12">                    
-                    <div class="row">
-                        <div class="col-md-2">                            
-                            <img src="'.$userInfo['avatar'].'" class="img-responsive img-circle">
-                        </div>
-                        <div class="col-md-10">
-                           <p>'.$userInfo['complete_name'].'</p>
-                           <div class="row">
-                           <div class="col-md-2">
+        return '<div id="user_card_'.$userInfo['id'].'" class="card d-flex flex-row">                    
+                    <img src="'.$userInfo['avatar'].'" class="rounded">
+                    <h3 class="card-title">'.$userInfo['complete_name'].'</h3>                    
+                    <div class="card-body">                       
+                       <div class="card-title">
                        '.$status.'
-                           </div>
-                           <div class="col-md-10">                           
                        '.$toolbar.'
                        </div> 
                     </div>
-                        </div>
-                    </div>
                     <hr />
               </div>';
     }

main/inc/lib/social.lib.php

@@ -1947,7 +1947,6 @@ class SocialManager extends UserManager
         $template->assign('social_avatar_block', $socialAvatarBlock);
         $template->assign('profile_edition_link', $profileEditionLink);
         // Added the link to export the vCard to the Template
-
         // If not friend $show_full_profile is False and the user can't see Email Address and Vcard Download Link
         if ($show_full_profile) {
             $template->assign('vcard_user_link', $vCardUserLink);
@@ -1966,11 +1965,6 @@ 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);
-
-        $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/inc/lib/template.lib.php

@@ -92,6 +92,7 @@ class Template
             api_get_path(SYS_CODE_PATH).'template/overrides', // user defined templates
             api_get_path(SYS_CODE_PATH).'template', //template folder
             api_get_path(SYS_PLUGIN_PATH), // plugin folder
+            api_get_path(SYS_PATH).'src/ThemeBundle/Resources/views',
         ];
 
         $urlId = api_get_current_access_url_id();
@@ -132,10 +133,11 @@ class Template
             ];
         }
 
-        $this->twig = new Twig_Environment($loader, $options);
+        //$this->twig = new Twig_Environment($loader, $options);
+        $this->twig  = Container::getTwig();
 
         if ($isTestMode) {
-            $this->twig->addExtension(new Twig_Extension_Debug());
+            //$this->twig->addExtension(new Twig_Extension_Debug());
         }
 
         // Twig filters setup
@@ -185,11 +187,12 @@ class Template
 
         foreach ($filters as $filter) {
             if (is_array($filter)) {
-                $this->twig->addFilter(new Twig_SimpleFilter($filter['name'], $filter['callable']));
+                //$this->twig->addFilter(new Twig_SimpleFilter($filter['name'], $filter['callable']));
             } else {
-                $this->twig->addFilter(new Twig_SimpleFilter($filter, $filter));
+                //$this->twig->addFilter(new Twig_SimpleFilter($filter, $filter));
             }
         }
+
         /*$this->twig->addFunction(
             new TwigFunction('sonata_page_render_container', [$this, 'renderContainer'], ['is_safe' => ['html']])
         );*/
@@ -200,7 +203,7 @@ class Template
         ];
 
         foreach ($functions as $function) {
-            $this->twig->addFunction(new Twig_SimpleFunction($function['name'], $function['callable']));
+            //$this->twig->addFunction(new Twig_SimpleFunction($function['name'], $function['callable']));
         }
 
         // Setting system variables

main/social/friends.php

@@ -111,6 +111,7 @@ if (count($friends) == 0) {
 
     $friend_html = '<div id="whoisonline">';
     $friend_html .= '<div class="row">';
+    $friend_html .= '<div class="col-lg-12">';
     $number_friends = count($friends);
     $j = 0;
 
@@ -130,6 +131,7 @@ if (count($friends) == 0) {
     }
     $friend_html .= '</div>';
     $friend_html .= '</div>';
+    $friend_html .= '</div>';
     $social_right_content .= $friend_html;
 }
 $social_right_content .= '</div>';

main/social/profile.php

@@ -526,9 +526,6 @@ if ($show_full_profile) {
             $count_groups = count($results);
         }
 
-        $my_groups .= '<div class="panel panel-default">';
-        $my_groups .= '<div class="panel-heading">'.get_lang('MyGroups').' ('.$count_groups.') </div>';
-
         if ($i > $max_numbers_of_group) {
             if (api_get_user_id() == $user_id) {
                 $my_groups .= '<div class="box_shared_profile_group_actions">'
@@ -551,8 +548,7 @@ if ($show_full_profile) {
             $my_groups .= '</div>';
             $i++;
         }
-        $my_groups .= '</div>';
-        $social_group_info_block = $my_groups;
+        $social_group_info_block = Display::panel($my_groups, get_lang('MyGroups').' ('.$count_groups.')');
     }
 
     // Block Social Course

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,7 +5,7 @@
     <div class="row">
         <div class="col-md-3">
             <div class="social-network-menu">
-                {{ social_avatar_block }}
+                {% include template ~ '/social/user_block.html.twig' %}
 
                 {% extends "@ChamiloTheme/Layout/base-layout.html.twig" %}
 

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,29 +5,9 @@
 <div class="row" xmlns="http://www.w3.org/1999/html">
     <div class="col-md-3">
         <div class="sm-groups">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
-
-            <!-- Block chat list -->
-            <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>
-
+            {{ macro.panel("SocialFriend" | get_lang, social_friend_block) }}
         </div>
     </div>
     <div class="col-md-9">

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,7 +5,7 @@
     <div class="row">
         <div class="col-md-3">
             <div class="sm-groups">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
 
             <!-- Block chat list -->

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

@@ -5,7 +5,7 @@
 {% autoescape false %}
     <div class="row">
         <div class="col-md-3">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             <div class="social-network-menu">
                 {{ social_menu_block }}
             </div>

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -6,7 +6,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -1,10 +1,11 @@
 {% extends "@ChamiloTheme/Layout/layout_one_col.html.twig" %}
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
 
 {% block content %}
 {% autoescape false %}
 <div class="row">
     <div class="col-md-3">
-        {{ social_avatar_block }}
+        {% include template ~ '/social/user_block.html.twig' %}
         {{ social_extra_info_block }}
         <div class="social-network-menu">
             {{ social_menu_block }}
@@ -12,6 +13,7 @@
     </div>
     <div id="wallMessages" class="col-md-6">
         {{ social_wall_block }}
+
         <div class="spinner"></div>
         <div class="panel panel-preview panel-default" hidden="true">
             <div class="panel-heading">
@@ -25,60 +27,19 @@
         {{ social_auto_extend_link }}
     </div>
     <div class="col-md-3">
-        <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>
+        {{ macro.panel("SocialFriend" | get_lang, social_friend_block) }}
+
         {{ social_skill_block }}
         {{ social_group_info_block }}
+
         <!-- Block course list -->
         {% if social_course_block != null %}
-        <div class="panel-group" id="course-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="#course-block" href="#courseList" aria-expanded="true" aria-controls="courseList">
-                            {{ "MyCourses" | get_lang }}
-                        </a>
-                    </h4>
-                </div>
-                <div id="courseList" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                    <div class="panel-body">
-                        <ul class="list-group">
-                            {{ social_course_block }}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
+            {{ macro.panel("MyCourses" | get_lang, social_course_block) }}
         {% endif %}
+
         <!-- Block session list -->
         {% if session_list != null %}
-        <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">
+            {% set social_data %}
             <ul class="list-group">
                 {% for session in session_list %}
                     <li id="session_{{ session.id }}" class="list-group-item" style="min-height:65px;">
@@ -87,11 +48,10 @@
                     </li>
                 {% endfor %}
             </ul>
-                    </div>
-                </div>
-            </div>
-         </div>
+            {% endset %}
+            {{ macro.panel("MySessions" | get_lang, social_data) }}
         {% endif %}
+
         {{ invitations }}
         {{ social_rss_block }}
         {{ social_right_information }}

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

@@ -5,7 +5,7 @@
 <div class="row">
     <div class="col-md-3">
         <div class="social-network-menu">
-            {{ social_avatar_block }}
+            {% include template ~ '/social/user_block.html.twig' %}
             {{ social_menu_block }}
         </div>
     </div>

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

@@ -1,38 +1,11 @@
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
 <script>
 jQuery(document).ready(function(){
     jQuery('.scrollbar-inner').scrollbar();
 });
 </script>
 {% autoescape false %}
-<div class="panel-group" id="skill-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="#skill-block" href="#skillList" aria-expanded="true" aria-controls="skillList">
-                    {{ "Skills" | get_lang }}
-                </a>
-                <div class="btn-group pull-right">
-                    <a class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" href="#">
-                        <span class="caret"></span>
-                    </a>
-                    <ul class="dropdown-menu">
-                        {% if show_skills_report_link %}
-                            <li>
-                                <a href="{{ _p.web_main ~ 'social/my_skills_report.php' }}"> {{'SkillsReport'|get_lang }}</a>
-                            </li>
-                        {% endif %}
-                        <li>
-                            <a href="{{ _p.web_main ~ 'social/skills_wheel.php' }}"> {{ 'SkillsWheel'|get_lang }}</a>
-                        </li>
-                        <li>
-                            <a href="{{ _p.web_main ~ 'social/skills_ranking.php' }}"> {{ 'YourSkillRankingX'|get_lang|format(ranking) }}</a>
-                        </li>
-                    </ul>
-                </div>
-            </h4>
-        </div>
-        <div id="skillList" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-            <div class="panel-body">
+    {% set data %}
         {% if skills %}
             {{ skills }}
         {% else %}
@@ -41,8 +14,37 @@ jQuery(document).ready(function(){
                 <a href="{{ _p.web_main ~ 'social/skills_wheel.php' }}">{{ 'SkillsWheel'|get_lang }}</a>
             </p>
         {% endif %}
-            </div>
-        </div>
-    </div>
-</div>
+    {% endset %}
+
+    {{ macro.panel("Skills" | get_lang, data) }}
+
+{#<div class="panel-group" id="skill-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="#skill-block" href="#skillList" aria-expanded="true" aria-controls="skillList">#}
+                    {#{{ "Skills" | get_lang }}#}
+                {#</a>#}
+                {#<div class="btn-group pull-right">#}
+                    {#<a class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" href="#">#}
+                        {#<span class="caret"></span>#}
+                    {#</a>#}
+                    {#<ul class="dropdown-menu">#}
+                        {#{% if show_skills_report_link %}#}
+                            {#<li>#}
+                                {#<a href="{{ _p.web_main ~ 'social/my_skills_report.php' }}"> {{'SkillsReport'|get_lang }}</a>#}
+                            {#</li>#}
+                        {#{% endif %}#}
+                        {#<li>#}
+                            {#<a href="{{ _p.web_main ~ 'social/skills_wheel.php' }}"> {{ 'SkillsWheel'|get_lang }}</a>#}
+                        {#</li>#}
+                        {#<li>#}
+                            {#<a href="{{ _p.web_main ~ 'social/skills_ranking.php' }}"> {{ 'YourSkillRankingX'|get_lang|format(ranking) }}</a>#}
+                        {#</li>#}
+                    {#</ul>#}
+                {#</div>#}
+            {#</h4>#}
+        {#</div>#}
+    {#</div>#}
+{#</div>#}
 {% endautoescape %}

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

@@ -4,6 +4,7 @@
 <div class="sidebar-avatar">
 {% set profile_body %}
     {{ social_avatar_block }}
+
     <ul class="list-user-data">
         <li class="item">
             {{ user.complete_name }}