fix thematic progress course ref CT#7891

app/Resources/public/css/base.css

@@ -1861,18 +1861,6 @@ div.admin_section h4 {
     margin-bottom:5px;
     clear: both;
 }
-/*.question-list-description-block {
-    margin-bottom:10px !important;
-    margin-top: -6px !important;
-}*/
-
-.thematic_advance_content {
-    padding:10px;
-}
-
-.thematic_advance_actions {
-    width:100px;
-}
 
 .document_preview_container {
 
@@ -4472,30 +4460,47 @@ ul.holder li.bit-box{
   display: none;
 }
 /* thematic progress */
-#panel-thematic .title-topics{
+#thematic .title-topics{
   font-size: 15px;
   color:#00829C;
   font-weight: bold;
 }
-#panel-thematic .current{
-  background-color: #E7F1F7;
+#thematic .thematic-cont{
+    padding:15px;
+    border: 1px solid #EEEEEE;
+    border-radius: 5px;
 }
-#panel-thematic .separate{
-  margin-bottom: 10px;
+#thematic .thematic-avatar{
+    text-align: center;
+    margin-bottom: 20px;
 }
-#panel-thematic .date{
-  font-size: 11px;
-  color: #8A6D3B;
-  background: #FCF8E3;
-  border-radius: 4px;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  padding: 5px;
+#thematic .thematic-avatar .img-responsive{
+    display: inline-block;
+}
+#thematic .current{
+  background-color: #EEEEEE;
+  border: 1px dashed #B0B0B0;
+  border-radius: 5px;
+}
+#thematic .panel-heading{
+    padding: 0px;
 }
-#panel-thematic .views ul li{
+#thematic .panel-heading a{
+    padding: 10px 15px;
+    display: block;
+}
+#thematic .date{
   font-size: 12px;
 }
-
+#thematic .views ul li{
+  font-size: 12px;
+}
+.arrow{
+    background: url("../../main/img/icons/22/arrow-up-collapse.png") no-repeat 99% center;
+}
+.arrow.collapsed{
+    background: url("../../main/img/icons/22/arrow-down-collapse.png") no-repeat 99% center;
+}
 .question_options .exercise-unique-answer-image .radio{
   padding-left: 10px;
   margin-left: 0px;

main/inc/introductionSection.inc.php

@@ -249,42 +249,26 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
         );
         $userInfo = $_SESSION['_user'];
         $courseInfo = api_get_course_info();
-        $thematic_description_html = '
-            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
-            <div id="panel-thematic" class="panel panel-default">
-                <div class="panel-heading">
-                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                <h4>
-                    '. $thematic_advance .' : '. $courseInfo['name'] . ' <b>( '. $thematicScore .' )</b>
-                </h4>
-                </a>
-                </div>
-                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
-                <div class="panel-body">
-                    <div class="row">
-                        <div class="col-md-3">
-                            <div class="thumbnail">
-                                <img src="' . $userInfo['avatar'] . '" class="img-responsive">
-                            </div>
-                            <div class="progress">
-                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: ' . $thematicScore . ';">
-                                    '.$thematicScore.'
-                                </div>
-                            </div>
-                            <div class="separate">
-                                <a href="' . $thematicUrl . '" class="btn btn-block btn-info">' . get_lang('ShowFullCourseAdvance') . '</a>
-                            </div>
-                        </div>';
-
-        $thematic_description_html .= '<div class="col-md-9">';
-
-        $thematic_description_html .= '<div class="row">';
-        $thematic_description_html .= '<div class="col-md-6 items-progress'.$class1.'">
+        $titleThematic = $thematic_advance .' : '. $courseInfo['name'] . ' <b>( '. $thematicScore .' )</b>';
+       
+            
+                        
+        $infoUser = '<div class="thematic-avatar"><img src="' . $userInfo['avatar'] . '" class="img-circle img-responsive"></div>';
+        $infoUser .= '<div class="progress">
+                        <div class="progress-bar progress-bar-danger" role="progressbar" style="width: ' . $thematicScore . ';">
+                        '.$thematicScore.'
+                        </div>
+                    </div>';
+        
+        
+        $thematicItemOne .= '<div class="col-md-6 items-progress">
+                                    <div class="thematic-cont '.$class1.'">
                                     <div class="topics">' . $subTitle1 . '</div>
-                                    <h4 class="title-topics">' . $thematic_info['title'] . '</h4>
-                                    <p class="date">' . $thematic_advance_info['start_date'] . '</p>
-                                    <div class="views">' . $thematic_advance_info['content'] . '</div>
-                                    <p class="time">' . get_lang('DurationInHours') . ' : ' . $thematic_advance_info['duration'] . ' - <a href="' . $thematicUrl . '">' . get_lang('SeeDetail') . '</a></p>
+                                    <h4 class="title-topics">' . Display::returnFontAswesomeIcon('book') . $thematic_info['title'] . '</h4>
+                                    <p class="date">' .  Display::returnFontAswesomeIcon('calendar-o') . $thematic_advance_info['start_date'] . '</p>
+                                    <div class="views">' . Display::returnFontAswesomeIcon('file-text-o')  . strip_tags($thematic_advance_info['content']). '</div>
+                                    <p class="time">'. Display::returnFontAswesomeIcon('clock-o') . get_lang('DurationInHours') . ' : ' . $thematic_advance_info['duration'] . ' - <a href="' . $thematicUrl . '">' . get_lang('SeeDetail') . '</a></p>
+                                    </div>
                                 </div>';
 
         if (!empty($thematic_advance_info2)) {
@@ -292,23 +276,34 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
             $thematic_advance_info2['start_date'] = api_get_local_time($thematic_advance_info2['start_date']);
             $thematic_advance_info2['start_date'] = api_format_date($thematic_advance_info2['start_date'], DATE_TIME_FORMAT_LONG);
 
-            $thematic_description_html .= '
+            $thematicItemTwo .= '
                 <div class="col-md-6 items-progress">
+                    <div class="thematic-cont">
                     <div class="topics">'.$subTitle2.'</div>
-                    <h4 class="title-topics">'.$thematic_info2['title'].'</h4>
-                    <p class="date">'.$thematic_advance_info2['start_date'].'</p>
-                    <div class="views">'.$thematic_advance_info2['content'].'</div>
-                    <p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].' - <a href="'.$thematicUrl.'">'.get_lang('SeeDetail').'</a></p>
+                    <h4 class="title-topics">'. Display::returnFontAswesomeIcon('book')  . $thematic_info2['title'].'</h4>
+                    <p class="date">' . Display::returnFontAswesomeIcon('calendar-o') .$thematic_advance_info2['start_date'].'</p>
+                    <div class="views">' . Display::returnFontAswesomeIcon('file-text-o')  . strip_tags($thematic_advance_info2['content']).'</div>
+                    <p class="time">'. Display::returnFontAswesomeIcon('clock-o') .get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].' - <a href="'.$thematicUrl.'">'.get_lang('SeeDetail').'</a></p>
+                    </div>
                 </div>';
         }
-        $thematic_description_html.='</div>';
-        $thematic_description_html.='</div></div></div></div></div></div>';
+       
+        
+        $thematicPanel = '<div class="row">';
+        $thematicPanel .= '<div class="col-md-2">' . $infoUser . '</div>';
+        $thematicPanel .= '<div class="col-md-10"><div class="row">' . $thematicItemOne . $thematicItemTwo . '</div></div>';
+        $thematicPanel .= '</div>';
+        $thematicPanel .= '<div class="separate">
+                        <a href="' . $thematicUrl . '" class="btn btn-default btn-block">' . get_lang('ShowFullCourseAdvance') . '</a>
+                    </div>';
+        $thematicProgress = Display::panelCollapse($titleThematic, $thematicPanel, 'thematic', null, 'accordion-thematic', 'collapse-thematic', false);
     }
 }
 $introduction_section .= '<div class="row">';
 if (!empty($thematic_advance_info)) {
     $introduction_section .= '<div class="col-md-12">';
     $introduction_section .= $thematic_description_html;
+    $introduction_section .= $thematicProgress;
     $introduction_section .= '</div>';
 }
 $editIconButton = '';

main/inc/lib/display.lib.php

@@ -2219,16 +2219,16 @@ class Display
 
         return "$icon ";
     }
-    public static function panelCollapse($title, $content, $id = null, $params = null, $idAccordion = null, $idCollpase = null)
+    public static function panelCollapse($title, $content, $id = null, $params = null, $idAccordion = null, $idCollpase = null, $open = true)
     {   
         if (!empty($idAccordion)) {
             $html = null;
             $html .= '<div class="panel-group" id="'.$idAccordion.'" role="tablist" aria-multiselectable="true">' . PHP_EOL;
             $html .= '<div class="panel panel-default" id="'.$id.'">' . PHP_EOL;
             $html .= '<div class="panel-heading" role="tab"><h4 class="panel-title">' . PHP_EOL;
-            $html .= '<a role="button" data-toggle="collapse" data-parent="#'.$idAccordion.'" href="#'.$idCollpase.'" aria-expanded="true" aria-controls="'.$idCollpase.'">'.$title.'</a>' . PHP_EOL;
+            $html .= '<a class="arrow '.($open===true?'':'collapsed').'" role="button" data-toggle="collapse" data-parent="#'.$idAccordion.'" href="#'.$idCollpase.'" aria-expanded="true" aria-controls="'.$idCollpase.'">'.$title.'</a>' . PHP_EOL;
             $html .= '</h4></div>' . PHP_EOL;
-            $html .= '<div id="'.$idCollpase.'" class="panel-collapse collapse in" role="tabpanel">' . PHP_EOL;
+            $html .= '<div id="'.$idCollpase.'" class="panel-collapse collapse '.($open===true?'in':'').'" role="tabpanel">' . PHP_EOL;
             $html .= '<div class="panel-body">'.$content.'</div>' . PHP_EOL;
             $html .= '</div></div></div>' . PHP_EOL;
 
@@ -2246,5 +2246,4 @@ class Display
         }
         return $html;
     }
-
 }