From f6f51d976956f080d7302b01e3c7e978f691ff5d Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 14 Oct 2024 09:19:08 -0500
Subject: Improve layout and styling of sidebar content

---
 uploader/static/css/styles.css                     |  8 +++++
 .../macro-display-pheno-dataset-card.html          | 24 ++++++++-----
 .../populations/macro-display-population-card.html | 42 ++++++++++++++--------
 .../species/macro-display-species-card.html        | 18 ++++++----
 4 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css
index 5161169..f482c1b 100644
--- a/uploader/static/css/styles.css
+++ b/uploader/static/css/styles.css
@@ -151,3 +151,11 @@ form {
 form .form-control {
     background-color: #EAEAFF;
 }
+
+.sidebar-content .card .card-title {
+    font-size: 1.5em;
+}
+
+.sidebar-content .card-text table tbody td:nth-child(1) {
+    font-weight: bolder;
+}
diff --git a/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html b/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html
index 1121443..11b108b 100644
--- a/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html
+++ b/uploader/templates/phenotypes/macro-display-pheno-dataset-card.html
@@ -7,16 +7,24 @@
   <div class="card-body">
     <h5 class="card-title">Phenotypes' Dataset</h5>
     <div class="card-text">
-      <dl>
-        <dt>Name</dt>
-        <dd>{{dataset.Name}}</dd>
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Name</td>
+            <td>{{dataset.Name}}</td>
+          </tr>
 
-        <dt>Full Name</dt>
-        <dd>{{dataset.FullName}}</dd>
+          <tr>
+            <td>Full Name</td>
+            <td>{{dataset.FullName}}</td>
+          </tr>
 
-        <dt>Short Name</dt>
-        <dd>{{dataset.ShortName}}</dd>
-      </dl>
+          <tr>
+            <td>Short Name</td>
+            <td>{{dataset.ShortName}}</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
diff --git a/uploader/templates/populations/macro-display-population-card.html b/uploader/templates/populations/macro-display-population-card.html
index 33272e2..79f7925 100644
--- a/uploader/templates/populations/macro-display-population-card.html
+++ b/uploader/templates/populations/macro-display-population-card.html
@@ -7,25 +7,39 @@
   <div class="card-body">
     <h5 class="card-title">Population</h5>
     <div class="card-text">
-      <dl>
-        <dt>Name</dt>
-        <dd>{{population.Name}}</dd>
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Name</td>
+            <td>{{population.Name}}</td>
+          </tr>
 
-        <dt>Full Name</dt>
-        <dd>{{population.FullName}}</dd>
+          <tr>
+            <td>Full Name</td>
+            <td>{{population.FullName}}</td>
+          </tr>
 
-        <dt>Code</dt>
-        <dd>{{population.InbredSetCode}}</dd>
+          <tr>
+            <td>Code</td>
+            <td>{{population.InbredSetCode}}</td>
+          </tr>
 
-        <dt>Genetic Type</dt>
-        <dd>{{population.GeneticType}}</dd>
+          <tr>
+            <td>Genetic Type</td>
+            <td>{{population.GeneticType}}</td>
+          </tr>
 
-        <dt>Family</dt>
-        <dd>{{population.Family}}</dd>
+          <tr>
+            <td>Family</td>
+            <td>{{population.Family}}</td>
+          </tr>
 
-        <dt>Description</dt>
-        <dd>{{(population.Description or "")[0:500]}}&hellip;</dd>
-      </dl>
+          <tr>
+            <td>Description</td>
+            <td>{{(population.Description or "")[0:500]}}&hellip;</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
diff --git a/uploader/templates/species/macro-display-species-card.html b/uploader/templates/species/macro-display-species-card.html
index 857c0f0..166c7b9 100644
--- a/uploader/templates/species/macro-display-species-card.html
+++ b/uploader/templates/species/macro-display-species-card.html
@@ -3,13 +3,19 @@
   <div class="card-body">
     <h5 class="card-title">Species</h5>
     <div class="card-text">
-      <dl>
-        <dt>Common Name</dt>
-        <dd>{{species.SpeciesName}}</dd>
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Common Name</td>
+            <td>{{species.SpeciesName}}</td>
+          </tr>
 
-        <dt>Scientific Name</dt>
-        <dd>{{species.FullName}}</dd>
-      </dl>
+          <tr>
+            <td>Scientific Name</td>
+            <td>{{species.FullName}}</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
-- 
cgit v1.2.3