Align project page stat card order and borders with all projects page

Amolith created 1 month ago

Reordered the three stat cards from Open/In progress/Closed to
In progress/Open/Closed to match the all projects page layout.
Added conditional border coloring using new classes border-success
and border-warning, matching the badge color logic where non-zero
counts get colored borders while zero counts use the default.

Change summary

static/td.css          |  8 ++++++++
templates/project.html | 10 +++++-----
2 files changed, 13 insertions(+), 5 deletions(-)

Detailed changes

static/td.css

@@ -125,3 +125,11 @@ details:has(> .table) > .table {
   white-space: nowrap;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
+
+/* Stat card border colors */
+.card.border-success {
+  border-color: var(--success);
+}
+.card.border-warning {
+  border-color: var(--warning);
+}

templates/project.html

@@ -15,14 +15,14 @@
 <h1>{{ project_name }}</h1>
 
 <div class="row">
-    <article class="card col-4">
-      <p class="text-light">Open</p>
-      <p><strong>{{ stats_open }}</strong></p>
-    </article>
-    <article class="card col-4">
+    <article class="card col-4{% if stats_in_progress > 0 %} border-warning{% endif %}">
       <p class="text-light">In progress</p>
       <p><strong>{{ stats_in_progress }}</strong></p>
     </article>
+    <article class="card col-4{% if stats_open > 0 %} border-success{% endif %}">
+      <p class="text-light">Open</p>
+      <p><strong>{{ stats_open }}</strong></p>
+    </article>
     <article class="card col-4">
       <p class="text-light">Closed</p>
       <p><strong>{{ stats_closed }}</strong></p>