Update Mindstate form interface

This commit is contained in:
Gregory Trullemans 2024-04-22 14:37:36 +02:00
parent 2bfa728daa
commit ff9bb5f7f9
3 changed files with 17 additions and 10 deletions

View File

@ -290,7 +290,7 @@ class WellBeingForm(forms.ModelForm):
"min": "1",
"max": "10",
"step": "1",
"class": "form-control",
"class": "form-control rtl",
}
),
"fatigue": forms.NumberInput(
@ -299,7 +299,7 @@ class WellBeingForm(forms.ModelForm):
"min": "1",
"max": "10",
"step": "1",
"class": "form-control",
"class": "form-control rtl",
}
),
"muscle_soreness": forms.NumberInput(
@ -308,7 +308,7 @@ class WellBeingForm(forms.ModelForm):
"min": "1",
"max": "10",
"step": "1",
"class": "form-control",
"class": "form-control rtl",
}
),
"informations": forms.Textarea(

View File

@ -68,7 +68,7 @@
</span>
{% endif %}
</div>
<div class="col-2 mt-2 text-center" id="mindstate_value"></div>
<label for="id_mindstate" class="col-2 mt-2 text-center" id="mindstate_value"></label>
</div>
<div class="form-group row ">
<label for="id_sleep" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Sleep <span class="text-danger"><b>*</b></span></label>
@ -82,7 +82,7 @@
</span>
{% endif %}
</div>
<div class="col-2 mt-2 text-center" id="sleep_value"></div>
<label for="id_sleep" class="col-2 mt-2 text-center" id="sleep_value"></label>
</div>
<div class="form-group row ">
<label for="id_stress" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Stress <span class="text-danger"><b>*</b></span></label>
@ -96,7 +96,7 @@
</span>
{% endif %}
</div>
<div class="col-2 mt-2 text-center" id="stress_value"></div>
<label for="id_stress" class="col-2 mt-2 text-center" id="stress_value"></label>
</div>
<div class="form-group row ">
<label for="id_fatigue" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Fatigue <span class="text-danger"><b>*</b></span></label>
@ -110,7 +110,7 @@
</span>
{% endif %}
</div>
<div class="col-2 mt-2 text-center" id="fatigue_value"></div>
<label for="id_fatigue" class="col-2 mt-2 text-center" id="fatigue_value"></label>
</div>
<div class="form-group row ">
<label for="id_muscle_soreness" class="col-4 col-sm-3 col-md-4 col-lg-4 col-xl-3 col-form-label">Muscle Soreness <span class="text-danger"><b>*</b></span></label>
@ -124,7 +124,7 @@
</span>
{% endif %}
</div>
<div class="col-2 mt-2 text-center" id="muscle_soreness_value"></div>
<label for="id_muscle_soreness" class="col-2 mt-2 text-center" id="muscle_soreness_value"></label>
<!-- <div class="col-4 col-sm-3 col-md-5 col-lg-5 pl-0 pr-0">
<p class="text-muted text-form-info mb-0 mt-2"><small>(1: Very Low - 10: Very High)</small></p>
</div> -->
@ -244,7 +244,7 @@
return false;
};
$('#id_mindstate, #id_sleep, #id_stress, #id_fatigue, #id_muscle_soreness').on('keyup', function(){
$('#id_mindstate, #id_sleep, #id_stress, #id_fatigue, #id_muscle_soreness').on('change', function(){
informations_needed = is_informations_needed();
if(informations_needed) {
@ -254,7 +254,7 @@
} else {
$("#note_info").hide();
$("#span_info_required").hide();
$("#note_info").show();
$("#div_submit").show();
}
});

View File

@ -161,6 +161,10 @@ input[type="range"] {
width: 100%;
}
input[type="range"].rtl {
direction: rtl;
}
/* range track */
input[type="range"]::-webkit-slider-runnable-track {
background: #317BB5;
@ -181,6 +185,9 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: #BEBEBE;
border-style: solid;
border-width: 1px;
border-color: #1B1D2B;
width: 2rem;
height: 1.3rem;
border-radius: 3px;