fix list of teachers in the course catalog - #2144

app/Resources/public/css/base.css

@@ -7126,3 +7126,24 @@ input.form-control[type="color"] {
     width: 21.33333px;
     height: 14.22222px;
 }
+.popover{
+    width:400px;
+}
+.popover-title{
+    text-align: left;
+}
+.popover-content {
+    max-width:400px;
+    display: inline-block;
+}
+.popover-content .popover-teacher{
+    display: block;
+    width: 50%;
+    float: left;
+}
+.popover-content .popover-teacher .ajax{
+    float: left;
+}
+.popover-content .popover-teacher .teachers-details{
+    text-align: left;
+}

main/auth/courses_categories.php

@@ -349,17 +349,35 @@ function return_teacher($courseInfo)
     }
 
     $html = '<div class="block-author">';
-    foreach ($teachers as $value) {
-        $name = $value['firstname'].' '.$value['lastname'];
-        if ($length > 2) {
-             $html .= '<a href="'.$value['url'].'" class="ajax" data-title="'.$name.'" title="'.$name.'">
-                    <img src="'.$value['avatar'].'" alt="'.get_lang('UserPicture').'"/></a>';
-        } else {
+    if($length > 6){
+        $html .= '<a id="plist" data-trigger="focus" tabindex="0" role="button" class="btn btn-default panel_popover" data-toggle="popover" title="'.get_lang('CourseTeachers').'" data-html="true">
+                                        <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+                                    </a>';
+        $html .= '<div id="popover-content-plist" class="hide">';
+        foreach ($teachers as $value) {
+            $name = $value['firstname'].' '.$value['lastname'];
+            $html .= '<div class="popover-teacher">';
             $html .= '<a href="'.$value['url'].'" class="ajax" data-title="'.$name.'" title="'.$name.'">
-                    <img src="'.$value['avatar'].'" alt="'.get_lang('UserPicture').'"/></a>';
-            $html .= '<div class="teachers-details"><h5>
-                    <a href="'.$value['url'].'" class="ajax" data-title="'.$name.'">'
-                    . $name.'</a></h5><p>'.get_lang('Teacher').'</p></div>';
+                        <img src="'.$value['avatar'].'" alt="'.get_lang('UserPicture').'"/></a>';
+                $html .= '<div class="teachers-details"><h5>
+                        <a href="'.$value['url'].'" class="ajax" data-title="'.$name.'">'
+                        . $name.'</a></h5></div>';
+            $html .= '</div>';
+        }
+        $html .= '</div>';
+    } else {
+        foreach ($teachers as $value) {
+            $name = $value['firstname'].' '.$value['lastname'];
+            if ($length > 2) {
+                 $html .= '<a href="'.$value['url'].'" class="ajax" data-title="'.$name.'" title="'.$name.'">
+                        <img src="'.$value['avatar'].'" alt="'.get_lang('UserPicture').'"/></a>';
+            } else {
+                $html .= '<a href="'.$value['url'].'" class="ajax" data-title="'.$name.'" title="'.$name.'">
+                        <img src="'.$value['avatar'].'" alt="'.get_lang('UserPicture').'"/></a>';
+                $html .= '<div class="teachers-details"><h5>
+                        <a href="'.$value['url'].'" class="ajax" data-title="'.$name.'">'
+                        . $name.'</a></h5><p>'.get_lang('Teacher').'</p></div>';
+            }
         }
     }
     $html .= '</div>';

main/template/default/layout/footer.js.tpl

@@ -1,6 +1,21 @@
 <script>
     /* Makes row highlighting possible */
     $(document).ready( function() {
+         $("[data-toggle=popover]").each(function(i, obj) {
+
+            $(this).popover({
+              html: true,
+              content: function() {
+                var id = $(this).attr('id')
+                return $('#popover-content-' + id).html();
+              }
+            });
+            
+            
+            
+
+            });
+        
         // Date time settings.
         moment.locale('{{ locale }}');
         $.datepicker.setDefaults($.datepicker.regional["{{ locale }}"]);

main/template/default/user_portal/grid_courses_without_category.tpl

@@ -48,28 +48,52 @@
                                 </h4>
                             </div>
                             <div class="block-author">
-                                {% for teacher in item.teachers %}
-                                    {% if item.teachers | length > 2 %}
-                                        <a href="{{ teacher.url }}" class="ajax"
-                                           data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                            <img src="{{ teacher.avatar }}"/>
-                                        </a>
-                                    {% else %}
-                                        <a href="{{ teacher.url }}" class="ajax"
-                                           data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                            <img src="{{ teacher.avatar }}"/>
-                                        </a>
-                                        <div class="teachers-details">
-                                            <h5>
-                                                <a href="{{ teacher.url }}" class="ajax"
-                                                   data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                                    {{ teacher.firstname }} {{ teacher.lastname }}
-                                                </a>
-                                            </h5>
-                                            <p>{{ 'Teacher' | get_lang }}</p>
+                                {% if item.teachers | length > 6 %}
+                                    <a id="plist" data-trigger="focus" tabindex="0" role="button" class="btn btn-default panel_popover" data-toggle="popover" title="{{ 'CourseTeachers' | get_lang }}" data-html="true">
+                                        <i class="fa fa-graduation-cap" aria-hidden="true"></i>
+                                    </a>
+                                    <div id="popover-content-plist" class="hide">
+                                        {% for teacher in item.teachers %}
+                                        <div class="popover-teacher">
+                                            <a href="{{ teacher.url }}" class="ajax"
+                                               data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                                <img src="{{ teacher.avatar }}"/>
+                                            </a>
+                                            <div class="teachers-details">
+                                                <h5>
+                                                    <a href="{{ teacher.url }}" class="ajax"
+                                                       data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                                        {{ teacher.firstname }} {{ teacher.lastname }}
+                                                    </a>
+                                                </h5>
+                                            </div>
                                         </div>
-                                    {% endif %}
-                                {% endfor %}
+                                        {% endfor %}
+                                    </div>
+                                {% else %}
+                                    {% for teacher in item.teachers %}
+                                        {% if item.teachers | length <= 2 %}
+                                            <a href="{{ teacher.url }}" class="ajax"
+                                               data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                                <img src="{{ teacher.avatar }}"/>
+                                            </a>
+                                            <div class="teachers-details">
+                                                <h5>
+                                                    <a href="{{ teacher.url }}" class="ajax"
+                                                       data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                                        {{ teacher.firstname }} {{ teacher.lastname }}
+                                                    </a>
+                                                </h5>
+                                                <p>{{ 'Teacher' | get_lang }}</p>
+                                            </div>                                       
+                                        {% elseif item.teachers | length <= 6 %}
+                                            <a href="{{ teacher.url }}" class="ajax"
+                                               data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                                <img src="{{ teacher.avatar }}"/>
+                                            </a>
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endif %}
                             </div>
                             {% if item.notifications %}
                                 <div class="notifications">{{ item.notifications }}</div>