improvement in presentation of lesson list

pull/2837/head
Alex Aragón 7 years ago
parent cec93780ae
commit 3b25f342fc
  1. 94
      assets/css/scss/_base.scss
  2. 2
      main/lp/learnpath.class.php
  3. 7
      main/lp/lp_list.php
  4. BIN
      public/img/icons/22/cd_copy.png
  5. BIN
      public/img/icons/22/cd_copy_na.png
  6. 4
      src/ThemeBundle/Resources/views/Layout/layout_one_col.html.twig
  7. 466
      src/ThemeBundle/Resources/views/LearnPath/list.html.twig

@ -1630,66 +1630,44 @@ hr {
}
/**** LP COLLAPSE CATEGORY ****/
#lp-accordion .panel-default {
border-radius: 10px;
}
#lp-accordion .panel-default .panel-heading {
background: url(#{$svg-path}/arrow-down.svg) #FFF right center no-repeat;
border-radius: 10px;
}
#lp-accordion .panel-default .panel-heading .tools-actions {
padding-right: 20px;
}
#lp-accordion .panel {
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
#lp-accordion .panel .panel-title {
font-weight: bold;
width: 100%;
display: block;
padding-top: 5px;
padding-bottom: 5px;
.progress{
border: 1px solid #d5d5d5;
}
#lp-accordion .panel .panel-title a {
width: 100%;
display: block;
}
#lp-accordion .lp-item {
border-bottom: 1px solid #dddddd;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
display: inline-block;
width: 100%;
}
#lp-accordion .lp-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
#lp-accordion .lp-item .fa {
color: #686f7a;
opacity: .5;
margin-right: 5px;
}
#lp-accordion .lp-item .progress {
border: none;
background: #D7E3E6;
margin-bottom: 10px;
}
#lp-accordion #not-category .lp-item {
margin-bottom: 0;
.lp-accordion{
.list-group{
.list-group-item{
padding: 0.75rem 0;
.title{
font-size: 14px;
font-weight: normal;
}
.extra {
padding-left: 26px;
font-size: 12px;
color: #868686;
}
.list-allowed{
margin-bottom: 5px;
font-size: 12px;
list-style: none;
padding: 0;
}
}
}
.lp-actions{
a{
img{
border: 1px solid #cdcdcd;
background-color: #ffffff;
padding: 2px;
border-radius: 4px;
&:hover{
background-color: #cdcdcd;
}
}
}
}
}
/***** PROMOTIONS *****/
.promotions {

@ -9099,7 +9099,7 @@ class learnpath
$renderer = $form->defaultRenderer();
$renderer->setElementTemplate(' {label}{element}', 'content_lp');
$form->addElement('html', '<div class="editor-lp">');
$form->addHtmlEditor('content_lp', null, null, true, $editor_config, true);
$form->addHtmlEditor('content_lp', null, null, true, $editor_config);
$form->addElement('html', '</div>');
$defaults['content_lp'] = $content;
}

@ -321,12 +321,11 @@ foreach ($categories as $item) {
// student view automatically. Many teachers are confused
// by that, so maybe a solution can be found to avoid it
$url_start_lp .= '&isStudentView=true';
$dsp_desc = '<em>'.$details['lp_maker'].'</em> '
$dsp_desc = '<span>'.$details['lp_maker'].'</span> '
.($lpVisibility
? ''
: ' - ('.get_lang('LPNotVisibleToStudent').')');
$extra = '<div class ="lp_content_type_label">'.$dsp_desc
.'</div>';
$extra = $dsp_desc;
}
$my_title = $name;
@ -391,7 +390,7 @@ foreach ($categories as $item) {
}
if ($is_allowed_to_edit) {
$dsp_progress = '<center>'.$progress.'%</center>';
$dsp_progress = learnpath::get_progress_bar($progress, '%');
} else {
$dsp_progress = '';
if (!api_is_invitee()) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 727 B

@ -38,6 +38,10 @@
<section class="container-fluid">
<div class="card mb-4">
<div id="card-container" class="card-body">
{% if introduction != '' %}
{{ introduction }}
{% endif %}
{% if actions != '' %}
{{ actions }}
{% endif %}

@ -1,6 +1,9 @@
{% extends '@ChamiloTheme/Layout/layout_one_col.html.twig' %}
{% block content %}
{% autoescape false %}
<script>
function confirmation(name) {
if (confirm("{{ "AreYouSureToDeleteJS"|trans }} \"" + name + "\" ?")) {
@ -10,8 +13,8 @@
}
}
</script>
{% set configuration = 'lp_category_accordion'|api_get_configuration_value %}
<div class="lp-accordion panel-group" id="lp-accordion" role="tablist" aria-multiselectable="true">
<div class="lp-accordion">
{% for lp_data in data %}
{% set show_category = true %}
@ -20,27 +23,27 @@
{% endif %}
{% if show_category %}
{% if configuration == 0 %}
<!--- old view -->
{% if categories|length > 1 and lp_data.category.id %}
{% if is_allowed_to_edit %}
<h3 class="page-header">
{{ lp_data.category.getName() }}
{% set toolbar_actions %}
{% if lp_data.category.getId() > 0 %}
{% if not _c.session_id %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=add_lp_category&id=' ~ lp_data.category.getId() }}"
title="{{ "Edit"|trans }}">
<img src="{{ "edit.png"|icon }}" alt="{{ "Edit"|trans }}">
</a>
{% if subscription_settings.allow_add_users_to_lp_category %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=add_users_to_category&id=' ~ lp_data.category.getId() }}"
title="{{ "AddUsers"|trans }}">
<img src="{{ "user.png"|icon }}" alt="{{ "AddUsers"|trans }}">
</a>
{% endif %}
{% if loop.index0 == 1 %}
<a href="#">
<img src="{{ "up_na.png"|icon }}" alt="{{ "Move"|trans }}">
@ -51,7 +54,6 @@
<img src="{{ "up.png"|icon }}" alt="{{ "Move"|trans }}">
</a>
{% endif %}
{% if (data|length - 1) == loop.index0 %}
<a href="#">
<img src="{{ "down_na.png"|icon }}" alt="{{ "Move"|trans }}">
@ -63,7 +65,6 @@
</a>
{% endif %}
{% endif %}
{% if lp_data.category_visibility == 0 %}
<a href="lp_controller.php?{{ _p.web_cid_query ~ '&' ~ {'action':'toggle_category_visibility', 'id':lp_data.category.id, 'new_status':1}|url_encode }}"
title="{{ 'Show'|trans }}">
@ -95,396 +96,105 @@
</a>
{% endif %}
{% endif %}
</h3>
{% elseif lp_data.lp_list is not empty %}
<h3 class="page-header">{{ lp_data.category.getName() }}</h3>
{% endset %}
{% endif %}
{% endif %}
{% if lp_data.lp_list %}
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>{{ "Title"|trans }}</th>
{% if is_allowed_to_edit %}
<th>{{ "PublicationDate"|trans }}</th>
<th>{{ "ExpirationDate"|trans }}</th>
<th>{{ "Progress"|trans }}</th>
<th>{{ "AuthoringOptions"|trans }}</th>
{% else %}
{% if not is_invitee %}
<th>{{ "Progress"|trans }}</th>
{% endif %}
<th>{{ "Actions"|trans }}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in lp_data.lp_list %}
<tr>
<td>
{{ row.learnpath_icon }}
<a href="{{ row.url_start }}">
{{ row.title }}
{{ row.session_image }}
{{ row.extra }}
</a>
</td>
{% if is_allowed_to_edit %}
<td>
{% if row.start_time %}
<span class="small">{{ row.start_time }}</span>
{% endif %}
</td>
<td>
<span class="small">{{ row.end_time }}</span>
</td>
<td>
{{ row.dsp_progress }}
</td>
{% else %}
{% if not is_invitee %}
<td>
{{ row.dsp_progress }}
</td>
{% endif %}
{% endif %}
<td>
{{ row.action_build }}
{{ row.action_edit }}
{{ row.action_visible }}
{{ row.action_tracking }}
{{ row.action_publish }}
{{ row.action_subscribe_users }}
{{ row.action_serious_game }}
{{ row.action_reinit }}
{{ row.action_default_view }}
{{ row.action_debug }}
{{ row.action_export }}
{{ row.action_copy }}
{{ row.action_auto_launch }}
{{ row.action_pdf }}
{{ row.action_delete }}
{{ row.action_order }}
{{ row.action_update_scorm }}
{{ row.action_export_to_course_build }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<!--- end old view -->
{% else %}
<!-- new view block accordeon -->
{% if lp_data.category.id == 0 %}
{% if is_allowed_to_edit %}
<div class="card">
<h5 class="card-header">
{{ lp_data.category.getName() }}
<div class="float-right">
{{ toolbar_actions }}
</div>
</h5>
<div class="card-body">
<!-- LIST SCORM -->
{% if lp_data.lp_list %}
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>{{ "Title"|trans }}</th>
{% if is_allowed_to_edit %}
<th>{{ "PublicationDate"|trans }}</th>
<th>{{ "ExpirationDate"|trans }}</th>
<th>{{ "Progress"|trans }}</th>
<th>{{ "AuthoringOptions"|trans }}</th>
{% else %}
{% if not is_invitee %}
<th>{{ "Progress"|trans }}</th>
{% endif %}
<th>{{ "Actions"|trans }}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in lp_data.lp_list %}
<tr>
<td>
{{ row.learnpath_icon }}
<a href="{{ row.url_start }}">
{{ row.title }}
{{ row.session_image }}
<ul class="list-group list-group-flush">
{% for row in lp_data.lp_list %}
<li class="list-group-item">
<div class="row">
<div class="col-md-5">
<h4 class="title">
<a href="{{ row.url_start }}">
{{ row.learnpath_icon }}
{{ row.title }}
{{ row.session_image }}
</a>
</h4>
<div class="extra">
{{ row.extra }}
</a>
</td>
{% if is_allowed_to_edit %}
<td>
</div>
<div class="lp-actions">
{{ row.action_build }}
{{ row.action_edit }}
{{ row.action_visible }}
{{ row.action_tracking }}
{{ row.action_publish }}
{{ row.action_subscribe_users }}
{{ row.action_serious_game }}
{{ row.action_reinit }}
{{ row.action_default_view }}
{{ row.action_debug }}
{{ row.action_export }}
{{ row.action_copy }}
{{ row.action_auto_launch }}
{{ row.action_pdf }}
{{ row.action_delete }}
{{ row.action_order }}
{{ row.action_update_scorm }}
{{ row.action_export_to_course_build }}
</div>
</div>
<div class="col-md-5">
{% if is_allowed_to_edit %}
<ul class="list-allowed">
{% if row.start_time %}
<span class="small">{{ row.start_time }}</span>
<li>
<strong>{{ "PublicationDate"|trans }} :</strong>
{{ row.start_time }}
</li>
{% endif %}
</td>
<td>
<span class="small">{{ row.end_time }}</span>
</td>
<td>
<li>
<strong>{{ "ExpirationDate"|trans }} :</strong>
{{ row.end_time }}
</li>
</ul>
{{ row.dsp_progress }}
</td>
{% else %}
{% if not is_invitee %}
<td>
{% else %}
{% if not is_invitee %}
{{ row.dsp_progress }}
</td>
{% endif %}
{% endif %}
{% endif %}
<td>
{{ row.action_build }}
{{ row.action_edit }}
{{ row.action_visible }}
{{ row.action_tracking }}
{{ row.action_publish }}
{{ row.action_subscribe_users }}
{{ row.action_serious_game }}
{{ row.action_reinit }}
{{ row.action_default_view }}
{{ row.action_debug }}
{{ row.action_export }}
{{ row.action_copy }}
{{ row.action_auto_launch }}
{{ row.action_pdf }}
{{ row.action_delete }}
{{ row.action_order }}
{{ row.action_update_scorm }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% else %}
<div id="not-category" class="panel panel-default">
<div class="panel-body">
{% for row in lp_data.lp_list %}
<div class="lp-item">
<div class="row">
<div class="col-md-8">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<a href="{{ row.url_start }}">
{{ row.title }}
{{ row.session_image }}
{{ row.extra }}
</a>
</div>
<div class="col-md-3">
{{ row.dsp_progress }}
</div>
<div class="col-md-1">
{{ row.action_pdf }}
<div class="col-md-2">
<div class="float-right">
<a class="btn btn-success" href="{{ row.url_start }}">
Acceder
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
{% if categories|length > 1 and lp_data.category.id %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-{{ lp_data.category.getId() }}">
{% if is_allowed_to_edit %}
<div class="tools-actions pull-right">
{% if lp_data.category.getId() > 0 %}
{% if not _c.session_id %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=add_lp_category&id=' ~ lp_data.category.getId() }}"
title="{{ "Edit"|trans }}">
<img src="{{ "edit.png"|icon }}" alt="{{ "Edit"|trans }}">
</a>
{% if subscription_settings.allow_add_users_to_lp_category %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=add_users_to_category&id=' ~ lp_data.category.getId() }}"
title="{{ "AddUsers"|trans }}">
<img src="{{ "user.png"|icon }}" alt="{{ "AddUsers"|trans }}">
</a>
{% endif %}
{% if loop.index0 == 1 %}
<a href="#">
<img src="{{ "up_na.png"|icon }}" alt="{{ "Move"|trans }}">
</a>
{% else %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=move_up_category&id=' ~ lp_data.category.getId() }}"
title="{{ "Move"|trans }}">
<img src="{{ "up.png"|icon }}" alt="{{ "Move"|trans }}">
</a>
{% endif %}
{% if (data|length - 1) == loop.index0 %}
<a href="#">
<img src="{{ "down_na.png"|icon }}" alt="{{ "Move"|trans }}">
</a>
{% else %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=move_down_category&id=' ~ lp_data.category.getId() }}"
title="{{ "Move"|trans }}">
<img src="{{ "down.png"|icon }}" alt="{{ "Move"|trans }}">
</a>
{% endif %}
{% endif %}
{% if lp_data.category_visibility == 0 %}
<a href="lp_controller.php?{{ _p.web_cid_query ~ '&' ~ {'action':'toggle_category_visibility', 'id':lp_data.category.id, 'new_status':1}|url_encode }}"
title="{{ 'Show'|trans }}">
<img src="{{ 'invisible.png'|icon }}" alt="{{ 'Show'|trans }}">
</a>
{% else %}
<a href="lp_controller.php?{{ _p.web_cid_query ~ '&' ~ {'action':'toggle_category_visibility', 'id':lp_data.category.id, 'new_status':0}|url_encode }}"
title="{{ 'Hide'|trans }}">
<img src="{{ 'visible.png'|icon }}" alt="{{ 'Hide'|trans }}">
</a>
{% endif %}
{% if lp_data.category_visibility == 1 %}
{% if lp_data.category_is_published == 0 %}
<a href="lp_controller.php?{{ _p.web_cid_query ~ '&' ~ {'action':'toggle_category_publish', 'id':lp_data.category.id, 'new_status':1}|url_encode }}"
title="{{ 'LearnpathPublish'|trans }}">
<img src="{{ 'lp_publish_na.png'|icon }}"
alt="{{ 'LearnpathPublish'|trans }}">
</a>
{% else %}
<a href="lp_controller.php?{{ _p.web_cid_query ~ '&' ~ {'action':'toggle_category_publish', 'id':lp_data.category.id, 'new_status':0}|url_encode }}"
title="{{ 'LearnpathDoNotPublish'|trans }}">
<img src="{{ 'lp_publish.png'|icon }}" alt="{{ 'Hide'|trans }}">
</a>
{% endif %}
{% else %}
<img src="{{ 'lp_publish_na.png'|icon }}"
alt="{{ 'LearnpathPublish'|trans }}">
{% endif %}
</li>
{% endfor %}
</ul>
{% if not _c.session_id %}
<a href="{{ 'lp_controller.php?' ~ _p.web_cid_query ~ '&action=delete_lp_category&id=' ~ lp_data.category.getId() }}"
title="{{ "Delete"|trans }}">
<img src="{{ "delete.png"|icon }}" alt="{{ "Delete"|trans }}">
</a>
{% endif %}
{% endif %}
</div>
{% endif %}
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#lp-accordion"
href="#collapse-{{ lp_data.category.getId() }}" aria-expanded="true"
aria-controls="collapse-{{ lp_data.category.getId() }}">
{{ lp_data.category.getName() }}
</a>
</h4>
</div>
{% endif %}
<div id="collapse-{{ lp_data.category.getId() }}" class="panel-collapse collapse {{ (categories|length > 1 ? 'in':'') }}"
role="tabpanel" aria-labelledby="heading-{{ lp_data.category.getId() }}">
<div class="panel-body">
{% if lp_data.lp_list %}
<!-- END LIST SCORM -->
{% if is_allowed_to_edit %}
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>{{ "Title"|trans }}</th>
{% if is_allowed_to_edit %}
<th>{{ "PublicationDate"|trans }}</th>
<th>{{ "ExpirationDate"|trans }}</th>
<th>{{ "Progress"|trans }}</th>
<th>{{ "AuthoringOptions"|trans }}</th>
{% else %}
{% if not is_invitee %}
<th>{{ "Progress"|trans }}</th>
{% endif %}
</div>
</div>
<th>{{ "Actions"|trans }}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in lp_data.lp_list %}
<tr>
<td>
{{ row.learnpath_icon }}
<a href="{{ row.url_start }}">
{{ row.title }}
{{ row.session_image }}
{{ row.extra }}
</a>
</td>
{% if is_allowed_to_edit %}
<td>
{% if row.start_time %}
<span class="small">{{ row.start_time }}</span>
{% endif %}
</td>
<td>
<span class="small">{{ row.end_time }}</span>
</td>
<td>
{{ row.dsp_progress }}
</td>
{% else %}
{% if not is_invitee %}
<td>
{{ row.dsp_progress }}
</td>
{% endif %}
{% endif %}
<td>
{{ row.action_build }}
{{ row.action_edit }}
{{ row.action_visible }}
{{ row.action_tracking }}
{{ row.action_publish }}
{{ row.action_subscribe_users }}
{{ row.action_serious_game }}
{{ row.action_reinit }}
{{ row.action_default_view }}
{{ row.action_debug }}
{{ row.action_export }}
{{ row.action_copy }}
{{ row.action_auto_launch }}
{{ row.action_pdf }}
{{ row.action_delete }}
{{ row.action_order }}
{{ row.action_update_scorm }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
{% for row in lp_data.lp_list %}
<div class="lp-item">
<div class="row">
<div class="col-md-8">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<a href="{{ row.url_start }}">
{{ row.title }}
{{ row.session_image }}
{{ row.extra }}
</a>
</div>
<div class="col-md-3">
{{ row.dsp_progress }}
</div>
<div class="col-md-1">
{{ row.action_pdf }}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
</div>
</div>
</div>
<!--- end old view -->
{% endif %}
<!-- end view block accordeon -->
{% endif %}
{% endif %}
{% endfor %}
</div>

Loading…
Cancel
Save