Browse Source

fix about session - refs #2681

Alex Aragón 6 năm trước cách đây
mục cha
commit
77b20c3780

+ 2 - 263
assets/css/base.css

@@ -10,24 +10,6 @@
     Version: 2.0
 */
 
-
-
-.blackboard_show {
-    float: left;
-    position: absolute;
-    border: 1px solid #000;
-    width: 200px;
-    border-radius: 5px;
-    background-color: #000;
-    z-index: 99;
-    display: inline;
-    color: #fff;
-}
-
-.blackboard_hide {
-    display: none;
-}
-
 /* notifications help and bug */
 
 .cookieUsageValidation {
@@ -138,9 +120,6 @@
     width: 100%;
 }
 
-.impress-title h1 {
-    font-size: 35px;
-}
 
 /* SESSION CATALOG*/
 .session-group .padding-clear {
@@ -2294,34 +2273,6 @@ div#no-data-view div.controls {
     width: 450px !important;
 }
 
-/* **** FORUM CATEGORY **** */
-.forum_category {
-    background-color: #0066CC;
-    color: #fff;
-}
-
-.forum_category a {
-    color: #fff;
-}
-
-.forum_category_header {
-    background-color: #0066CC;
-    color: #fff;
-}
-
-tr.forum_category_header a {
-    color: #fff;
-}
-
-.forum-description {
-    display: inline-block;
-}
-
-/* **** FORUM **** */
-.forum_header {
-    background-color: #EEF;
-}
-
 /* **** THREAD **** */
 .forum_threadheader {
     color: #aaa;
@@ -2340,10 +2291,6 @@ tr.forum_category_header a {
     border: 1px solid #aaa;
 }
 
-.forum-date {
-    font-size: 12px;
-}
-
 /* **** POST **** */
 
 
@@ -2468,15 +2415,9 @@ tr.forum_category_header a {
 .forum_table td {
     padding: 5px;
     vertical-align: top;
-    border-bottom: 1px solid #ccc;
-    border-right: 1px dotted #e1e1e1;
-    border-left: 1px dotted #e1e1e1;
-    border-top: 1px solid #ccc;
-}
-
-.post {
     border: 1px solid #ccc;
-    margin-bottom: 5px;
+    border-right: dotted #e1e1e1;
+    border-left: dotted #e1e1e1;
 }
 
 .timeline-example {
@@ -2496,10 +2437,6 @@ tr.forum_category_header a {
     z-index: 100;
 }
 
-#main_content .course_item {
-    padding: 5px 0 5px 0;
-}
-
 /* actions */
 .actions_lp img {
     vertical-align: middle;
@@ -2707,34 +2644,6 @@ i.size-32.icon-new-note {
     border: 0;
 }
 
-.btn-msg {
-    padding: 2px 4px 2px 22px;
-    margin-bottom: 10px;
-    font-size: 11px;
-    line-height: 14px;
-    background: #e6e6e6 3px;
-}
-
-.btn-inv {
-    padding: 2px 4px 2px 22px;
-    margin-bottom: 10px;
-    font-size: 11px;
-    line-height: 14px;
-    background: #e6e6e6 3px;
-}
-
-.btn-inv-off {
-    padding: 2px 4px 2px 22px;
-    margin-bottom: 10px;
-    font-size: 11px;
-    line-height: 14px;
-    background: #e6e6e6 3px;
-}
-
-#password_progress {
-    width: 220px;
-}
-
 .jqgrid_whitespace {
     white-space: normal !important;
 }
@@ -2854,14 +2763,6 @@ i.size-32.icon-new-note {
     text-align: center;
 }
 
-#display-survey .center {
-    text-align: center;
-}
-
-#display-survey {
-    border: 1px solid #ddd;
-}
-
 #display-survey.table tbody tr:hover td, #display-survey.table tbody tr:hover th {
     background-color: transparent;
 }
@@ -3500,147 +3401,6 @@ div#chat-remote-video video {
     width: 100%;
 }
 
-/* Sequence */
-.title-sequence {
-    font-size: 12px;
-    text-align: center;
-}
-
-#parents {
-    text-align: center;
-}
-
-#parents .parent {
-    display: inline-block;
-    width: 125px;
-    padding: 5px;
-}
-
-#parents .sequence-plus-icon {
-    color: #CCCCCC;
-    padding: 0 10px;
-}
-
-.border-sequence {
-    background: url("../../public/img/line.png") repeat-x 0 35px;
-}
-
-.arrow-sequence {
-    height: 68px;
-    background: url("../../public/img/icons/48/sequence-arrow.png") no-repeat center 15px;
-    margin-top: 10px;
-    padding-top: 10px;
-}
-
-#parents .parent .big-icon {
-    background-color: #ECF0F1;
-    padding: 10px;
-    text-align: center;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    position: relative;
-}
-
-#parents .parent.parent-deleted .sequence-course {
-    text-decoration: line-through;
-}
-
-#parents .parent .big-icon .sequence-course {
-    font-size: 12px;
-}
-
-#parents .parent .big-icon .sequence-id {
-    border-radius: 50%;
-    background-color: #E74C3C;
-    width: 20%;
-    color: #ffffff;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-}
-
-#parents .parent .big-icon .sequence-deleted {
-    font-size: 12px;
-}
-
-#resource {
-    text-align: center;
-}
-
-#resource .parent {
-    display: inline-block;
-    padding: 5px;
-    width: 15%;
-}
-
-#resource .parent .big-icon {
-    background-color: #eeffaa;
-    padding: 10px;
-    text-align: center;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    position: relative;
-}
-
-#resource .parent .big-icon .sequence-course {
-    font-size: 12px;
-}
-
-#resource .parent .big-icon .sequence-id {
-    border-radius: 50%;
-    background-color: #E74C3C;
-    width: 20%;
-    color: #ffffff;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-}
-
-#resource .parent .big-icon .sequence-deleted {
-    font-size: 12px;
-}
-
-#children {
-    text-align: center;
-}
-
-#children .parent {
-    display: inline-block;
-    padding: 5px;
-    width: 15%;
-}
-
-#children .parent .big-icon {
-    background-color: #feffd6;
-    padding: 10px;
-    text-align: center;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    position: relative;
-}
-
-#children .parent .big-icon .sequence-course {
-    font-size: 12px;
-}
-
-#children .parent .big-icon .sequence-id {
-    border-radius: 50%;
-    background-color: #E74C3C;
-    width: 20%;
-    color: #ffffff;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-}
-
-#children .parent .big-icon .sequence-deleted {
-    font-size: 12px;
-}
-
-
 
 /**** ABOUT SESSION ****/
 
@@ -4149,14 +3909,6 @@ div#chat-remote-video video {
     top: 0;
 }
 
-#grad_left {
-    left: 0;
-}
-
-#grad_right {
-    right: 0;
-}
-
 #next,
 #prev {
     position: absolute;
@@ -4473,10 +4225,6 @@ ul#toolnavbox-two li a.btn {
         width: 25.66666667%;
     }
 
-    .total {
-        width: 100%;
-    }
-
     #learning_path_right_zone {
         width: 68%;
         display: block;
@@ -4957,15 +4705,6 @@ input.form-control[type="color"] {
     margin-top: 20px;
 }
 
-.col-xs-6.course-tool:nth-child(2n+1) {
-    clear: left;
-}
-
-.btn-orange {
-    background-color: #EF5F00;
-    border: none;
-}
-
 .exercise_mark_select .dropdown-menu > .active > a.btn-danger,
 .exercise_mark_select .dropdown-menu > li > a.btn-danger:focus,
 .exercise_mark_select .dropdown-menu > li > a.btn-danger:hover {

+ 143 - 10
assets/css/scss/_base.scss

@@ -232,17 +232,8 @@ hr {
   margin-top: 10px;
 }
 
-/** SELECT */
+/****** BOOTSTRAP SELECT ******/
 
-/*
-.btn-select{
-  color: #495057;
-  background-color: white;
-  border-color: $select-color;
-  &.bs-placeholder{
-    color: $select-color !important;
-  }
-}*/
 .bootstrap-select{
   .dropdown-toggle{
     &:after{
@@ -1932,5 +1923,147 @@ footer {
       }
     }
   }
+  .coach-information{
+    width: 100%;
+    display: block;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    .coach-header{
+      display: flex;
+      align-items: center;
+      flex-flow: row;
+      .coach-avatar{
+        width: 180px;
+        margin-right: 20px;
+      }
+      .coach-title{
+        flex-flow: column;
+        align-items: flex-start;
+        display: flex;
+      }
+    }
+  }
+}
+
+/****** Sequence ******/
+
+#parents {
+  text-align: center;
+  .parent {
+    display: inline-block;
+    width: 125px;
+    padding: 5px;
+    &.parent-deleted{
+      .sequence-course {
+        text-decoration: line-through;
+      }
+    }
+    .big-icon {
+      background-color: #ECF0F1;
+      padding: 10px;
+      text-align: center;
+      border-radius: 5px;
+      -moz-border-radius: 5px;
+      -webkit-border-radius: 5px;
+      position: relative;
+      .sequence-course {
+        font-size: 12px;
+      }
+      .sequence-id {
+        border-radius: 50%;
+        background-color: #E74C3C;
+        width: 20%;
+        color: #ffffff;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+      }
+      .sequence-deleted {
+        font-size: 12px;
+      }
+    }
+  }
+  .sequence-plus-icon {
+    color: #CCCCCC;
+    padding: 0 10px;
+  }
+}
+
+.border-sequence {
+  background: url("../../public/img/line.png") repeat-x 0 35px;
+}
+
+.arrow-sequence {
+  height: 68px;
+  background: url("../../public/img/icons/48/sequence-arrow.png") no-repeat center 15px;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+
+#resource {
+  text-align: center;
+  .parent {
+    display: inline-block;
+    padding: 5px;
+    width: 15%;
+    .big-icon {
+      background-color: #eeffaa;
+      padding: 10px;
+      text-align: center;
+      border-radius: 5px;
+      -moz-border-radius: 5px;
+      -webkit-border-radius: 5px;
+      position: relative;
+      .sequence-course {
+        font-size: 12px;
+      }
+      .sequence-id {
+        border-radius: 50%;
+        background-color: #E74C3C;
+        width: 20%;
+        color: #ffffff;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+      }
+      .sequence-deleted {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+#children {
+  text-align: center;
+  .parent {
+    display: inline-block;
+    padding: 5px;
+    width: 15%;
+    .big-icon {
+      background-color: #feffd6;
+      padding: 10px;
+      text-align: center;
+      border-radius: 5px;
+      -moz-border-radius: 5px;
+      -webkit-border-radius: 5px;
+      position: relative;
+      .sequence-course {
+        font-size: 12px;
+      }
+      .sequence-id {
+        border-radius: 50%;
+        background-color: #E74C3C;
+        width: 20%;
+        color: #ffffff;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+      }
+      .sequence-deleted {
+        font-size: 12px;
+      }
+    }
+  }
 }
 

+ 1 - 1
main/session/about.php

@@ -239,7 +239,7 @@ $template->assign(
 $template->assign('has_requirements', $hasRequirements);
 $template->assign('sequences', $sessionRequirements);
 $template->assign('is_premium', $sessionIsPremium);
-$layout = $template->get_template('session/about.tpl');
+$layout = $template->get_template('session/about.html.twig');
 $content = $template->fetch($layout);
 //$template->assign('header', $session->getName());
 $template->assign('content', $content);

+ 6 - 5
main/template/default/course_home/about.html.twig

@@ -82,8 +82,8 @@
     <section id="course-info-bottom" class="course">
         <div class="row">
             <div class="col-sm-8">
-                <div class="panel panel-default">
-                    <div class="panel-body">
+                <div class="card">
+                    <div class="card-body">
                         <h3 class="sub-title">{{ "CourseInformation"|get_lang }}</h3>
                         <div class="course-information">
                             {% for topic in course.syllabus %}
@@ -139,16 +139,17 @@
                 <div class="card">
                     <div class="card-body">
                         <div class="panel-teachers">
-                            <h3 class="sub-title">{{ "Coaches"|get_lang }}</h3>
+                            <h5 class="sub-title">{{ "Coaches"|get_lang }}</h5>
                         </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 }}">
+                                    <img class="img-fluid rounded-circle" src="{{ teacher.image }}" alt="{{ teacher.complete_name }}">
                                 </div>
                                 <div class="coach-title">
-                                    <h4>{{ teacher.complete_name }}</h4>
+                                    <h6>{{ teacher.complete_name }}</h6>
                                     <p> {{ teacher.diploma }}</p>
                                 </div>
                             </div>

+ 285 - 207
main/template/default/session/about.html.twig

@@ -1,251 +1,329 @@
-<div id="about-session">
-    <div class="row">
-        <div class="col-xs-12">
-            <p>
-                <em class="fa fa-clock-o" aria-hidden="true"></em>
-                {% if session.duration %}
-                    <em>{{ 'SessionDurationXDaysLeft'|get_lang|format(session.duration) }}</em>
-                {% else %}
-                    <em>{{ session_date.display }}</em>
-                {% endif %}
-            </p>
-            {% if show_tutor and session.generalCoach %}
-                <p>
-                    <em class="fa fa-user"></em> {{ 'SessionGeneralCoach'|get_lang }}: <em>{{ session.generalCoach|format_user_full_name }}</em>
-                </p>
-            {% endif %}
-
-            {% if session.getShowDescription() %}
-                <div class="lead">
-                    {{ session.getDescription() }}
-                </div>
-            {% endif %}
+{% autoescape false %}
+<section id="about-course" class="about">
+    {% if is_subscribed and user_session_time != -0 and user_session_time >= 1 %}
+        <div class="alert alert-info">
+            {{ 'AlreadyRegisteredToSession'|get_lang }}
         </div>
-    </div>
-
-    {% if has_requirements %}
-        <div class="row">
-            <div class="col-xs-12">
-                <div class="panel panel-default">
-                    <div class="panel-heading">{{ 'RequiredSessions'|get_lang }}</div>
-                    <div class="panel-body">
-                        <div class="row">
-                            {% for sequence in sequences %}
-                                <div class="col-md-4">
-                                    <dl class="dl-horizontal">
+    {% elseif is_subscribed and user_session_time < 1 %}
+        <div class="alert alert-warning">
+            {{ 'YourSessionTimeIsExpired'|get_lang }}
+        </div>
+    {% endif %}
+    <section class="session">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-8">
+                        <h2 class="session-title">{{ session.name }}</h2>
+                        {% if show_tutor and session.generalCoach %}
+                            <div class="session-tutor">
+                                <em class="fa fa-user"></em> {{ 'SessionGeneralCoach'|get_lang }}:
+                                <em>{{ session.generalCoach.getCompleteName() }}</em>
+                            </div>
+                        {% endif %}
+                        {% if session.getShowDescription() %}
+                            <div class="session-description">
+                                {{ session.getDescription() }}
+                            </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': page_url }|url_encode }}"
+                                       target="_blank" class="btn btn-facebook btn-inverse btn-sm">
+                                        <em class="fab fa-facebook-square"></em> Facebook
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="https://twitter.com/home?{{ {'status': session.getName() ~ ' ' ~ page_url }|url_encode }}"
+                                       target="_blank" class="btn btn-twitter btn-inverse btn-sm">
+                                        <em class="fab fa-twitter"></em> Twitter
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': page_url , 'title': session.getName() }|url_encode }}"
+                                       target="_blank" class="btn btn-linkedin btn-inverse btn-sm">
+                                        <em class="fab fa-linkedin-in"></em> Linkedin
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="session-info">
+                            <div class="date">
+                                <p>
+                                    {% if session.duration %}
+                                        {{ 'SessionDurationXDaysTotal'|get_lang|format(session.duration) }}
+                                    {% else %}
+                                        {{ session_date.display }}
+                                    {% endif %}
+                                </p>
+                            </div>
+                            {% if is_premium == false %}
+                                <h5>{{ 'CourseSubscription'|get_lang }}</h5>
+                                <div class="session-subscribe">
+                                    {% if _u.logged and not is_subscribed %}
+                                        {{ subscribe_button }}
+                                    {% elseif not _u.logged %}
+                                        {% if 'allow_registration'|api_get_setting != 'false' %}
+                                            <a href="{{ _p.web_main ~ 'auth/inscription.php' ~ redirect_to_session }}"
+                                               class="btn btn-success btn-block btn-lg">
+                                                <i class="fa fa-pencil" aria-hidden="true"></i> {{ 'SignUp'|get_lang }}
+                                            </a>
+                                        {% endif %}
+                                    {% endif %}
+                                </div>
+                            {% else %}
+                                <div class="session-price">
+                                    <div class="sale-price">
+                                        {{ 'SalePrice'|get_lang }}
+                                    </div>
+                                    <div class="price-text">
+                                        {{ is_premium.iso_code }} {{ is_premium.price }}
+                                    </div>
+                                    <div class="buy-box">
+                                        <a href="{{ _p.web }}plugin/buycourses/src/process.php?i={{ is_premium.product_id }}&t={{ is_premium.product_type }}"
+                                           class="btn btn-lg btn-primary btn-block">{{ 'BuyNow'|get_lang }}</a>
+                                    </div>
+                                </div>
+                            {% endif %}
+                            {% if has_requirements %}
+                                <div class="session-requirements">
+                                    <h5>{{ 'RequiredSessions'|get_lang }}</h5>
+                                    {% for sequence in sequences %}
                                         {% if sequence.requirements %}
-                                            <dt>{{ sequence.name }}</dt>
-                                            {% for requirement in sequence.requirements %}
-                                                <dd>
+                                            <p>
+                                                {{ sequence.name }} :
+                                                {% for requirement in sequence.requirements %}
                                                     <a href="{{ _p.web ~ 'session/' ~ requirement.getId ~ '/about/' }}">
                                                         {{ requirement.getName }}
                                                     </a>
-                                                </dd>
-                                            {% endfor %}
+                                                {% endfor %}
+                                            </p>
                                         {% endif %}
-                                    </dl>
+                                    {% endfor %}
                                 </div>
-                            {% endfor %}
+                            {% endif %}
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    {% endif %}
-
-    {% if is_subscribed and user_session_time != -0 and user_session_time >= 1 %}
-        <div class="alert alert-info">
-            {{ 'AlreadyRegisteredToSession'|get_lang }}
-        </div>
-    {% elseif is_subscribed and user_session_time < 1 %}
-        <div class="alert alert-warning">
-            {{ 'YourSessionTimeIsExpired'|get_lang }}
-        </div>
-    {% endif %}
-
+    </section>
     {% for course_data in courses %}
         {% set course_video = '' %}
-
         {% for extra_field in course_data.extra_fields %}
             {% if extra_field.value.getField().getVariable() == 'video_url' %}
                 {% set course_video = extra_field.value.getValue() %}
             {% endif %}
         {% endfor %}
+        <div class="card panel-course">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-sm-5">
+                        {% if course_video %}
+                            <div class="embed-responsive embed-responsive-16by9">
+                                {{ essence.replace(course_video) }}
+                            </div>
+                        {% else %}
+                            <div class="course-image">
+                                <img src="{{ course_data.image }}" class="img-rounded img-responsive" width="100%">
+                            </div>
+                        {% endif %}
 
-        <div class="row">
-            {% if courses|length > 1 %}
-                <div class="col-xs-12">
-                    <h3 class="text-uppercase">{{ course_data.course.getTitle }}</h3>
-                </div>
-            {% endif %}
-
-            {% if course_video %}
-                <div class="col-sm-6 col-md-7">
-                    <div class="embed-responsive embed-responsive-16by9">
-                        {{ essence.replace(course_video) }}
+                    </div>
+                    <div class="col-sm-7">
+                        {% if courses|length > 1 %}
+                            <div class="course-title">
+                                <h3>{{ course_data.course.getTitle }}</h3>
+                            </div>
+                        {% endif %}
+                        <div class="course-description">
+                            {% for description in course_data.description %}
+                                {{ description.content }}
+                            {% endfor %}
+                        </div>
                     </div>
                 </div>
-            {% endif %}
+                {% if course_data.tags %}
 
-            <div class="{{ course_video ? 'col-sm-6 col-md-5' : 'col-sm-12' }}">
-                <div class="description-course">
-                    {{ course_data.description.getContent }}
-                </div>
+                    <ul class="list-inline course-tags d-flex flex-row bd-highlight mb-3">
+                        <li class="px-2 bd-highlight">{{ 'Tags'|get_lang }} :</li>
+                        {% for tag in course_data.tags %}
+                            <li class="px-2 bd-highlight">
+                                <span>{{ tag.getTag }}</span>
+                            </li>
+                        {% endfor %}
+                    </ul>
+
+                {% endif %}
             </div>
         </div>
+        <section class="course">
+            <div class="row">
+                <div class="col-md-8">
+                    <div class="card">
+                        <div class="card-body">
+                            <h3 class="sub-title">{{ "CourseInformation"|get_lang }}</h3>
+                            <div class="course-information read-more-area">
+                                {% if course_data.objectives %}
+                                    {% for objectives in course_data.objectives %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ objectives.title }}</h4>
+                                            <div class="content-info">
+                                                {{ objectives.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-        <div class="row info-course">
-            <div class="col-xs-12 col-md-7">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        <h4>{{ "CourseInformation"|get_lang }}</h4>
-                    </div>
-                    <div class="panel-body">
-                        {% if course_data.objectives %}
-                            <div class="objective-course">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.objectives.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.objectives.getContent }}
-                                </div>
-                            </div>
-                        {% endif %}
+                                {% if course_data.topics %}
+                                    {% for topics in course_data.topics %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ topics.title }}</h4>
+                                            <div class="content-info">
+                                                {{ topics.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-                        {% if course_data.topics %}
-                            <div class="topics">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.topics.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.topics.getContent }}
-                                </div>
-                            </div>
-                        {% endif %}
+                                {% if course_data.methodology %}
+                                    {% for methodology in course_data.methodology %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ methodology.title }}</h4>
+                                            <div class="content-info">
+                                                {{ methodology.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-                        {% if course_data.methodology %}
-                            <div class="topics">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.methodology.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.methodology.getContent }}
-                                </div>
-                            </div>
-                        {% endif %}
+                                {% if course_data.material %}
+                                    {% for material in course_data.material %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ material.title }}</h4>
+                                            <div class="content-info">
+                                                {{ material.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-                        {% if course_data.material %}
-                            <div class="topics">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.material.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.material.getContent }}
-                                </div>
-                            </div>
-                        {% endif %}
+                                {% if course_data.resources %}
+                                    {% for resources in course_data.resources %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ resources.title }}</h4>
+                                            <div class="content-info">
+                                                {{ resources.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-                        {% if course_data.resources %}
-                            <div class="topics">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.resources.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.resources.getContent }}
-                                </div>
-                            </div>
-                        {% endif %}
+                                {% if course_data.assessment %}
+                                    {% for assessment in course_data.assessment %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em
+                                                        class="fa fa-book"></em> {{ assessment.title }}</h4>
+                                            <div class="content-info">
+                                                {{ assessment.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
 
-                        {% if course_data.assessment %}
-                            <div class="topics">
-                                <h4 class="title-info"><em class="fa fa-book"></em> {{ course_data.assessment.getTitle }}</h4>
-                                <div class="content-info">
-                                    {{ course_data.assessment.getContent }}
-                                </div>
+                                {% if course_data.custom %}
+                                    {% for custom in course_data.custom %}
+                                        <div class="topics">
+                                            <h4 class="title-info"><em class="fa fa-book"></em> {{ custom.title }}
+                                            </h4>
+                                            <div class="content-info">
+                                                {{ custom.content }}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
                             </div>
-                        {% endif %}
-
-                        {% if course_data.custom %}
-                            {% for custom in course_data.custom %}
-                                <div class="topics">
-                                    <h4 class="title-info"><em class="fa fa-book"></em> {{ custom.getTitle }}</h4>
-                                    <div class="content-info">
-                                        {{ custom.getContent }}
-                                    </div>
-                                </div>
-                            {% endfor %}
-                        {% endif %}
+                        </div>
                     </div>
+
                 </div>
-            </div>
+                <div class="col-md-4">
+                    <div class="card">
+                        <div class="card-body">
 
-            <div class="col-xs-12 col-md-5">
-                {% if course_data.coaches %}
-                    <div class="panel panel-default teachers">
-                        <div class="panel-heading">
-                            <h4>{{ "Coaches"|get_lang }}</h4>
-                        </div>
-                        <div class="panel-body">
-                            {% for coach in course_data.coaches %}
-                                <div class="row">
-                                    <div class="col-xs-7 col-md-7">
-                                        <h4>{{ coach.complete_name }}</h4>
-                                        {% for extra_field in coach.extra_fields %}
-                                            <dl>
-                                                <dt>{{ extra_field.value.getField().getDisplayText() }}</dt>
-                                                <dd>{{ extra_field.value.getValue() }}</dd>
-                                            </dl>
-                                        {% endfor %}
-                                    </div>
-                                    <div class="col-xs-5 col-md-5">
-                                        <div class="text-center">
-                                            <img class="img-circle" src="{{ coach.image }}" alt="{{ coach.complete_name }}">
+                            {% if course_data.coaches %}
+                                <div class="card-teachers">
+                                    <h3 class="cards-title">{{ "Coaches"|get_lang }}</h3>
+                                    {% for coach in course_data.coaches %}
+                                        <div class="coach-information">
+                                            <div class="coach-header">
+                                                <div class="coach-avatar">
+                                                    <img class="img-circle img-responsive" src="{{ coach.image }}"
+                                                         alt="{{ coach.complete_name }}">
+                                                </div>
+                                                <div class="coach-title">
+                                                    <h4>{{ coach.complete_name }}</h4>
+                                                    {% if coach.diploma %}
+                                                        <p>{{ coach.diploma }}</p>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                            {% if coach.openarea %}
+                                                <div class="open-area {{ course_data.coaches | length >= 2 ? 'open-more' : ' ' }}">
+                                                    <p>{{ coach.openarea }}</p>
+                                                </div>
+                                            {% endif %}
+                                            {% for coach_extra_field in coach.extra_fields %}
+                                                {% set coach_field = coach_extra_field.value.field %}
+                                                {% set coach_field_value = coach_extra_field.value.value %}
+                                                {% if not coach_field_value is empty %}
+                                                    <dl class="coach-extrafield">
+                                                        <dt class="extrafield_dt dt_{{ coach_field.variable }}">{{ coach_field.displayText }}</dt>
+                                                        <dd class="extrafield_dd dd_{{ coach_field.variable }}">{{ coach_extra_field.value.value }}</dd>
+                                                    </dl>
+                                                {% endif %}
+                                            {% endfor %}
                                         </div>
-                                    </div>
+                                    {% endfor %}
                                 </div>
-                            {% endfor %}
-                        </div>
-                    </div>
-                {% endif %}
-
-                {% if course_data.tags %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading">{{ 'Tags'|get_lang }}</div>
-                        <div class="panel-body">
-                            <ul class="list-inline">
-                                {% for tag in course_data.tags %}
-                                    <li>
-                                        <span class="label label-info">{{ tag.getTag }}</span>
-                                    </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                    </div>
-                {% endif %}
+                            {% endif %}
 
-                <div class="panel panel-default social-share">
-                    <div class="panel-heading">{{ "ShareWithYourFriends"|get_lang }}</div>
-                    <div class="panel-body">
-                        <div class="icons-social text-center">
-                            <a href="https://www.facebook.com/sharer/sharer.php?{{ {'u': page_url }|url_encode }}" target="_blank" class="btn bnt-link btn-lg">
-                                <em class="fa fa-facebook fa-2x"></em>
-                            </a>
-                            <a href="https://twitter.com/home?{{ {'status': session.getName() ~ ' ' ~ page_url }|url_encode }}" target="_blank" class="btn bnt-link btn-lg">
-                                <em class="fa fa-twitter fa-2x"></em>
-                            </a>
-                            <a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': page_url , 'title': session.getName() }|url_encode }}" target="_blank" class="btn bnt-link btn-lg">
-                                <em class="fa fa-linkedin fa-2x"></em>
-                            </a>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
     {% endfor %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="text-center">
-            {% if _u.logged and not is_subscribed %}
-                {{ subscribe_button }}
-            {% elseif not _u.logged %}
-                {% if 'allow_registration'|api_get_setting != 'false' %}
-                    <a href="{{ _p.web_main ~ 'auth/inscription.php' ~ redirect_to_session }}" class="btn btn-info btn-lg">
-                        <i class="fa fa-pencil" aria-hidden="true"></i> {{ 'SignUp'|get_lang }}
-                    </a>
-                {% endif %}
-            {% endif %}
-            </div>
-        </div>
     </div>
-</div>
+</section>
+
+<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: 500,
+            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>
+{% endautoescape %}

+ 6 - 0
src/ThemeBundle/Resources/views/Layout/topbar.html.twig

@@ -230,6 +230,12 @@
                         <span class="profile-text">{{ app.user.firstname }} {{ app.user.lastname }}</span>
                     </a>
                     <ul class="dropdown-menu">
+                        <li>
+                            <a title="{{ "Inbox"|trans }}" class="dropdown-item"
+                               href="{{ url('legacy_main', { 'name' : 'auth/profile.php' }) }}">
+                                <em class="fa fa-envelope" aria-hidden="true"></em> {{ "Edit profile"|trans }}
+                            </a>
+                        </li>
                         <li>
                             <a title="{{ "Inbox"|trans }}" class="dropdown-item"
                                href="{{ url('legacy_main', { 'name' : 'messages/inbox.php' }) }}">