improvement of ranking by fontawesome - refs #2681

assets/css/scss/_base.scss

@@ -882,6 +882,9 @@ hr {
       position: absolute;
       bottom: 0;
       left: 0;
+      .btn-sm{
+        border-radius: 0;
+      }
     }
   }
   .card-ranking{
@@ -935,6 +938,40 @@ hr {
     }
   }
 }
+/***** RANKING ****/
+
+.rating-stars ul {
+  list-style-type:none;
+  padding:0;
+  -moz-user-select:none;
+  -webkit-user-select:none;
+  li{
+    &.star{
+      display:inline-block;
+      i{
+        &.fa{
+          font-size:1.25em;
+          color:#c3c3c3;
+        }
+      }
+      &:hover{
+        i{
+          &.fa{
+            color:#FFCC36;
+          }
+        }
+      }
+      &.selected{
+        i{
+          &.fa{
+            color:#FF912C;
+          }
+        }
+      }
+    }
+  }
+}
+
 
 /******************* ACCORDION B4 *****************/
 .accordion-b4 {

main/auth/courses_categories.php

@@ -41,7 +41,7 @@ $message = null;
 ?>
 <script>
     $(document).ready( function() {
-        $('.star-rating li a').on('click', function(event) {
+        $('#stars li').on('click', function(event) {
             var id = $(this).parents('ul').attr('id');
             $('#vote_label2_' + id).html("<?php echo get_lang('Loading'); ?>");
             $.ajax({

main/inc/lib/display.lib.php

@@ -1817,17 +1817,28 @@ class Display
         if (!empty($percentage)) {
             $percentage = $percentage * 125 / 100;
         }
+
         $accesses = isset($point_info['accesses']) ? $point_info['accesses'] : 0;
         $star_label = sprintf(get_lang('XStarsOutOf5'), $point_info['point_average_star']);
 
-        $html = '<ul id="'.$id.'" class="star-rating">
+        $html= '<section class="rating-widget">';
+        $html.= '<div class="rating-stars"><ul id="stars">';
+        $html.= '<li class="star" data-link="'.$url.'&amp;star=1" title="Poor" data-value="1"><i class="fa fa-star fa-fw"></i></li>
+                 <li class="star" data-link="'.$url.'&amp;star=2" title="Fair" data-value="2"><i class="fa fa-star fa-fw"></i></li>
+                 <li class="star" data-link="'.$url.'&amp;star=3" title="Good" data-value="3"><i class="fa fa-star fa-fw"></i></li>
+                 <li class="star" data-link="'.$url.'&amp;star=4" title="Excellent" data-value="4"><i class="fa fa-star fa-fw"></i></li>
+                 <li class="star" data-link="'.$url.'&amp;star=5" title="WOW!!!" data-value="5"><i class="fa fa-star fa-fw"></i></li>
+        ';
+        $html.= '</ul></div>';
+        $html.= '</section>';
+        /*$html.= '<ul id="'.$id.'" class="star-rating">
                     <li class="current-rating" style="width:'.$percentage.'px;"></li>
                     <li><a href="javascript:void(0);" data-link="'.$url.'&amp;star=1" title="'.$star_label.'" class="one-star">1</a></li>
                     <li><a href="javascript:void(0);" data-link="'.$url.'&amp;star=2" title="'.$star_label.'" class="two-stars">2</a></li>
                     <li><a href="javascript:void(0);" data-link="'.$url.'&amp;star=3" title="'.$star_label.'" class="three-stars">3</a></li>
                     <li><a href="javascript:void(0);" data-link="'.$url.'&amp;star=4" title="'.$star_label.'" class="four-stars">4</a></li>
                     <li><a href="javascript:void(0);" data-link="'.$url.'&amp;star=5" title="'.$star_label.'" class="five-stars">5</a></li>
-                </ul>';
+                </ul>';*/
 
         $labels = [];