Making the task table responsive

mrlvsb · Aug 29, 2023 · 3748216 · 3748216
1 parent 752f145
commit 3748216
Showing 1 changed file with 51 additions and 49 deletions.
diff --git a/templates/web/index.html b/templates/web/index.html
@@ -36,57 +36,59 @@
           </div>
         {% endif %}
         {% if node.tasks %}
-        <table class="table table-sm table-hover table-striped">
-            <thead>
+        <div class="table-responsive">
+            <table class="table table-sm table-hover table-striped">
+                <thead>
+                    <tr>
+                        <th>Task</th>
+                        <th>Assigned</th>
+                        <th>Deadline</th>
+                        <th class="text-end">Earned points</th>
+                        <th class="text-end">Max points</th>
+                    </tr>
+                </thead>
+                {% for task in node.tasks  %}
                 <tr>
-                    <th>Task</th>
-                    <th>Assigned</th>
-                    <th>Deadline</th>
-                    <th class="text-end">Earned points</th>
-                    <th class="text-end">Max points</th>
+                    <td>
+                        {% if task.accepted_submit_num %}
+                            <a href="{% url 'task_detail' login=task.student assignment_id=task.id submit_num=task.accepted_submit_num %}">{{ task.name }}</a>
+                        {% else %}
+                            <a href="{% url 'task_detail' login=task.student assignment_id=task.id %}">{{ task.name }}</a>
+                        {% endif %}
+                    </td>
+                    {% comment %}
+                    TODO: Add remaining time to deadline by creating simple tag:
+                    https://stackoverflow.com/questions/52296306/django-template-is-there-a-built-in-way-to-get-current-date-as-type-date-ins
+                    https://docs.djangoproject.com/en/1.11/howto/custom-template-tags/#django.template.Library.simple_tag
+                    {% endcomment %}
+                    <td>
+                        {{ task.assigned|date:"d.m.Y, H:i" }}
+                        {% if task.assigned_show_remaining %} (<span class="text-muted">{{ task.assigned|timeuntil }} left)</span>{% endif %}
+                    </td>
+                    <td>
+                        {% if task.deadline %}
+                        {{ task.deadline|date:"d.m.Y, H:i" }} <span class="text-muted">({{ task.deadline|timeuntil }} left)</span>
+                        {% endif %}
+                    </td>
+                    <td class="text-end">
+                        {% if task.assigned_points is not None %}
+                        {{ task.assigned_points|floatformat:2 }}
+                        {% endif %}
+                    </td>
+                    <td class="text-end">
+                        {% if task.assignment.max_points is not None %}
+                        {{ task.assignment.max_points|floatformat:2 }}
+                        {% endif %}
+                    </td>
                 </tr>
-            </thead>
-            {% for task in node.tasks  %}
-            <tr>
-                <td>
-                    {% if task.accepted_submit_num %}
-                        <a href="{% url 'task_detail' login=task.student assignment_id=task.id submit_num=task.accepted_submit_num %}">{{ task.name }}</a>
-                    {% else %}
-                        <a href="{% url 'task_detail' login=task.student assignment_id=task.id %}">{{ task.name }}</a>
-                    {% endif %}
-                </td>
-                {% comment %}
-                TODO: Add remaining time to deadline by creating simple tag:
-                https://stackoverflow.com/questions/52296306/django-template-is-there-a-built-in-way-to-get-current-date-as-type-date-ins
-                https://docs.djangoproject.com/en/1.11/howto/custom-template-tags/#django.template.Library.simple_tag
-                {% endcomment %}
-                <td>
-                    {{ task.assigned|date:"d.m.Y, H:i" }}
-                    {% if task.assigned_show_remaining %} (<span class="text-muted">{{ task.assigned|timeuntil }} left)</span>{% endif %}
-                </td>
-                <td>
-                    {% if task.deadline %}
-                    {{ task.deadline|date:"d.m.Y, H:i" }} <span class="text-muted">({{ task.deadline|timeuntil }} left)</span>
-                    {% endif %}
-                </td>
-                <td class="text-end">
-                    {% if task.assigned_points is not None %}
-                      {{ task.assigned_points|floatformat:2 }}
-                    {% endif %}
-                </td>
-                <td class="text-end">
-                    {% if task.assignment.max_points is not None %}
-                      {{ task.assignment.max_points|floatformat:2 }}
-                    {% endif %}
-                </td>
-            </tr>
-            {% endfor %}
-            <tr>
-              <td colspan="3">Celkem</td>
-              <td class="text-end">{{ node.earned_points|floatformat:2 }}</td>
-              <td class="text-end">{{ node.max_points|floatformat:2 }}</td>
-            </tr>
-        </table>
+                {% endfor %}
+                <tr>
+                <td colspan="3">Celkem</td>
+                <td class="text-end">{{ node.earned_points|floatformat:2 }}</td>
+                <td class="text-end">{{ node.max_points|floatformat:2 }}</td>
+                </tr>
+            </table>
+        </div>
         {% else %}
         <p class="alert alert-info mb-0">No task assigned.</p>
         {% endif %}