Update the table to a list of items and the header.

CHANGELOG.org

@@ -9,4 +9,6 @@
    Add the TailwindCSS.
 ** 0.2.3 <2023-07-14 Fri>
    Update the main container block.
+** 0.2.4 <2023-07-14 Fri>
+   Update the table to a list of items and the header.
 

templates/partials/task_item.html

@@ -0,0 +1,13 @@
+<div class="p-2 border rounded-lg inline-flex gap-2 my-2 bg-gray-200">
+  {% if task.status == "TODO" %}
+  <p class="font-semibold text-green-500">
+  {% elif task.status == "DOING" %}
+  <p class="font-semibold text-yellow-500">
+  {% elif task.status == "DONE" or task.status == "CANCELED" %}
+  <p class="font-semibold text-gray-500">
+  {% endif %}
+    {{ task.status }}
+  </p>
+  <p class="font-semibold">{{ task.name }}</p>
+  <p>{{ task.description | truncatewords:10 }}</p>
+</div>

templates/tasks/index.html

@@ -2,20 +2,11 @@
 {% load static %}
 
 {% block content %}
-  <center><h1>Tasks</h1></center>
+  <h1 class="text-3xl font-bold text-center my-2">Tasks</h1>
 
-  <table class="table table-striped">
-    <tr>
-      <td>Status</td>
-      <td>Name</td>
-      <td>Description</td>
-    </tr>
+  <div class="flex flex-col">
     {% for task in tasks %}
-    <tr>
-      <td>{{ task.status }}</td>
-      <td>{{ task.name }}</td>
-      <td>{{ task.description | truncatewords:10 }}</td>
-    </tr>
+      {% include "partials/task_item.html" %}
     {% endfor %}
-  </table>
+  </div>
 {% endblock %}