Make soldiers table look more presentable

gm3dmo · Jun 3, 2024 · 86bf343 · 86bf343
1 parent 5fb2ae3
commit 86bf343
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 28 deletions.
diff --git a/cmp/static/cmp/css/base.css b/cmp/static/cmp/css/base.css
@@ -1,10 +1,11 @@
     body {
         font-family: 'IM Fell English', Helvetica, serif;
-        margin-left: 13%;
-        margin-right: 13%;
-        margin-top: 5%;
+        margin-left: 7%;
+        margin-right: 7%;
+        margin-top: 0%;
+        margin-bottom: 0%;
         font-size: 18px;
-        text-align: center;
+        text-align: left;
     }
 
     h1, h3, h3, h4, h5, h6 {
@@ -43,13 +44,13 @@
       background-color: #4CAF50; /* Green */
       border: none;
       color: white;
-      padding: 3px 16px;
+      padding: 3px 8px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
-      font-size: 16px;
+      font-size: 10px;
       margin: 4px 2px;
-      margin-right: 10px; 
+      margin-right: 4px; 
       cursor: pointer;
       transition-duration: 0.4s;
       border-radius: 12px; /* Add this line */
@@ -81,6 +82,15 @@
       text-align: left;
   }
 
+  .center-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    margin-top: 2%;
+}
+
+
       .search-input {
           padding-bottom: 24px; 
       }
@@ -117,20 +127,21 @@
       }
 
       .glossy-button {
+          font-family: 'Helvetica', sans-serif;
           background: #1b3003; /* fallback for old browsers */
           background: -webkit-linear-gradient(top, #487910, #36670c); /* Chrome 10-25, Safari 5.1-6 */
           background: linear-gradient(to bottom, #254205, #3b6b12); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
           border: none;
           color: white;
-          padding: 3px 8px;
+          padding: 3px 3px;
           text-align: center;
           text-decoration: none;
           display: inline-block;
-          font-size: 14px;
+          font-size: 8px;
           margin: 4px 2px;
           cursor: pointer;
           border-radius: 5px;
-          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+          box-shadow: 0 5px 5px rgba(0,0,0,0.2);
           position: relative;
           overflow: hidden;
       }

diff --git a/cmp/views.py b/cmp/views.py
@@ -419,7 +419,7 @@ def search_soldiers(request):
     else:
         soldiers = Soldier.objects.all().order_by('surname', 'initials')
 
-    paginator = Paginator(soldiers, 25)
+    paginator = Paginator(soldiers, 17)
     page_obj = paginator.get_page(page_number)
     #return render(request, 'cmp/search-soldiers.html', {'soldiers': soldiers})
     return render(request, 'cmp/search-soldiers.html', {'page_obj': page_obj})

diff --git a/templates/cmp/edit-soldiers.html b/templates/cmp/edit-soldiers.html
@@ -19,7 +19,6 @@ <h2 class="mgmt-title">Soldier Death Details </h2>
 
         <button type="submit" class="btn btn-primary">Save</button>
     </form>
-
-    </div>
+</div>
 
 {% endblock %}
diff --git a/templates/cmp/search-soldiers.html b/templates/cmp/search-soldiers.html
@@ -3,8 +3,8 @@
 {% block title %}Soldiers{% endblock %}
 {% block content %}
 
-<h1>Search Soldiers</h1>
-
+<div class="center-content">
+<h3>Search Soldiers</h3>
 <div name="search-input" class="search-input">
 <form method="get">
   <input type="text" name="q" value="{{ request.GET.q }}"  placeholder="Search soldiers to edit">
@@ -13,21 +13,33 @@ <h1>Search Soldiers</h1>
 </div>
 
 <div>
-{% for soldier in page_obj %}
-<p class="soldier-details">
-  <button class="glossy-button" onclick="location.href='{% url 'edit-soldiers' soldier.id %}'" type="button">Edit</button> 
-  <span class="soldier-info">{{ soldier.surname }}</span>
-  <span class="soldier-info">{{ soldier.initials }}</span>
-  <span class="soldier-info">{{ soldier.rank }}</span>
-</p>
-{% endfor %}
+<table class="content-table">
+  <thead class="">
+    <tr>
+      <th></th>
+      <th>SURNAME</th>
+      <th>INITIALS</th>
+      <th>ARMY No.</th>
+      <th>RANK</th>
+      <th>CASUALTY</th>
+    </tr>
+  </thead>
+
+  {% for soldier in page_obj %}
+    <tr>
+      <td><button class="glossy-button" onclick="location.href='{% url 'edit-soldiers' soldier.id %}'" type="button">EDIT</button></td>
+      <td><span class="soldier-info">{{ soldier.surname }}</span></td>
+      <td><span class="soldier-info">{{ soldier.initials }}</span></td>
+      <td><span class="soldier-info">{{ soldier.army_number }}</span></td>
+      <td><span class="soldier-info">{{ soldier.rank }}</span></td>
+      <td><span class="soldier-info">{{ soldier.soldierdeath.date }}</span></td>
+    </tr>
+   {% endfor %}
+</table>
 </div>
 
 <p>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</p>
 
-{% for soldier in page_obj %}
-    <!-- Display the soldier -->
-{% endfor %}
 
 {% if page_obj.has_previous %}
     <a href="?q={{ request.GET.q }}&page={{ page_obj.previous_page_number }}">Previous</a>
@@ -37,4 +49,5 @@ <h1>Search Soldiers</h1>
     <a href="?q={{ request.GET.q }}&page={{ page_obj.next_page_number }}">Next</a>
 {% endif %}
 
-{% endblock %}
+{% endblock %}
+</div>
diff --git a/templates/cmp/soldier-results.html b/templates/cmp/soldier-results.html
@@ -24,7 +24,6 @@
             <td>{{ soldier.army_number}}</td>
         </tr>
         {% endfor %}
-    </tbody>
 </table>
 
 {% if page_obj.has_previous %}