Show course info in skill wheel - refs BT#9583 #7385

main/inc/ajax/skill.ajax.php

@@ -74,7 +74,11 @@ switch ($action) {
         break;
     case 'get_course_info_popup':
         $course_info = api_get_course_info($_REQUEST['code']);
-        $courses = CourseManager::process_hot_course_item(array($course_info['real_id']));
+        $courses = CourseManager::process_hot_course_item(
+            [
+                ['c_id' => $course_info['real_id']]
+            ]
+        );
         Display::display_no_header();
         Display::$global_template->assign('hot_courses', $courses);
         echo Display::$global_template->fetch('default/layout/hot_course_item_popup.tpl');

main/template/default/layout/hot_course_item_popup.tpl

@@ -1,27 +1,23 @@
 {% for hot_course in hot_courses %}               
     {% if hot_course.extra_info.title %}        
-        <div class="span5">
-            <div class="well_border">
-                <div class="row">
-                    <div class="span2">
-                        <div class="thumbnail">
-                            <img src="{{ hot_course.extra_info.course_image }}" />                                    
-                        </div>
-                    </div>
-                    <div class="span2">
-                        <div class="categories-course-description">
-                            <h3>{{ hot_course.extra_info.title}}</h3>
-                            <h5>{{ hot_course.extra_info.teachers }}</h5>
-                            {# hot_course.extra_info.rating_html #}
-                        </div>
-                        <p>
-                            {{ hot_course.extra_info.description_button }}
-                            {{ hot_course.extra_info.go_to_course_button }}
-                            {{ hot_course.extra_info.register_button }}
-                        </p>
-                    </div>
+        <div class="row">
+            <div class="col-sm-3">
+                <div class="thumbnail">
+                    <img src="{{ hot_course.extra_info.course_image }}" />
                 </div>
             </div>
+            <div class="col-sm-9">
+                <div class="categories-course-description">
+                    <h3>{{ hot_course.extra_info.title}}</h3>
+                    <h5>{{ hot_course.extra_info.teachers }}</h5>
+                    {# hot_course.extra_info.rating_html #}
+                </div>
+                <p>
+                    {{ hot_course.extra_info.description_button }}
+                    {{ hot_course.extra_info.go_to_course_button }}
+                    {{ hot_course.extra_info.register_button }}
+                </p>
+            </div>
         </div>
     {% endif %}
-{% endfor %}
+{% endfor %}

main/template/default/skill/skill_wheel_student.tpl

@@ -92,20 +92,22 @@ $(document).ready(function() {
     });
 
     /* When clicking in a course title */
-    $("#skill_info").on("click", "a.course_description_popup", function() {
-        course_code = $(this).attr('rel');
-        $.ajax({
-            url: url+'&a=get_course_info_popup&code='+course_code,
-            async: false,
-            success: function(data) {
-                $('#course_info').html(data);
-                $("#dialog-course-info").dialog({
-                     close: function() {
-                        $('#course_info').html('');
-                    }
-                });
-                $("#dialog-course-info").dialog("open");
+    $("#skill_info").on("click", "a.course_description_popup", function(e) {
+        e.preventDefault();
+
+        var getCourseInfo = $.ajax(
+            url,
+            {
+                data: {
+                    a: 'get_course_info_popup',
+                    code: $(this).attr('rel')
+                }
             }
+        );
+
+        $.when(getCourseInfo).done(function(response) {
+            $('#frm-course-info').find('.modal-body').html(response);
+            $('#frm-course-info').modal('show');
         });
     });
 
@@ -141,15 +143,11 @@ $(document).ready(function() {
         newel: true
     });
 
-    //Open dialog
-    $("#dialog-course-info").dialog({
-        autoOpen: false,
-        modal   : true,
-        width   : 550,
-        height  : 250
-    });
-
     load_nodes(0, main_depth);
+
+    $('#frm-course-info').on('', function() {
+        $('#frm-course-info').find('.modal-body').html('');
+    });
 });
 
 </script>
@@ -260,10 +258,6 @@ $(document).ready(function() {
                 </div>
             </div>
         </div>
-        <div id="dialog-course-info" style="display:none;">
-            <div id="course_info">
-            </div>
-        </div>
     </div>
 </div>
 
@@ -285,3 +279,20 @@ $(document).ready(function() {
         </div>
     </div>
 </div>
+
+<div class="modal fade" id="frm-course-info" tabindex="-1" role="dialog" aria-labelledby="form-course-info-title" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="form-course-info-title">{{ "ChooseCourse" | get_lang }}</h4>
+            </div>
+            <div class="modal-body"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close" | get_lang }}</button>
+            </div>
+        </div>
+    </div>
+</div>