Minor - improve UI using bootstrap 4 elements

pull/2650/head
Julio Montoya 7 years ago
parent 39d3dd709c
commit de58409e19
  1. 4
      assets/css/base.css
  2. 30
      main/inc/lib/display.lib.php
  3. 10
      main/inc/lib/social.lib.php
  4. 13
      main/inc/lib/template.lib.php
  5. 2
      main/social/friends.php
  6. 6
      main/social/profile.php
  7. 2
      main/template/default/social/add_groups.html.twig
  8. 2
      main/template/default/social/edit_profile.html.twig
  9. 2
      main/template/default/social/friends.html.twig
  10. 24
      main/template/default/social/group_view.html.twig
  11. 2
      main/template/default/social/group_waiting_list.html.twig
  12. 2
      main/template/default/social/groups.html.twig
  13. 2
      main/template/default/social/groups_topics.html.twig
  14. 4
      main/template/default/social/home.html.twig
  15. 2
      main/template/default/social/inbox.html.twig
  16. 2
      main/template/default/social/invitations.html.twig
  17. 2
      main/template/default/social/myfiles.html.twig
  18. 2
      main/template/default/social/personal_data.html.twig
  19. 80
      main/template/default/social/profile.html.twig
  20. 2
      main/template/default/social/search.html.twig
  21. 84
      main/template/default/social/skills_block.html.twig
  22. 133
      main/template/default/social/user_block.html.twig

@ -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;

@ -2698,25 +2698,17 @@ HTML;
}
if (!empty($toolbar)) {
$toolbar = '<div class="btn-group pull-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">
'.$status.'
</div>
<div class="col-md-10">
'.$toolbar.'
</div>
</div>
</div>
$toolbar = '<div class="btn-group float-right">'.$toolbar.'</div>';
}
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.'
'.$toolbar.'
</div>
</div>
<hr />
</div>';

@ -1946,9 +1946,8 @@ class SocialManager extends UserManager
$template->assign('user', $userInfo);
$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
// 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));
}
/**

@ -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

@ -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>';

@ -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

@ -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>

@ -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" %}

@ -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>

@ -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">

@ -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>

@ -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>

@ -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 -->

@ -5,9 +5,9 @@
{% 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 }}
{{ social_menu_block }}
</div>
</div>
<div class="col-md-6">

@ -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>

@ -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>

@ -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>

@ -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>

@ -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,73 +27,31 @@
{{ 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">
<ul class="list-group">
{% for session in session_list %}
<li id="session_{{ session.id }}" class="list-group-item" style="min-height:65px;">
<img class="img-session" src="{{ session.image }}"/>
<span class="title">{{ session.name }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% 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;">
<img class="img-session" src="{{ session.image }}"/>
<span class="title">{{ session.name }}</span>
</li>
{% endfor %}
</ul>
{% endset %}
{{ macro.panel("MySessions" | get_lang, social_data) }}
{% endif %}
{{ invitations }}
{{ social_rss_block }}
{{ social_right_information }}

@ -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>

@ -1,48 +1,50 @@
{% 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">
{% if skills %}
{{ skills }}
{% else %}
<p>{{ 'WithoutAchievedSkills'|get_lang }}</p>
<p>
<a href="{{ _p.web_main ~ 'social/skills_wheel.php' }}">{{ 'SkillsWheel'|get_lang }}</a>
</p>
{% endif %}
</div>
</div>
</div>
</div>
{% set data %}
{% if skills %}
{{ skills }}
{% else %}
<p>{{ 'WithoutAchievedSkills'|get_lang }}</p>
<p>
<a href="{{ _p.web_main ~ 'social/skills_wheel.php' }}">{{ 'SkillsWheel'|get_lang }}</a>
</p>
{% endif %}
{% 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 %}

@ -2,86 +2,87 @@
{% autoescape false %}
<div class="sidebar-avatar">
{% set profile_body %}
{{ social_avatar_block }}
<ul class="list-user-data">
{% set profile_body %}
{{ social_avatar_block }}
<ul class="list-user-data">
<li class="item">
{{ user.complete_name }}
</li>
{% if _u.is_admin == 1 %}
<li class="item">
<a href="{{ _p.web }}main/admin/user_edit.php?user_id={{ user.id }}">
<img src="{{ "edit.png" | icon }}" alt="{{ "Edit" | get_lang }}">
</a>
</li>
{% endif %}
{% if show_full_profile %}
<li class="item">
<a href="{{ _p.web }}main/messages/new_message.php">
<img src="{{ "instant_message.png" | icon }}" alt="{{ "Email" | get_lang }}">
{{ user.email}}
</a>
</li>
<li class="item">
{{ user.complete_name }}
<a href="{{ vcard_user_link }}">
<img src="{{ "vcard.png" | icon(16) }}" alt="{{ "BusinessCard" | get_lang }}" width="16" height="16">
{{ "BusinessCard" | get_lang }}
</a>
</li>
{% if _u.is_admin == 1 %}
{% set skype_account = '' %}
{% set linkedin_url = '' %}
{% for extra in user.extra %}
{% if extra.value.getField().getVariable() == 'skype' %}
{% set skype_account = extra.value.getValue() %}
{% endif %}
{% if extra.value.getField().getVariable() == 'linkedin_url' %}
{% set linkedin_url = extra.value.getValue() %}
{% endif %}
{% endfor %}
{% if 'allow_show_skype_account'|api_get_setting == 'true' and not skype_account is empty %}
<li class="item">
<a href="{{ _p.web }}main/admin/user_edit.php?user_id={{ user.id }}">
<img src="{{ "edit.png" | icon }}" alt="{{ "Edit" | get_lang }}">
<a href="skype:{{ skype_account }}?chat">
<span class="fa fa-skype fa-fw" aria-hidden="true"></span> {{ 'Skype'|get_lang }}
</a>
</li>
{% endif %}
{% if show_full_profile %}
<li class="item">
<a href="{{ _p.web }}main/messages/new_message.php">
<img src="{{ "instant_message.png" | icon }}" alt="{{ "Email" | get_lang }}">
{{ user.email}}
</a>
</li>
{% if 'allow_show_linkedin_url'|api_get_setting == 'true' and not linkedin_url is empty %}
<li class="item">
<a href="{{ vcard_user_link }}">
<img src="{{ "vcard.png" | icon(16) }}" alt="{{ "BusinessCard" | get_lang }}" width="16" height="16">
{{ "BusinessCard" | get_lang }}
<a href="{{ linkedin_url }}" target="_blank">
<span class="fa fa-linkedin fa-fw" aria-hidden="true"></span> {{ 'LinkedIn'|get_lang }}
</a>
</li>
{% set skype_account = '' %}
{% set linkedin_url = '' %}
{% for extra in user.extra %}
{% if extra.value.getField().getVariable() == 'skype' %}
{% set skype_account = extra.value.getValue() %}
{% endif %}
{% if extra.value.getField().getVariable() == 'linkedin_url' %}
{% set linkedin_url = extra.value.getValue() %}
{% endif %}
{% endfor %}
{% if 'allow_show_skype_account'|api_get_setting == 'true' and not skype_account is empty %}
<li class="item">
<a href="skype:{{ skype_account }}?chat">
<span class="fa fa-skype fa-fw" aria-hidden="true"></span> {{ 'Skype'|get_lang }}
</a>
</li>
{% endif %}
{% if 'allow_show_linkedin_url'|api_get_setting == 'true' and not linkedin_url is empty %}
{% endif %}
{% endif %}
{% if chat_enabled == 1 %}
{% if user.user_is_online_in_chat != 0 %}
{% if user_relation == user_relation_type_friend %}
<li class="item">
<a href="{{ linkedin_url }}" target="_blank">
<span class="fa fa-linkedin fa-fw" aria-hidden="true"></span> {{ 'LinkedIn'|get_lang }}
<a onclick="javascript:chatWith('{{ user.id }}', '{{ user.complete_name }}', '{{ user.user_is_online }}','{{ user.avatar_small }}')" href="javascript:void(0);">
<img src="{{ "online.png" | icon }}" alt="{{ "Online" | get_lang }}">
{{ "Chat" | get_lang }} ({{ "Online" | get_lang }})
</a>
</li>
{# else #}
{# <img src="{{ "offline.png" | icon }}" alt="{{ "Online" | get_lang }}"> #}
{# {{ "Chat" | get_lang }} ({{ "Offline" | get_lang }}) #}
{% endif %}
{% endif %}
{% if chat_enabled == 1 %}
{% if user.user_is_online_in_chat != 0 %}
{% if user_relation == user_relation_type_friend %}
<li class="item">
<a onclick="javascript:chatWith('{{ user.id }}', '{{ user.complete_name }}', '{{ user.user_is_online }}','{{ user.avatar_small }}')" href="javascript:void(0);">
<img src="{{ "online.png" | icon }}" alt="{{ "Online" | get_lang }}">
{{ "Chat" | get_lang }} ({{ "Online" | get_lang }})
</a>
</li>
{# else #}
{# <img src="{{ "offline.png" | icon }}" alt="{{ "Online" | get_lang }}"> #}
{# {{ "Chat" | get_lang }} ({{ "Offline" | get_lang }}) #}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if not profile_edition_link is empty %}
<li class="item">
<a class="btn btn-link btn-sm btn-block" href="{{ profile_edition_link }}">
<em class="fa fa-edit"></em>{{ "EditProfile" | get_lang }}
</a>
</li>
{% endif %}
</ul>
{% endset %}
{{ macro.panel("Profile" | get_lang, profile_body ) }}
{% if not profile_edition_link is empty %}
<li class="item">
<a class="btn btn-link btn-sm btn-block" href="{{ profile_edition_link }}">
<em class="fa fa-edit"></em>{{ "EditProfile" | get_lang }}
</a>
</li>
{% endif %}
</ul>
{% endset %}
{{ macro.panel("Profile" | get_lang, profile_body ) }}
</div>
{% endautoescape %}
Loading…
Cancel
Save