klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2026-08-26 15:19:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix star width and rewrite star widget with nice hovering

Browse Source
This commit is contained in:
klmp200
2026-08-21 00:14:04 +02:00
parent d6677b1fbd
commit 12135b5c22
2 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pedagogy/templates/pedagogy/starlist.jinja
+39 -53
View File
@@ -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>
</fieldset>