From c56922b40db26a3ac1b15a5da48b474a32216fa1 Mon Sep 17 00:00:00 2001
From: David Morris <gm3dmo@github.com>
Date: Sat, 16 Dec 2023 15:50:45 +0000
Subject: [PATCH] Add style and link to detail

---
 cmp/static/cmp/css/base.css        | 43 +++++++++++++++++++++++++++++-
 templates/cmp/soldier-results.html | 14 +++++-----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/cmp/static/cmp/css/base.css b/cmp/static/cmp/css/base.css
index f2f926e..1519566 100644
--- a/cmp/static/cmp/css/base.css
+++ b/cmp/static/cmp/css/base.css
@@ -18,4 +18,45 @@
     margin-top: 3%;
     color: #8B0000 ;
     padding: 7px;
-    }
\ No newline at end of file
+    }
+
+    .content-table {
+        border-collapse: collapse;
+        margin: 25px 0;
+        font-size: 0.9em;
+        min-width: 400px;
+        border-radius: 5px 5px 0 0;
+        overflow: hidden;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+      }
+      
+      .content-table thead tr {
+        background-color: #8B0000;
+        color: #ffffff;
+        text-align: left;
+        font-weight: bold;
+        font-size: 20px;
+        
+      }
+      
+      .content-table th,
+      .content-table td {
+        padding: 12px 15px;
+      }
+      
+      .content-table tbody tr {
+        border-bottom: 1px solid #dddddd;
+      }
+      
+      .content-table tbody tr:nth-of-type(even) {
+        background-color: #f3f3f3;
+      }
+      
+      .content-table tbody tr:last-of-type {
+        border-bottom: 2px solid #8b0000;
+      }
+      
+      .content-table tbody tr.active-row {
+        font-weight: bold;
+        color: #8B0000;
+      }
\ No newline at end of file
diff --git a/templates/cmp/soldier-results.html b/templates/cmp/soldier-results.html
index 535dfd8..bd6b1b1 100644
--- a/templates/cmp/soldier-results.html
+++ b/templates/cmp/soldier-results.html
@@ -5,21 +5,21 @@
 {% block content %}
 
 {% if soldiers %}   
-<h2>Results</h2>
+<h5>Search found:</h5>
 
-<table>
+<table class="content-table">
     <thead>
         <tr>
-            <th><h4>Surname</h4></th>
-            <th><h4>Initials</h4></th>
-            <th><h4>Rank</h4></th>
-            <th><h4>Army Number</h4></th>
+            <th>Surname</th>
+            <th>Initials</th>
+            <th>Rank</th>
+            <th>Army Number</th>
         </tr>
     </thead>
     <tbody>
         {% for soldier in soldiers %}
         <tr>
-            <td>{{ soldier.surname }}</td>
+            <td><a href="{% url 'soldier' soldier.id %}">{{ soldier.surname }}</a></td>
             <td>{{ soldier.initials }}</td>
             <td>{{ soldier.rank }}</td>
             <td>{{ soldier.army_number}}</td>