From 0aa6913864a4e4a9bb21aa3fac09054ed03c3dfc Mon Sep 17 00:00:00 2001
From: Clement FERRERE <clement.ferrere@apside-groupe.com>
Date: Tue, 8 Mar 2022 11:57:19 +0100
Subject: [PATCH] Changement Front pour du responsive

---
 .../agence-edit/agence-edit.component.html    | 15 ++++++++++++--
 .../components/agence/agence.component.html   | 12 +++++------
 .../collaborateur-detail.component.html       |  2 +-
 .../collaborateur.component.html              | 20 +++++++++----------
 src/styles.scss                               | 14 ++++++-------
 5 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/app/components/agence/agence-edit/agence-edit.component.html b/src/app/components/agence/agence-edit/agence-edit.component.html
index c6d0651..0ecfe31 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.html
+++ b/src/app/components/agence/agence-edit/agence-edit.component.html
@@ -4,10 +4,21 @@
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
   <div>
-    <label class="col-2" for="agence-name">Agence name </label>
-    <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
+    <div class = mb-3>
+      <table>
+        <tr>
+          <th>Name</th>
+        </tr>
+        <tr>
+          <td>
+            <input id="agence-name" [(ngModel)]="agence.name" placeholder="name">
+          </td>
+        </tr>
+      </table>
+    </div>
   </div>
 
+
   <button (click)="goBack()">Retour</button>
   <button (click)="save()">Sauvegarder les changements</button>
   <button (click)="delete()">Supprimer l'agence</button>
diff --git a/src/app/components/agence/agence.component.html b/src/app/components/agence/agence.component.html
index a557dad..97ca12b 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -1,19 +1,19 @@
 <div xmlns="">
-  <h2>Agences</h2>
+  <h2 class = mb-4>Agences</h2>
 
-  <table>
+  <table class = mb-5>
     <tr>
-      <th>Name</th>
+      <th class="spaced">Name</th>
     </tr>
     <tr *ngFor="let agence of agences">
-      <td class="list"> {{agence.name}} </td>
-      <td class="list"> <a routerLink="{{agence.id}}"> Modifier </a></td>
+      <td class="spaced"> {{agence.name}} </td>
+      <td class="spaced"> <a routerLink="{{agence.id}}"> Modifier </a></td>
     </tr>
   </table>
 
   <h3>Ajouter une agence : </h3>
 
-  <div>
+  <div class = mb-3>
     <table>
       <tr>
         <th>Name</th>
diff --git a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
index 5ac0241..ff5369e 100644
--- a/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
+++ b/src/app/components/collaborateur/collaborateur-detail/collaborateur-detail.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="collaborateur" style="overflow-x:auto;">
+<div *ngIf="collaborateur" style="overflow-x:auto;" class="mb-3">
 
   <table>
     <tr>
diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html
index 8e81e2e..21ef82a 100644
--- a/src/app/components/collaborateur/collaborateur.component.html
+++ b/src/app/components/collaborateur/collaborateur.component.html
@@ -1,19 +1,19 @@
 <div xmlns="">
-  <h2>Collaborateurs</h2>
+  <h2 class = mb-4>Collaborateurs</h2>
 
-  <div style="overflow-x:auto;">
-    <table>
+  <div style="overflow-x:auto;" class="mb-5">
+    <table >
       <tr>
-      <th>Name</th>
-      <th>First Name</th>
-      <th>Apside Mail</th>
+      <th class="spaced">Name</th>
+      <th class="spaced">First Name</th>
+      <th class="spaced">Apside Mail</th>
       </tr>
 
       <tr *ngFor="let collaborateur of collaborateurs">
-        <td class="list"> {{collaborateur.name}} </td>
-        <td class="list"> {{collaborateur.firstName}} </td>
-        <td class="list"> {{collaborateur.apsideMail}} </td>
-        <td class="list"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
+        <td class="spaced"> {{collaborateur.name}} </td>
+        <td class="spaced"> {{collaborateur.firstName}} </td>
+        <td class="spaced"> {{collaborateur.apsideMail}} </td>
+        <td class="spaced"> <a routerLink="{{collaborateur.id}}"> Modifier </a></td>
       </tr>
     </table>
   </div>
diff --git a/src/styles.scss b/src/styles.scss
index 8942e39..7b9838a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -72,17 +72,15 @@ button:disabled {
   color: #fafafa;
 }
 
-td {
-  align-content: center;
-  text-align: center;
-
+.spaced{
+  padding : 0 25px;
 }
 
 .list {
-  padding: 0 30px;
-}
 
-th{
+}
 
-  text-align: center;
+input{
+  margin: 0;
 }
+