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/static/pedagogy/css/pedagogy.scss
+38 -5
View File
@@ -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
+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>