Suggestions for multiple sessions tasks (#622)

* feat: Improve visual hierarchy * Remove unused rule and add faint tr lines * fix: Run djlint and black
DH-IT-Portal-Development · Mar 7, 2024 · afffa1b · afffa1b
1 parent bc53b2e
commit afffa1b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/main/static/main/style.css b/main/static/main/style.css
@@ -317,4 +317,9 @@ a.icon-link {
 
 .text-decoration-none {
     text-decoration: none;
-}
+}
+
+.nostripes tr:nth-of-type(n) {
+    background-color: unset;
+    border-bottom: 1px solid #eeeeee;
+}
diff --git a/tasks/templates/tasks/session_end.html b/tasks/templates/tasks/session_end.html
@@ -18,9 +18,9 @@ <h2>{% trans "Overzicht sessie " %}{{ session.order }}</h2>
             <p>
                 <em>{% trans "Vanuit dit overzicht is het mogelijk om je sessie te bewerken of om taken aan te maken, te bewerken en te verwijderen." %}</em>
             </p>
-            <div class="task_list">
-                <h5 class="mt-2">{% trans "Sessie overzicht:" %}</h5>
-                <table class="pure-table" width="100%">
+            <div class="task_list mt-4 mb-4">
+                <h2 class="mt-3">{% trans "Over de sessie" %}</h2>
+                <table class="pure-table nostripes" width="100%">
                     <thead>
                         <tr>
                             <th width="80%">{% trans "Setting" %}</th>
@@ -41,8 +41,9 @@ <h5 class="mt-2">{% trans "Sessie overzicht:" %}</h5>
                         </tr>
                     </tbody>
                 </table>
-                <hr>
-                <h5 class="mt-2">{% trans "Taken overzicht:" %}</h5>
+            </div>
+            <div class="task_list mt-4 mb-4">
+                <h3 class="mt-3">{% trans "Taken" %}</h3>
                 {% include "tasks/task_list.html" %}
             </div>
             <p>{% trans "Beantwoord op basis van dit overzicht de volgende vragen:" %}</p>

diff --git a/tasks/templates/tasks/session_list.html b/tasks/templates/tasks/session_list.html
@@ -2,11 +2,10 @@
 {% load i18n %}
 
 {% for session in study.session_set.all %}
-    <div class="task_list mt-3">
-        <h5 class="pt-2">
+    <div class="task_list mt-4 mb-4">
+        <h2 class="pt-2">
             {% blocktrans with order=session.order duration=session.tasks_duration repeats=session.repeats trimmed %}
-                Sessie {{ order }} (totale brutoduur: {{ duration }}
-                minuten, aantal keer uit te voeren: {{ repeats }})
+                Sessie {{ order }}
             {% endblocktrans %}
             {% if can_edit_sessions %}
                 <a href="{% url 'tasks:session_end' session.pk %}"
@@ -22,7 +21,12 @@ <h5 class="pt-2">
             {% endif %}
         </h5>
         <p>
-            <em>{% trans "Deze sessie bestaat uit de volgende taken:" %}</em>
+            <em>
+                {% blocktrans with duration=session.tasks_duration repeats=session.repeats trimmed %}
+                    Totale brutoduur: {{ duration }}
+                    minuten, aantal keer uit te voeren: {{ repeats }}
+                {% endblocktrans %}
+            </em>
         </p>
         {% include "tasks/task_list.html" %}
     </div>

diff --git a/tasks/templates/tasks/task_list.html b/tasks/templates/tasks/task_list.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 {% load fetc_filters %}
 
-<table class="pure-table" width="100%" style="">
+<table class="pure-table nostripes" width="100%" style="">
     <thead>
         <tr>
             <th width="20%">{% trans "Taak" %}</th>
@@ -17,11 +17,6 @@
             {% endif %}
         </tr>
     </thead>
-    <style>
-        tr {
-            background-color: #FFFFFF;
-        }
-    </style>
     <tbody>
         {% for task in session.task_set.all %}
             <tr>
@@ -51,7 +46,7 @@
 </table>
 {% if can_edit_tasks %}
     <div class="d-flex justify-content-center">
-        <div class="button mt-2 button-black">
+        <div class="button m-4 button-black">
             <a href="{% url 'tasks:create' session.pk %}">
                 {% blocktrans with session_order=session.order trimmed %}
                     Nieuwe taak toevoegen aan sessie {{ session_order }}