From 12135b5c227a2bfc9b8cd6c32b1c8d31ff83e833 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Thu, 20 Aug 2026 17:29:35 +0200
Subject: [PATCH] Fix star width and rewrite star widget with nice hovering

---
 pedagogy/static/pedagogy/css/pedagogy.scss | 43 ++++++++--
 pedagogy/templates/pedagogy/starlist.jinja | 92 +++++++++-------------
 2 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss
index d7dc424a..eeacedfe 100644
--- a/pedagogy/static/pedagogy/css/pedagogy.scss
+++ b/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;
+  }
+
 }
\ No newline at end of file
diff --git a/pedagogy/templates/pedagogy/starlist.jinja b/pedagogy/templates/pedagogy/starlist.jinja
index 02379e03..a122d6b8 100644
--- a/pedagogy/templates/pedagogy/starlist.jinja
+++ b/pedagogy/templates/pedagogy/starlist.jinja
@@ -1,58 +1,44 @@
-<div>
-  <style>
-    .checked {
-      color : orange;
-    }
-    .unchecked {
-      color : gray;
-    }
-    .star input[type="radio"] {
-      display : none;
-    }
-    .star {
-      display: inline;
-    }
-
-  </style>
-
-    {# Do not vote button #}
-  <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>
+<fieldset
+  class="star"
+  x-data="{ 'value': -1, 'hover': -1 }"
+  @mouseover.outside="hover = -1"
+>
+  {# Do not vote button #}
+  <label
+    class="star"
+    @mouseover="hover = -1"
+  >
+    <input
+      type="radio"
+      name="{{ widget.name }}"
+      value="-1"
+      @click="value = -1"
+    >
+    <i class="fa fa-times-circle"></i>
+    {{ translations.do_not_vote }}
   </label>
 
-    {# Star widget #}
+  {# Star widget #}
   {% for i in number_of_stars %}
-    <label class="star">
-      <input type="radio" name="{{ widget.name }}" value="{{ forloop.counter0 }}" 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", "");
-                                                                                           if (i > {{ forloop.counter0 }}){
-                                                                                           stars[i].setAttribute("class", attrs + " unchecked");
-                                                                                           } else {
-                                                                                           stars[i].setAttribute("class", attrs + " checked");
-                                                                                           }
-                                                                                           }
-                                                                                          '>
-      <i class="{{ widget.name }} fa fa-star unchecked"></i>
+    <label
+      class="star"
+      @mouseover="hover = {{ forloop.counter0 }}"
+    >
+      <input
+        type="radio"
+        name="{{ widget.name }}"
+        value="{{ forloop.counter0 }}"
+        @click="value = {{ forloop.counter0 }}"
+      >
+      <i
+        class="{{ widget.name }} fa fa-star"
+        :class="{
+                'checked': value >= {{ forloop.counter0 }},
+                'unchecked': value < {{ forloop.counter0 }},
+                'hovered': hover >= {{ forloop.counter0 }},
+                'removed': hover >= 0 && value >= {{ forloop.counter0 }} && hover < {{ forloop.counter0 }},
+                }"
+      ></i>
     </label>
   {% endfor %}
-
-    {# Restaure previous (-1 is default) #}
-  <script type="text/javascript">
-    document.querySelector("input[name='{{ widget.name }}'][value='{{ widget.value }}']").click()
-  </script>
-
-</div>
\ No newline at end of file
+</fieldset>
\ No newline at end of file