Made row width dynamic. LEss jarring hightlights

open-learning-exchange · Nov 15, 2024 · 1096437 · 1096437
1 parent 26891e9
commit 1096437
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 24 deletions.
diff --git a/src/app/courses/progress-courses/courses-progress-chart.component.html b/src/app/courses/progress-courses/courses-progress-chart.component.html
@@ -47,16 +47,16 @@
           -
         </ng-template>
       </td>
-      <td class="accent-highlight">
+      <td>
         <ng-container *ngIf="i.count > 0; else showTotalDash">
-          <div
+          <span
             i18n-matTooltip
             matTooltip="Click to see test detail"
             [matTooltipDisabled]="!i.clickable"
-            [ngClass]="{'cursor-pointer': i.clickable}"
+            [ngClass]="{'number-highlight': i.count > 0, 'cursor-pointer': i.clickable}"
             (click)="i.clickable ? dataClick($event, [], index) : null">
             {{ i.count }}
-          </div>
+          </span>
         </ng-container>
         <ng-template #showTotalDash>
           -

diff --git a/src/app/courses/progress-courses/courses-progress-chart.scss b/src/app/courses/progress-courses/courses-progress-chart.scss
@@ -1,16 +1,17 @@
 @import '../../variables';
 
 .simple-table {
-  width: 80%;
+  width: auto;
   margin: 0 auto;
   border-collapse: collapse;
-  table-layout: fixed;
+  table-layout: auto;
 
   th, td {
     padding: 8px;
     border: 1px solid grey;
     text-align: center;
     vertical-align: middle;
+    white-space: nowrap;
   }
 
   th {
@@ -20,6 +21,10 @@
     top: 0;
   }
 
+  th:nth-child(n+2), td:nth-child(n+2) {
+    width: auto;
+  }
+
   .user-header-content {
     display: flex;
     flex-direction: column;
@@ -29,40 +34,30 @@
     text-overflow: ellipsis;
   }
 
-  .highlight-green {
-    background-color: green;
+  .highlight-green,
+  .highlight-yellow,
+  .highlight-red,
+  .number-highlight {
     color: white;
     display: inline-block;
     padding: 2px 5px;
     border-radius: 4px;
   }
 
+  .highlight-green {
+    background-color: green;
+  }
+
   .highlight-yellow {
     background-color: orange;
-    color: white;
-    display: inline-block;
-    padding: 2px 5px;
-    border-radius: 4px;
   }
 
   .highlight-red {
     background-color: red;
-    color: white;
-    display: inline-block;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-
-  .accent-highlight {
-    background-color: $accent;
-    color: $accent-text;
   }
 
   .number-highlight {
     background-color: $accent;
     color: $accent-text;
-    display: inline-block;
-    padding: 2px 5px;
-    border-radius: 4px;
   }
 }