Skip to content

Commit

Permalink
Use bootstrap grid for staff evaluation (#1889)
Browse files Browse the repository at this point in the history 
* Use bootstrap grid for staff evaluation

* Use data-cols for review grid

* Fix indentation, set grid-area correctly

* less padding

* Use min-content for last three columns

* fix padding

* increase padding

* move styling to scss

* show original answer below

* better scss nesting

* improvements
- rename grid-row template to table-grid
- move classes to scss
- use border-bottom

---------

Co-authored-by: Johannes Wolf <[email protected]>
  • Loading branch information
@FranzSw @janno42
FranzSw and janno42 authored Nov 20, 2023
1 parent 23c3757 commit 42c6df4
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 54 deletions.
98 changes: 47 additions & 51 deletions evap/staff/templates/staff_evaluation_textanswers_section.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,64 +8,60 @@
<div class="card-body">
{% for result in results %}
<p>{{ result.question.text }}</p>
<table class="table table-striped{% if not forloop.last %} mb-4{% endif %}">
<thead>
<tr>
<th style="width: 75%">{% trans 'Text answer' %}</th>
<th style="width: 5%"></th>
<th style="width: 15%">{% trans 'Decision' %}</th>
<th style="width: 5%">{% trans 'Flag' %}</th>
</tr>
</thead>
<tbody>
{% for answer in result.answers %}
<tr id="{{ answer.id }}">
<td class="text-answer">
{{ answer.answer|linebreaksbr }}
{% if answer.original_answer %}
<br />
<span class="textanswer-original">({{ answer.original_answer|linebreaksbr }})</span>
{% endif %}
</td>
<td>
{% if user.is_manager %}
<a class="btn btn-sm btn-outline-secondary" href="{% url 'staff:evaluation_textanswer_edit' answer.id %}"><span class="fas fa-pencil"></a>
{% endif %}
</td>
<td>
<form class="full-update-textanswer-form" method="POST" action="{% url 'staff:evaluation_textanswers_update_publish' %}">
{% csrf_token %}
<div class="grid-striped textanswer-review-grid container{% if not forloop.last %} mb-4{% endif %}">
<div class="grid-row fw-bold">
<div>{% trans 'Text answer' %}</div>
<div></div>
<div>{% trans 'Decision' %}</div>
<div>{% trans 'Flag' %}</div>
</div>
{% for answer in result.answers %}
<div class="grid-row" id="{{ answer.id }}">
<div>
{{ answer.answer|linebreaksbr }}
{% if answer.original_answer %}
<br />
<span class="textanswer-original">({{ answer.original_answer|linebreaksbr }})</span>
{% endif %}
</div>
<div>
{% if user.is_manager %}
<a class="btn btn-sm btn-outline-secondary" href="{% url 'staff:evaluation_textanswer_edit' answer.id %}"><span class="fas fa-pencil"></a>
{% endif %}
</div>
<div>
<form class="full-update-textanswer-form" method="POST" action="{% url 'staff:evaluation_textanswers_update_publish' %}">
{% csrf_token %}

<input type="hidden" name="answer_id" value="{{ answer.id }}" />
<input type="hidden" name="answer_id" value="{{ answer.id }}" />

<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="action" value="publish" id="{{ answer.id }}-radio-publish" autocomplete="off" {% if answer.will_be_public %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-publish">{% trans 'Publish' %}</label>
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="action" value="publish" id="{{ answer.id }}-radio-publish" autocomplete="off" {% if answer.will_be_public %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-publish">{% trans 'Publish' %}</label>

<input type="radio" class="btn-check" name="action" value="make_private" id="{{ answer.id }}-radio-private" autocomplete="off" {% if answer.will_be_private %}checked{% endif %} {% if not contributor %}disabled{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-private">{% trans 'Private' %}</label>
<input type="radio" class="btn-check" name="action" value="make_private" id="{{ answer.id }}-radio-private" autocomplete="off" {% if answer.will_be_private %}checked{% endif %} {% if not contributor %}disabled{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-private">{% trans 'Private' %}</label>

<input type="radio" class="btn-check" name="action" value="unreview" id="{{ answer.id }}-radio-undecided" autocomplete="off" {% if not answer.is_reviewed %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-undecided">{% trans 'Undecided' %}</label>
<input type="radio" class="btn-check" name="action" value="unreview" id="{{ answer.id }}-radio-undecided" autocomplete="off" {% if not answer.is_reviewed %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-undecided">{% trans 'Undecided' %}</label>

<input type="radio" class="btn-check" name="action" value="delete" id="{{ answer.id }}-radio-delete" autocomplete="off" {% if answer.will_be_deleted %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-delete">{% trans 'Delete' %}</label>
</div>
</form>
</td>
<td class="text-center">
<form class="full-textanswer-flag-form" method="POST" action="{% url 'staff:evaluation_textanswers_update_flag' %}">
{% csrf_token %}
<input type="radio" class="btn-check" name="action" value="delete" id="{{ answer.id }}-radio-delete" autocomplete="off" {% if answer.will_be_deleted %}checked{% endif %}>
<label class="btn btn-outline-primary" for="{{ answer.id }}-radio-delete">{% trans 'Delete' %}</label>
</div>
</form>
</div>
<div>
<form class="full-textanswer-flag-form" method="POST" action="{% url 'staff:evaluation_textanswers_update_flag' %}">
{% csrf_token %}

<input type="hidden" name="answer_id" value="{{ answer.id }}" />
<input type="hidden" name="answer_id" value="{{ answer.id }}" />

{% include "staff_evaluation_textanswer_flag_radios.html" with is_initially_flagged=answer.is_flagged id=answer.id %}
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% include "staff_evaluation_textanswer_flag_radios.html" with is_initially_flagged=answer.is_flagged id=answer.id %}
</form>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
Expand Down
48 changes: 45 additions & 3 deletions evap/static/scss/components/_grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@
background-color: $table-striped-bg;
}

// Only needed for selecting all elements of a row
// https://stackoverflow.com/a/50734005/3984653
.grid-row {
display: contents;
}

.grid-striped .grid-row {
&:nth-of-type(even) > div {
background-color: $table-striped-bg;
}

& > div {
border-bottom: 1px solid $table-border-color;
}
}

.lcr-left {
flex: 1;
}
Expand Down Expand Up @@ -45,7 +61,7 @@
}
}

%grid-row {
%table-grid {
display: grid;
min-height: 2.5rem;
padding: 0.75rem;
Expand All @@ -71,7 +87,7 @@
}

.results-grid-row {
@extend %grid-row;
@extend %table-grid;

grid:
"name semester responsible participants result"
Expand Down Expand Up @@ -122,7 +138,33 @@
}
}

@each $col in name, semester, responsible, participants, result {
.textanswer-review-grid {
@extend %table-grid;

gap: 0;
grid:
"answer edit review flag"
/ auto min-content min-content min-content;

min-height: 0;
padding: 0.5rem;

.grid-row > div {
height: 100%;
padding: 0.5rem;

&:not(:first-child) {
display: flex;
align-items: center;
padding-left: 0.75rem;
}
}
.grid-row:not(:first-child) > div:not(:first-child) {
justify-content: center;
}
}

@each $col in name, semester, responsible, participants, result, answer, edit, review, flag {
[data-col=#{$col}] {
grid-area: $col;
}
Expand Down

0 comments on commit 42c6df4

Please sign in to comment.