Update card so text doesnt overlap buttons and overflow doesn't get c…

…ropped
HenryRiddallWork · Apr 5, 2024 · dc91a7f · dc91a7f
1 parent 077ce77
commit dc91a7f
Showing 1 changed file with 36 additions and 34 deletions.
diff --git a/todo_app/templates/index.html b/todo_app/templates/index.html
@@ -25,49 +25,51 @@ <h1 class="rounded-t bg-slate-800 p-5 text-xl font-semibold text-gray-100">
       {% for item in items %}
       <div
         style="--animation-order: {{loop.index}};"
-        class="nthDelay animate-jump relative h-24 w-48 rounded bg-slate-300 p-3 shadow-lg"
+        class="nthDelay animate-jump relative flex min-h-32 w-48 flex-col rounded bg-slate-300 shadow-lg"
       >
+        <div class="flex justify-end gap-2 rounded-t bg-slate-800 px-2 py-2">
+          <form
+            class="flex items-center justify-center"
+            action="{{ url_for('comeplete_todo_item') }}"
+            method="post"
+          >
+            <button
+              class="{% if item.is_complete %}bg-yellow-600{% else %}bg-emerald-600{% endif %} size-5 rounded font-mono text-sm font-bold text-white transition-all duration-200 ease-in-out hover:scale-125"
+              type="submit"
+              name="item_id"
+              value="{{ item.id }}"
+              aria-label="complete-{{ item.title }}"
+              on
+            >
+              {% if item.is_complete %} > {% else %} ✓ {% endif %}
+            </button>
+          </form>
+          <form
+            class="flex items-center justify-center"
+            action="{{ url_for('remove_todo_item') }}"
+            method="post"
+          >
+            <button
+              class="size-5 rounded bg-red-600 font-mono text-sm font-bold text-white transition-all duration-200 ease-in-out hover:scale-125"
+              type="submit"
+              name="item_id"
+              value="{{ item.id }}"
+              aria-label="delete-{{ item.title }}"
+              on
+            >
+              X
+            </button>
+          </form>
+        </div>
         <div
-          class="mr-auto flex h-full min-h-0 w-full min-w-0 items-center justify-center overflow-hidden overflow-ellipsis text-center"
+          class="mr-auto flex h-full min-h-0 w-full min-w-0 justify-center overflow-hidden overflow-ellipsis p-2 text-center"
           style="
                 {% if item.is_complete %}
                         text-decoration:line-through;
                 {% endif %}"
         >
           {{ item.title }}
         </div>
-        <form
-          class="absolute right-8 top-1"
-          action="{{ url_for('comeplete_todo_item') }}"
-          method="post"
-        >
-          <button
-            class="{% if item.is_complete %}bg-yellow-600{% else %}bg-green-600{% endif %} size-5 rounded font-mono text-sm font-bold text-white transition-all duration-200 ease-in-out hover:scale-125"
-            type="submit"
-            name="item_id"
-            value="{{ item.id }}"
-            aria-label="complete-{{ item.title }}"
-            on
-          >
-            {% if item.is_complete %} > {% else %} ✓ {% endif %}
-          </button>
-        </form>
-        <form
-          class="absolute right-2 top-1"
-          action="{{ url_for('remove_todo_item') }}"
-          method="post"
-        >
-          <button
-            class="size-5 rounded bg-red-600 font-mono text-sm font-bold text-white transition-all duration-200 ease-in-out hover:scale-125"
-            type="submit"
-            name="item_id"
-            value="{{ item.id }}"
-            aria-label="delete-{{ item.title }}"
-            on
-          >
-            X
-          </button>
-        </form>
       </div>
       {% endfor %}
     </div>