Fix star width and rewrite star widget with nice hovering

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -1,3 +1,4 @@
+@import "core/static/core/devices";
 @import "core/static/core/colors";
 
 
@@ -7,10 +8,6 @@ $pedagogy-hover-blue: #0e97ce;
 $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
-$small-devices: 576px;
-$medium-devices: 768px;
-$large-devices: 992px;
-
 .pedagogy {
   &.star-not-checked {
     color: #f7f7f7;
@@ -256,7 +253,7 @@ $large-devices: 992px;
 
     .ue-details-container {
       display: grid;
-      grid-template-columns: 150px 100px auto;
+      grid-template-columns: 150px 130px auto;
       grid-template-rows: 156px 1fr;
       grid-template-areas:
       "grade grade-stars ue-infos"
@@ -523,4 +520,40 @@ details.accordion>.accordion-content {
   background-color: $white-color;
   border-color: $pedagogy-orange;
   border-right: none;
+}
+
+fieldset.star {
+  label {
+    display: inline;
+    cursor: pointer;
+  }
+
+  .checked {
+    color: orange;
+  }
+
+  .unchecked {
+    color: gray;
+  }
+
+  .hovered {
+    color: #FFD700;
+  }
+
+  .checked.hovered {
+    color: orange;
+  }
+
+  .removed {
+    color: red;
+  }
+
+  input[type="radio"] {
+    display: none;
+  }
+
+  label:first-child {
+    margin-right: 10px;
+  }
+
 }

pedagogy/templates/pedagogy/starlist.jinja

@@ -1,58 +1,44 @@
-<div>
+<fieldset
-  <style>
+  class="star"
-    .checked {
+  x-data="{ 'value': -1, 'hover': -1 }"
-      color : orange;
+  @mouseover.outside="hover = -1"
-    }
+>
-    .unchecked {
+  {# Do not vote button #}
-      color : gray;
+  <label
-    }
+    class="star"
-    .star input[type="radio"] {
+    @mouseover="hover = -1"
-      display : none;
+  >
-    }
+    <input
-    .star {
+      type="radio"
-      display: inline;
+      name="{{ widget.name }}"
-    }
+      value="-1"
-
+      @click="value = -1"
-  </style>
+    >
-
+    <i class="fa fa-times-circle"></i>
-    {# Do not vote button #}
+    {{ translations.do_not_vote }}
-  <label class="star">
-    <input type="radio" name="{{ widget.name }}" value="-1" onclick='
-                                                                     var stars = document.getElementsByClassName("{{ widget.name }}");
-                                                                     for (var i = 0; i < stars.length; i++){
-                                                                     var attrs = stars[i].getAttribute("class");
-                                                                     attrs = attrs.replace("unchecked", "");
-                                                                     attrs = attrs.replace("checked", "");
-                                                                     stars[i].setAttribute("class", attrs + " unchecked");
-                                                                     }
-                                                                    ' checked>
-    <span class="fa fa-times-circle"> {{ translations.do_not_vote }}</span>
   </label>
 
-    {# Star widget #}
+  {# Star widget #}
   {% for i in number_of_stars %}
-    <label class="star">
+    <label
-      <input type="radio" name="{{ widget.name }}" value="{{ forloop.counter0 }}" onclick='
+      class="star"
-                                                                                           var stars = document.getElementsByClassName("{{ widget.name }}");
+      @mouseover="hover = {{ forloop.counter0 }}"
-
+    >
-                                                                                           for (var i = 0; i < stars.length; i++){
+      <input
-                                                                                           var attrs = stars[i].getAttribute("class");
+        type="radio"
-                                                                                           attrs = attrs.replace("unchecked", "");
+        name="{{ widget.name }}"
-                                                                                           attrs = attrs.replace("checked", "");
+        value="{{ forloop.counter0 }}"
-                                                                                           if (i > {{ forloop.counter0 }}){
+        @click="value = {{ forloop.counter0 }}"
-                                                                                           stars[i].setAttribute("class", attrs + " unchecked");
+      >
-                                                                                           } else {
+      <i
-                                                                                           stars[i].setAttribute("class", attrs + " checked");
+        class="{{ widget.name }} fa fa-star"
-                                                                                           }
+        :class="{
-                                                                                           }
+                'checked': value >= {{ forloop.counter0 }},
-                                                                                          '>
+                'unchecked': value < {{ forloop.counter0 }},
-      <i class="{{ widget.name }} fa fa-star unchecked"></i>
+                'hovered': hover >= {{ forloop.counter0 }},
+                'removed': hover >= 0 && value >= {{ forloop.counter0 }} && hover < {{ forloop.counter0 }},
+                }"
+      ></i>
     </label>
   {% endfor %}
-
+</fieldset>
-    {# Restaure previous (-1 is default) #}
-  <script type="text/javascript">
-    document.querySelector("input[name='{{ widget.name }}'][value='{{ widget.value }}']").click()
-  </script>
-
-</div>