Changement Front pour du responsive

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>

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>

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>

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>

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;
 }
+