Skip to content
Snippets Groups Projects
Commit db4dfa50 authored by Johannes Wolf's avatar Johannes Wolf
Browse files

fix vote buttons

parent 7ab97485
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
evap/development/templates/development_components.html
+ 31
− 31
View file @ db4dfa50
...@@ -270,29 +270,29 @@ ...@@ -270,29 +270,29 @@
Unipolar Unipolar
</div> </div>
<div class="vote-answer-buttons"> <div class="vote-answer-buttons">
<div class="vote-inputs vote-type-unipolar btn-group btn-group-toggle" data-bs-toggle="buttons"> <div class="vote-inputs vote-type-unipolar btn-group" data-bs-toggle="buttons">
<input class="btn-check" type="radio" value="1" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-green d-flex"> <label class="btn btn-sm vote-btn vote-btn-green d-flex">
<input type="radio" value="1" autocomplete="off" />
<span class="m-auto vote-btn-text">Strongly<br />agree </span> <span class="m-auto vote-btn-text">Strongly<br />agree </span>
</label> </label>
<input class="btn-check" type="radio" value="2" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-lime d-flex"> <label class="btn btn-sm vote-btn vote-btn-lime d-flex">
<input type="radio" value="2" autocomplete="off" />
<span class="m-auto vote-btn-text">Agree </span> <span class="m-auto vote-btn-text">Agree </span>
</label> </label>
<input class="btn-check" type="radio" value="3" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-yellow d-flex"> <label class="btn btn-sm vote-btn vote-btn-yellow d-flex">
<input type="radio" value="3" autocomplete="off" />
<span class="m-auto vote-btn-text">Neutral </span> <span class="m-auto vote-btn-text">Neutral </span>
</label> </label>
<input class="btn-check" type="radio" value="4" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-orange d-flex"> <label class="btn btn-sm vote-btn vote-btn-orange d-flex">
<input type="radio" value="4" autocomplete="off" />
<span class="m-auto vote-btn-text">Disagree </span> <span class="m-auto vote-btn-text">Disagree </span>
</label> </label>
<input class="btn-check" type="radio" value="5" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-red d-flex"> <label class="btn btn-sm vote-btn vote-btn-red d-flex">
<input type="radio" value="5" autocomplete="off" />
<span class="m-auto vote-btn-text">Strongly<br />disagree </span> <span class="m-auto vote-btn-text">Strongly<br />disagree </span>
</label> </label>
<input class="btn-check" type="radio" value="6" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-gray d-flex"> <label class="btn btn-sm vote-btn vote-btn-gray d-flex">
<input type="radio" value="6" autocomplete="off" />
<span class="m-auto vote-btn-text">No answer </span> <span class="m-auto vote-btn-text">No answer </span>
</label> </label>
</div> </div>
...@@ -303,37 +303,37 @@ ...@@ -303,37 +303,37 @@
Bipolar Bipolar
</div> </div>
<div class="vote-answer-buttons"> <div class="vote-answer-buttons">
<div class="vote-inputs vote-type-bipolar btn-group btn-group-toggle" data-bs-toggle="buttons"> <div class="vote-inputs vote-type-bipolar btn-group" data-bs-toggle="buttons">
<input class="btn-check" type="radio" value="-3" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-red d-flex"> <label class="btn btn-sm vote-btn vote-btn-red d-flex">
<input type="radio" value="-3" autocomplete="off" />
<span class="m-auto vote-btn-text">Way too<br />small</span> <span class="m-auto vote-btn-text">Way too<br />small</span>
</label> </label>
<input class="btn-check" type="radio" value="-2" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-orange d-flex"> <label class="btn btn-sm vote-btn vote-btn-orange d-flex">
<input type="radio" value="-2" autocomplete="off" />
<span class="m-auto vote-btn-text">Too<br />small</span> <span class="m-auto vote-btn-text">Too<br />small</span>
</label> </label>
<input class="btn-check" type="radio" value="-1" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-lime d-flex"> <label class="btn btn-sm vote-btn vote-btn-lime d-flex">
<input type="radio" value="-1" autocomplete="off" />
<span class="m-auto vote-btn-text">Slightly too<br />small</span> <span class="m-auto vote-btn-text">Slightly too<br />small</span>
</label> </label>
<input class="btn-check" type="radio" value="0" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-green d-flex"> <label class="btn btn-sm vote-btn vote-btn-green d-flex">
<input type="radio" value="0" autocomplete="off" />
<span class="m-auto vote-btn-text">Ideal</span> <span class="m-auto vote-btn-text">Ideal</span>
</label> </label>
<input class="btn-check" type="radio" value="1" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-lime d-flex"> <label class="btn btn-sm vote-btn vote-btn-lime d-flex">
<input type="radio" value="1" autocomplete="off" />
<span class="m-auto vote-btn-text">Slightly too<br />large</span> <span class="m-auto vote-btn-text">Slightly too<br />large</span>
</label> </label>
<input class="btn-check" type="radio" value="2" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-orange d-flex"> <label class="btn btn-sm vote-btn vote-btn-orange d-flex">
<input type="radio" value="2" autocomplete="off" />
<span class="m-auto vote-btn-text">Too<br />large</span> <span class="m-auto vote-btn-text">Too<br />large</span>
</label> </label>
<input class="btn-check" type="radio" value="3" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-red d-flex"> <label class="btn btn-sm vote-btn vote-btn-red d-flex">
<input type="radio" value="3" autocomplete="off" />
<span class="m-auto vote-btn-text">Way too<br />large</span> <span class="m-auto vote-btn-text">Way too<br />large</span>
</label> </label>
<input class="btn-check" type="radio" value="6" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-gray d-flex"> <label class="btn btn-sm vote-btn vote-btn-gray d-flex">
<input type="radio" value="6" autocomplete="off" />
<span class="m-auto vote-btn-text">No answer</span> <span class="m-auto vote-btn-text">No answer</span>
</label> </label>
</div> </div>
...@@ -344,17 +344,17 @@ ...@@ -344,17 +344,17 @@
Yes-No Yes-No
</div> </div>
<div class="vote-answer-buttons"> <div class="vote-answer-buttons">
<div class="vote-inputs vote-type-yes-no btn-group btn-group-toggle" data-bs-toggle="buttons"> <div class="vote-inputs vote-type-yes-no btn-group" data-bs-toggle="buttons">
<input class="btn-check" type="radio" value="1" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-green d-flex"> <label class="btn btn-sm vote-btn vote-btn-green d-flex">
<input type="radio" value="1" autocomplete="off" />
<span class="m-auto vote-btn-text">Yes</span> <span class="m-auto vote-btn-text">Yes</span>
</label> </label>
<input class="btn-check" type="radio" value="5" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-red d-flex"> <label class="btn btn-sm vote-btn vote-btn-red d-flex">
<input type="radio" value="5" autocomplete="off" />
<span class="m-auto vote-btn-text">No</span> <span class="m-auto vote-btn-text">No</span>
</label> </label>
<input class="btn-check" type="radio" value="6" autocomplete="off" />
<label class="btn btn-sm vote-btn vote-btn-gray d-flex"> <label class="btn btn-sm vote-btn vote-btn-gray d-flex">
<input type="radio" value="6" autocomplete="off" />
<span class="m-auto vote-btn-text">No answer</span> <span class="m-auto vote-btn-text">No answer</span>
</label> </label>
</div> </div>
......
evap/static/scss/components/_buttons.scss
+ 8
− 4
View file @ db4dfa50
...@@ -219,12 +219,16 @@ a.collapse-toggle { ...@@ -219,12 +219,16 @@ a.collapse-toggle {
&:hover { &:hover {
background-color: change-color($color, $lightness: 85%); background-color: change-color($color, $lightness: 85%);
} }
}
&.active { .btn-check:checked + .vote-btn-#{$name} {
background-color: $color; background-color: $color;
color: change-color($color, $lightness: 30%); color: change-color($color, $lightness: 30%);
} }
} }
.btn-group > .vote-btn {
flex: 0 1 auto;
} }
.btn-area { .btn-area {
......
evap/student/templates/student_vote_questionnaire_group.html
+ 3
− 3
View file @ db4dfa50
...@@ -43,10 +43,10 @@ ...@@ -43,10 +43,10 @@
{% endif %} {% endif %}
{% if field|is_choice_field %} {% if field|is_choice_field %}
<div class="col-answer col-lg-8 col-xl-7 my-auto d-flex"> <div class="col-answer col-lg-8 col-xl-7 my-auto d-flex">
<div class="vote-inputs tab-row {{ field.field.widget.attrs.choices.cssClass }} btn-group btn-group-toggle" data-bs-toggle="buttons"> <div class="vote-inputs tab-row {{ field.field.widget.attrs.choices.cssClass }} btn-group" data-bs-toggle="buttons">
{% for choice, color in field|zip:field.field.widget.attrs.choices.colors %} {% for choice, color in field|zip:field.field.widget.attrs.choices.colors %}
<label class="btn btn-sm vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}"> <input id="{{ choice.id_for_label }}" class="tab-selectable num-selectable btn-check" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" autocomplete="off"{% if field.value == choice.data.value %} checked{% endif %}{% if preview %} disabled{% endif %}/>
<input id="{{ choice.id_for_label }}" class="tab-selectable num-selectable" name="{{ choice.data.name }}" type="radio" value="{{ choice.data.value }}" autocomplete="off"{% if field.value == choice.data.value %} checked{% endif %}{% if preview %} disabled{% endif %}/> <label for="{{ choice.id_for_label }}" class="btn btn-sm vote-btn vote-btn-{{ color }} d-flex{% if field.value == choice.data.value %} active{% endif %}{% if field.errors %} choice-error{% endif %}">
<span class="m-auto vote-btn-text">{{ choice.choice_label|linebreaksbr }} {{ choice.id }}</span> <span class="m-auto vote-btn-text">{{ choice.choice_label|linebreaksbr }} {{ choice.id }}</span>
</label> </label>
{% endfor %} {% endfor %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment