From 89f7820eba53e7040b7a9ef1e3c4695c2f2d09c0 Mon Sep 17 00:00:00 2001
From: Etienne Delclaux <etienne_delclaux@natural-solutions.eu>
Date: Mon, 16 Sep 2024 18:26:35 +0200
Subject: [PATCH] feat: improve taxonomy component layout

---
 .../taxonomy/taxonomy.component.html          | 42 ++++++++++---------
 .../taxonomy/taxonomy.component.scss          | 21 ++++++++++
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html
index 4d54765fcb..d3350df06b 100644
--- a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html
+++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html
@@ -1,23 +1,25 @@
 <div class="Taxonomy">
-  <table class="font-xs table table-striped table-sm">
-    <tr>
-      <td>
-        <b>Groupe taxonomique</b>
-      </td>
-      <td>{{ taxon?.classe }}</td>
-    </tr>
-    <tr>
-      <td>
-        <b>Ordre</b>
-      </td>
-      <td>{{ taxon?.ordre }}</td>
-    </tr>
-    <tr>
-      <td>
-        <b>Famille</b>
-      </td>
-      <td data-qa="synthese-obs-detail-taxo-familly">{{ taxon?.famille }}</td>
-    </tr>
+  <h5 class="Taxonomy__subtitle">Classification</h5>
+  <table class="Classification font-xs table table-striped table-sm">
+    <tbody>
+      <tr>
+        <td class="Classification__name">Groupe taxonomique</td>
+        <td class="Classification__value">{{ taxon?.classe }}</td>
+      </tr>
+      <tr>
+        <td class="Classification__name">Ordre</td>
+        <td class="Classification__value">{{ taxon?.ordre }}</td>
+      </tr>
+      <tr>
+        <td class="Classification__name">Famille</td>
+        <td
+          class="Classification__value"
+          data-qa="synthese-obs-detail-taxo-familly"
+        >
+          {{ taxon?.famille }}
+        </td>
+      </tr>
+    </tbody>
   </table>
 
   <!-- <h5 class="underlined underlined-sm main-color">Attribut(s) Taxonomique(s) locaux</h5>
@@ -33,7 +35,7 @@
     </tr>
   </table> -->
 
-  <h5 class="underlined underlined-sm main-color">Statuts</h5>
+  <h5 class="Taxonomy__subtitle">Statuts</h5>
   <table
     class="font-xs table table-sm"
     *ngIf="taxon?.status; else noStatus"
diff --git a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss
index d3dbe41277..2ad0c2cd00 100644
--- a/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss
+++ b/frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss
@@ -1,2 +1,23 @@
 .Taxonomy {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  row-gap: 0.5rem;
+
+  &__subtitle {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
+    text-underline-offset: 0.4rem;
+    text-decoration-thickness: 2px;
+  }
+  .Classification {
+    &__name {
+      font-weight: bold;
+      white-space: nowrap;
+    }
+    &__value {
+      width: 100%;
+      padding-left: 1rem;
+    }
+  }
 }