Use data-cols for review grid

e-valuation · May 15, 2023 · 9026978 · 9026978
1 parent 4dc7b58
commit 9026978
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/evap/staff/templates/staff_evaluation_textanswers_section.html b/evap/staff/templates/staff_evaluation_textanswers_section.html
@@ -9,26 +9,26 @@
             {% for result in results %}
                 <p>{{ result.question.text }}</p>
                 <div class="grid-striped container{% if not forloop.last %} mb-4{% endif %}">
-                    <div class="row flex-nowrap fw-bold">
-                            <div class="col p-2">{% trans 'Text answer' %}</div>
-                            <div class="col-fit-content p-2"></div>
-                            <div class="col-fit-content p-2">{% trans 'Decision' %}</div>
+                    <div class="row textanswer-review-grid-row fw-bold">
+                            <div data-col="answer" class="px-2">{% trans 'Text answer' %}</div>
+                            <div data-col="edit" class="px-2"></div>
+                            <div data-col="review" class="px-2">{% trans 'Decision' %}</div>
                     </div>
                     {% for answer in result.answers %}
-                        <div class="row flex-nowrap" id="{{ answer.id }}">
-                            <div class="text-answer col p-2">
+                        <div class="row textanswer-review-grid-row" id="{{ answer.id }}">
+                            <div data-col="answer"  class="text-answer col p-2">
                                 {{ answer.answer|linebreaksbr }}
                                 {% if answer.original_answer %}
                                     <br />
                                     <span class="textanswer-original">({{ answer.original_answer|linebreaksbr }})</span>
                                 {% endif %}
                             </div>
-                            <div class="col-fit-content p-2">
+                            <div data-col="edit"  class="p-2">
                                 {% 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 class="col-fit-content p-2">
+                            <div data-col="review"  class="p-2">
                                 <form class="full-update-textanswer-form" method="POST" action="{% url 'staff:evaluation_textanswers_update_publish' %}">
                                     {% csrf_token %}
 

diff --git a/evap/static/scss/components/_grid.scss b/evap/static/scss/components/_grid.scss
@@ -50,10 +50,6 @@
     }
 }
 
-.col-fit-content {
-    flex: 0 0 fit-content;
-}
-
 %grid-row {
     display: grid;
     min-height: 2.5rem;
@@ -131,6 +127,14 @@
     }
 }
 
+.textanswer-review-grid-row {
+    @extend %grid-row;
+
+    grid:
+        "answer edit review"
+        / auto    3rem       310px;
+}
+
 @each $col in name, semester, responsible, participants, result {
     [data-col=#{$col}] {
         grid-area: $col;