Adding page about the course refs - BT#7683

pull/2573/head
Alex Aragón 7 years ago
parent 0d4e57d176
commit dd3390a6b9
  1. 3
      .htaccess
  2. 126
      app/Resources/public/css/base.css
  3. 160
      main/course_info/about.php
  4. 177
      main/template/default/course_home/about.tpl
  5. 21
      main/template/default/layout/hot_course_item.tpl
  6. 3
      main/template/default/session/about.tpl
  7. 2
      main/template/default/session/sessions_current.tpl

@ -39,6 +39,9 @@ RewriteRule ^courses/([^/]+)/(.*)$ app/courses/$1/$2 [QSA,L]
# About session
RewriteRule ^session/(\d{1,})/about/?$ main/session/about.php?session_id=$1 [L]
# About course
RewriteRule ^course/(\d{1,})/about/?$ main/course_info/about.php?course_id=$1 [L]
# Issued individual badge friendly URL
RewriteRule ^badge/(\d{1,}) main/badge/issued.php?issue=$1 [L]

@ -5530,15 +5530,6 @@ div#chat-remote-video video {
min-height: 284px;
}
#about-session .panel-information ul {
margin: 20px 0;
}
#about-session .course, #about-session .session {
padding-top: 10px;
padding-bottom: 10px;
}
.label-price, .label-free {
background-color: transparent;
font-size: 18px;
@ -5558,63 +5549,72 @@ div#chat-remote-video video {
color: #5cb85c;
}
#about-session .session-requirements h5 {
#about-course .panel-information ul {
margin: 20px 0;
}
#about-course .course, #about-course .session {
padding-top: 10px;
padding-bottom: 10px;
}
#about-course .session-requirements h5 {
font-weight: bold;
}
#about-session .session-title {
#about-course .session-title {
font-weight: bold;
}
#about-session .session-tutor {
#about-course .session-tutor {
margin-top: 20px;
margin-bottom: 20px;
font-size: 12px;
}
#about-session .share-social-media {
#about-course .share-social-media {
padding: 10px 0 0 0;
}
#about-session .share-social-media .sharing-buttons li {
#about-course .share-social-media .sharing-buttons li {
padding-left: 0;
}
#about-session .session-info .date {
#about-course .session-info .date {
font-weight: bold;
text-align: center;
}
#about-session .panel-tags {
#about-course .panel-tags {
display: inline-block;
width: 100%;
padding: 0 10px;
margin-top: 10px;
}
#about-session .panel-tags .course-tags {
#about-course .panel-tags .course-tags {
margin-bottom: 0;
}
#about-session .panel-tags .course-tags li {
#about-course .panel-tags .course-tags li {
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
}
#about-session .sub-title {
#about-course .sub-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 20px;
}
#about-session .topics .title-info {
#about-course .topics .title-info {
margin: 30px 0 20px 0;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
#about-session .coach-header {
#about-course .coach-header {
display: flex;
-moz-box-align: center;
-webkit-box-align: center;
@ -5622,30 +5622,30 @@ div#chat-remote-video video {
flex-flow: row;
}
#about-session .coach-header .coach-avatar {
#about-course .coach-header .coach-avatar {
width: 70px;
margin-right: 20px;
}
#about-session .coach-header .coach-avatar .img-circle {
#about-course .coach-header .coach-avatar .img-circle {
border: 1px solid #C0C0C0;
}
#about-session .coach-header .coach-title {
#about-course .coach-header .coach-title {
flex-flow: column;
align-items: flex-start;
display: flex;
}
#about-session .coach-header .coach-title p {
#about-course .coach-header .coach-title p {
font-size: 13px;
}
#about-session .coach-title p {
#about-course .coach-title p {
margin: 0;
}
#about-session .coach-information {
#about-course .coach-information {
width: 100%;
display: block;
border-bottom: 1px solid #dddddd;
@ -5653,15 +5653,15 @@ div#chat-remote-video video {
padding-bottom: 10px;
}
#about-session .coach-information:last-child {
#about-course .coach-information:last-child {
border-bottom: none;
}
#about-session .coach-information h4 {
#about-course .coach-information h4 {
font-weight: bold;
}
#about-session .course-title h3 {
#about-course .course-title h3 {
font-size: 22px;
line-height: 32px;
font-weight: bold;
@ -5669,7 +5669,7 @@ div#chat-remote-video video {
margin-bottom: 15px;
}
#about-session .tags-course {
#about-course .tags-course {
padding: 10px;
background-color: #ECF0F1;
margin-bottom: 10px;
@ -5678,11 +5678,11 @@ div#chat-remote-video video {
-webkit-border-radius: 5px;
}
#about-session .tags-course .fa-tags {
#about-course .tags-course .fa-tags {
color: #D94D38;
}
#about-session .tags-course a {
#about-course .tags-course a {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
@ -5694,7 +5694,7 @@ div#chat-remote-video video {
-webkit-border-radius: 10%;
}
#about-session .subscribe {
#about-course .subscribe {
padding: 5px;
text-align: center;
border-radius: 5px;
@ -5702,51 +5702,51 @@ div#chat-remote-video video {
-webkit-border-radius: 5px;
}
#about-session .info-course {
#about-course .info-course {
margin-top: 20px;
padding-top: 20px;
}
#about-session .info-course .panel-heading h4 {
#about-course .info-course .panel-heading h4 {
margin: 0;
}
#about-session .info-course .title-info {
#about-course .info-course .title-info {
color: #00829C;
border-bottom: 1px dotted #eeeeee;
padding-bottom: 10px;
margin-bottom: 10px;
}
#about-session .info-course .content-info {
#about-course .info-course .content-info {
padding: 10px;
}
#about-session .extrafield_dt {
#about-course .extrafield_dt {
margin-bottom: 10px;
}
#about-session .extrafield_dd {
#about-course .extrafield_dd {
color: #666666;
}
#about-session .socialshare {
#about-course .socialshare {
text-align: center;
}
#about-session .socialshare .networks {
#about-course .socialshare .networks {
padding-left: 0;
list-style: none;
}
#about-session .socialshare .networks li {
#about-course .socialshare .networks li {
padding-right: 2px;
padding-left: 2px;
margin-bottom: 10px;
display: inline-block;
}
#about-session .socialshare .networks li a {
#about-course .socialshare .networks li a {
display: block;
width: 48px;
height: 48px;
@ -5759,16 +5759,16 @@ div#chat-remote-video video {
padding: 10px;
}
#about-session .socialshare .networks li a:hover {
#about-course .socialshare .networks li a:hover {
background-color: #286090;
}
#about-session .course-tags .tag-value {
#about-course .course-tags .tag-value {
display: inline-block;
margin-bottom: 15px;
}
#about-session .course-tags li span {
#about-course .course-tags li span {
position: relative;
display: inline-block;
padding: 0 3px;
@ -5783,7 +5783,7 @@ div#chat-remote-video video {
transition: none 0.15s ease-in-out;
}
#about-session .course-tags li span::before {
#about-course .course-tags li span::before {
display: inline-block;
content: "";
top: 0;
@ -5796,7 +5796,7 @@ div#chat-remote-video video {
border-top: 10px solid transparent;
}
#about-session .course-tags li span::after {
#about-course .course-tags li span::after {
z-index: 1;
content: "";
top: 8px;
@ -5808,11 +5808,11 @@ div#chat-remote-video video {
border-radius: 10px;
}
#about-session .panel-tags .panel-body {
#about-course .panel-tags .panel-body {
text-align: center;
}
#about-session .price-text {
#about-course .price-text {
font-size: 36px;
font-weight: 700;
line-height: 40px;
@ -5821,7 +5821,7 @@ div#chat-remote-video video {
margin-top: 10px;
}
#about-session .buy-box .btn-primary {
#about-course .buy-box .btn-primary {
color: #fff;
background-color: #ec5252;
border: 1px solid transparent;
@ -5829,7 +5829,27 @@ div#chat-remote-video video {
line-height: 1.35135;
border-radius: 2px;
}
#about-course .course-short{
padding-top: 5px;
padding-bottom: 5px;
}
#about-course .course-short ul{
display: inline-block;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#about-course .course-short ul li{
display: inline-block;
}
#about-course .course-short ul li.author{
font-weight: bold;
margin-right: 5px;
}
#about-course #course-info-top .session-title{
margin-top: 10px;
}
/* list courses classic*/
.classic-courses .list-teachers {
font-size: 12px;

@ -0,0 +1,160 @@
<?php
/**
* Created by PhpStorm.
* User: aragonc
* Date: 30/05/18
* Time: 12:33 AM
*/
use Chamilo\CoreBundle\Entity\Course;
use Chamilo\CoreBundle\Entity\CourseRelUser;
use Chamilo\CourseBundle\Entity\CCourseDescription;
use Chamilo\UserBundle\Entity\User;
use Chamilo\CoreBundle\Entity\ExtraField;
$cidReset = true;
require_once __DIR__.'/../inc/global.inc.php';
$courseId = isset($_GET['course_id']) ? intval($_GET['course_id']) : 0;
$em = Database::getManager();
//userID
$user_id = api_get_user_id();
/** @var Course $course */
$course = $em->find('ChamiloCoreBundle:Course', $courseId);
/** @var User $userRepo */
$userRepo = $em->getRepository('ChamiloUserBundle:User');
$fieldsRepo = $em->getRepository('ChamiloCoreBundle:ExtraField');
$fieldTagsRepo = $em->getRepository('ChamiloCoreBundle:ExtraFieldRelTag');
/** @var CCourseDescription $courseDescription */
$courseDescriptionTools = $em->getRepository('ChamiloCourseBundle:CCourseDescription')
->findBy(
[
'cId' => $course->getId(),
'sessionId' => 0,
],
[
'id' => 'DESC',
'descriptionType' => 'ASC',
]
);
$courseValues = new ExtraFieldValue('course');
$userValues = new ExtraFieldValue('user');
$urlCourse = api_get_path(WEB_PATH). 'main/course/about.php?course_id='.$courseId;
$courseTeachers = $course->getTeachers();
$teachersData = [];
/** @var CourseRelUser $teacherSubscription */
foreach ($courseTeachers as $teacherSubscription) {
$teacher = $teacherSubscription->getUser();
$userData = [
'complete_name' => $teacher->getCompleteName(),
'image' => UserManager::getUserPicture(
$teacher->getId(),
USER_IMAGE_SIZE_ORIGINAL
),
'diploma' => $teacher->getDiplomas(),
'openarea' => $teacher->getOpenarea()
];
$teachersData[] = $userData;
}
$tagField = $fieldsRepo->findOneBy([
'extraFieldType' => ExtraField::COURSE_FIELD_TYPE,
'variable' => 'tags',
]);
$courseTags = [];
if (!is_null($tagField)) {
$courseTags = $fieldTagsRepo->getTags($tagField, $course->getId());
}
$courseDescription = $courseObjectives = $courseTopics = $courseMethodology = $courseMaterial = $courseResources = $courseAssessment = '';
$courseCustom = [];
foreach ($courseDescriptionTools as $descriptionTool) {
switch ($descriptionTool->getDescriptionType()) {
case CCourseDescription::TYPE_DESCRIPTION:
$courseDescription = $descriptionTool->getContent();
break;
case CCourseDescription::TYPE_OBJECTIVES:
$courseObjectives = $descriptionTool;
break;
case CCourseDescription::TYPE_TOPICS:
$courseTopics = $descriptionTool;
break;
case CCourseDescription::TYPE_METHODOLOGY:
$courseMethodology = $descriptionTool;
break;
case CCourseDescription::TYPE_COURSE_MATERIAL:
$courseMaterial = $descriptionTool;
break;
case CCourseDescription::TYPE_RESOURCES:
$courseResources = $descriptionTool;
break;
case CCourseDescription::TYPE_ASSESSMENT:
$courseAssessment = $descriptionTool;
break;
case CCourseDescription::TYPE_CUSTOM:
$courseCustom[] = $descriptionTool;
break;
}
}
$topics = [
'objectives' => $courseObjectives,
'topics' => $courseTopics,
'methodology' => $courseMethodology,
'material' => $courseMaterial,
'resources' => $courseResources,
'assessment' => $courseAssessment,
'custom' => array_reverse($courseCustom)
];
$subscriptionUser = CourseManager::is_user_subscribed_in_course($user_id,$course->getCode());
$courseItem = [
'code' => $course->getCode(),
'title' => $course->getTitle(),
'description' => $courseDescription,
'image' => $course->getPicturePath(true),
'syllabus' => $topics,
'tags' => $courseTags,
'teachers' => $teachersData,
'extra_fields' => $courseValues->getAllValuesForAnItem(
$course->getId(),
null,
true
),
'subscription' => $subscriptionUser
];
$metaInfo = '<meta property="og:url" content="'.$urlCourse.'" />';
$metaInfo .= '<meta property="og:type" content="website" />';
$metaInfo .= '<meta property="og:title" content="'.$courseItem['title'].'" />';
$metaInfo .= '<meta property="og:description" content="'.$courseDescription.'" />';
$metaInfo .= '<meta property="og:image" content="'.$courseItem['image'].'" />';
$htmlHeadXtra[] = $metaInfo;
$htmlHeadXtra[] = api_get_asset('readmore-js/readmore.js');
$template = new Template($course->getTitle(), true, true, false, true, false);
$template->assign('course', $courseItem);
$essence = Essence\Essence::instance();
$template->assign('essence', $essence);
$template->assign('url', $urlCourse);
$layout = $template->get_template('course_home/about.tpl');
$content = $template->fetch($layout);
$template->assign('content', $content);
$template->display_one_col_template();

@ -0,0 +1,177 @@
<div id="about-course">
<div id="course-info-top">
<h2 class="session-title">{{ course.title }}</h2>
<div class="course-short">
<ul>
<li class="author">{{ "Professors"|get_lang }}</li>
{% for teacher in course.teachers %}
<li>{{ teacher.complete_name }} | </li>
{% endfor %}
</ul>
</div>
</div>
{% set course_video = '' %}
{% for extra_field in course.extra_fields %}
{% if extra_field.value.getField().getVariable() == 'video_url' %}
{% set course_video = extra_field.value.getValue() %}
{% endif %}
{% endfor %}
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-5">
{% if course_video %}
<div class="course-video">
<div class="embed-responsive embed-responsive-16by9">
{{ essence.replace(course_video) }}
</div>
</div>
{% else %}
<div class="course-image">
<img src="{{ course.image }}" class="img-responsive" />
</div>
{% endif %}
<div class="share-social-media">
<ul class="sharing-buttons">
<li>
{{ "ShareWithYourFriends"|get_lang }}
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
target="_blank" class="btn btn-facebook btn-inverse btn-xs">
<em class="fa fa-facebook"></em> Facebook
</a>
</li>
<li>
<a href="https://twitter.com/home?{{ {'status': course.title ~ ' ' ~ url }|url_encode }}"
target="_blank" class="btn btn-twitter btn-inverse btn-xs">
<em class="fa fa-twitter"></em> Twitter
</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': url , 'title': course.title }|url_encode }}"
target="_blank" class="btn btn-linkedin btn-inverse btn-xs">
<em class="fa fa-linkedin"></em> Linkedin
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-7">
<div class="course-description">
{{ course.description }}
</div>
</div>
</div>
{% if course.tags %}
<div class="panel-tags">
<ul class="list-inline course-tags">
<li>{{ 'Tags'|get_lang }} :</li>
{% for tag in course.tags %}
<li class="tag-value">
<span>{{ tag.getTag }}</span>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<section id="course-info-bottom" class="course">
<div class="row">
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-body">
<h3 class="sub-title">{{ "CourseInformation"|get_lang }}</h3>
<div class="course-information">
{% for topic in course.syllabus %}
{% if topic.content != '' %}
<div class="topics">
<h4 class="title-info">
<em class="fa fa-book"></em> {{ topic.title }}
</h4>
<div class="content-info">
{{ topic.content }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="session-price">
{% if course.subscription %}
<div class="buy-box">
<a href="{{ _p.web }}courses/{{ course.code }}/index.php?id_session=0" class="btn btn-lg btn-success btn-block">{{ 'SignInCourse'|get_lang }}</a>
</div>
{% else %}
<div class="sale-price">
{{ 'SalePrice'|get_lang }}
</div>
<div class="price-text">
S/. 100.00
</div>
<div class="buy-box">
<a href="#" class="btn btn-lg btn-primary btn-block">{{ 'BuyNow'|get_lang }}</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-teachers">
<h3 class="sub-title">{{ "Coaches"|get_lang }}</h3>
</div>
{% for teacher in course.teachers %}
<div class="coach-information">
<div class="coach-header">
<div class="coach-avatar">
<img class="img-circle img-responsive" src="{{ teacher.image }}" alt="{{ teacher.complete_name }}">
</div>
<div class="coach-title">
<h4>{{ teacher.complete_name }}</h4>
<p> {{ teacher.diploma }}</p>
</div>
</div>
<div class="open-area {{ course.teachers | length >= 2 ? 'open-more' : ' ' }}">
{{ teacher.openarea }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.course-information').readmore({
speed: 100,
lessLink: '<a class="hide-content" href="#">{{ 'SetInvisible' | get_lang }}</a>',
moreLink: '<a class="read-more" href="#">{{ 'ReadMore' | get_lang }}</a>',
collapsedHeight: 730,
heightMargin: 100
});
$('.open-more').readmore({
speed: 100,
lessLink: '<a class="hide-content" href="#">{{ 'SetInvisible' | get_lang }}</a>',
moreLink: '<a class="read-more" href="#">{{ 'ReadMore' | get_lang }}</a>',
collapsedHeight: 90,
heightMargin: 20
});
});
</script>

@ -3,13 +3,10 @@
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="items items-hotcourse">
<div class="image">
{% if item.is_registered %}
<a title="{{ item.title}}" href="{{ item.course_public_url }}">
<a title="{{ item.title}}" href="{{ _p.web }}course/{{ item.real_id }}/about">
<img src="{{ item.course_image_large }}" class="img-responsive" alt="{{ item.title }}">
</a>
{% 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>
@ -18,17 +15,11 @@
</div>
<div class="description">
<div class="block-title">
{% if item.is_registered or _u.is_admin %}
<h5 class="title">
<a alt="{{ item.title }}" title="{{ item.title }}" href="{{ item.course_public_url }}">
{{ item.title_cut}}
</a>
</h5>
{% else %}
<h5 class="title" title="{{ item.title }}">
<h5 class="title">
<a alt="{{ item.title }}" title="{{ item.title }}" href="{{ _p.web }}course/{{ item.real_id }}/about">
{{ item.title_cut}}
</h5>
{% endif %}
</a>
</h5>
</div>
<div class="ranking">
{{ item.rating_html }}

@ -1,4 +1,4 @@
<section id="about-session">
<section id="about-course">
{% if is_subscribed and user_session_time != -0 and user_session_time >= 1 %}
<div class="alert alert-info">
{{ 'AlreadyRegisteredToSession'|get_lang }}
@ -277,6 +277,7 @@
</section>
{% endfor %}
</div>
</section>
<script type="text/javascript">
$(document).ready(function() {

@ -13,8 +13,10 @@
<a href="{{ _p.web }}session/{{ session.id }}/about/" title="title-session">
<img class="img-responsive" src="{{ session.image ? _p.web_upload ~ session.image : 'session_default.png'|icon() }}">
</a>
{% if session.category_name %}
<span class="category">{{ session.category_name }}</span>
<div class="cribbon"></div>
{% endif %}
</div>
<div class="description">
<div class="block-title">

Loading…
Cancel
Save