add style to score #13

Author: emmvou

frontend/src/app/gestion/suivi-id/gestion-id-suivi.component.html

@@ -20,20 +20,22 @@
 
             </div>
             <div id="tableparent" class="d-flex justify-content-center flex-column  col-10 w-100 h-100 p-2 m-2">
-                <table class="table-responsive-lg w-100">
-                    <thead>
+                <table class="table-responsive-lg text-center w-100">
+                    <thead id="theader">
                     <tr>
                         <th *ngFor="let head of headElements" scope="col">{{head}}</th>
                     </tr>
                     </thead>
                     <tbody>
-                    <tr *ngFor="let el of quizHistory">
-                        <td>{{el.name}}</td>
-                        <td>{{el.stats.correct}}/{{el.stats.total}}</td>
-                        <td>{{el.recap.correct}}/{{el.recap.total}}</td>
-                        <td>
+                    <tr id="trquestion" class="" *ngFor="let el of quizHistory">
+
+                        <td class="text-left">{{el.name}}</td>
+                        <td class="">{{el.stats.correct}}/{{el.stats.total}}</td>
+                        <td class="">{{el.recap.correct}}/{{el.recap.total}}</td>
+                        <td class="">
                             <div class="epsilon">
-                                <button (click)="enableDisableQuestion(el.id, user.ignoredQuestions.includes(el.id))" class="
+                                <button (click)="enableDisableQuestion(el.id, user.ignoredQuestions.includes(el.id))"
+                                        class="
                                         btn btn-xs btn-red">
                                     {{user.ignoredQuestions.includes(el.id) ? "Ajouter" : "Retirer"}}
                                 </button>

frontend/src/app/gestion/suivi-id/gestion-id-suivi.component.scss

@@ -12,3 +12,23 @@
 #tableparent{
   //max-width: unset;
 }
+
+
+#theader {
+  //try this :
+  //https://css-tricks.com/restricting-a-pseudo-element-to-its-parents-border-box/
+  background: linear-gradient(to bottom, #fef086, #fde635);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  padding: 0.4em 1em;
+  width: 100%;
+}
+
+#trquestion{
+  background-color: #FFFFFF;
+  padding: 4px;
+}
+
+tbody{
+  background-color: #DDDDDD;
+}

frontend/src/app/gestion/suivi-id/gestion-id-suivi.component.ts

@@ -30,7 +30,7 @@ export class GestionIdSuiviComponent implements OnInit
     public resultsDisplayed: boolean[] = [];
     public changeFilterScores: FormGroup;
     public allAttempts: { [quizId: number]: AttemptResult[] } = {};
-    public headElements = ["Question", "Échecs/ tentatives", "Échecs/tentatives récap", "Retirer"];
+    public headElements = ["Question", "Échecs/ tentatives", "Échecs/tentatives récap", ""];
     private userId: number = 1;
     private recaps: RecapResult[] = [];
     private attempts: AttemptResult[] = [];
@@ -63,7 +63,8 @@ export class GestionIdSuiviComponent implements OnInit
         });
         this.userService.getAllAttempts(this.userId).subscribe(a =>
         {
-            this.quizHistory =a;
+            this.quizHistory = a;
+            this.quizHistory.sort((a, b) => (b.stats.correct / b.stats.total) - (a.stats.correct / a.stats.total));
         });
     }