Tune edit grades table for smaller screens #707

bkd-mba-fbi · Jun 25, 2024 · 3cb30c0 · 3cb30c0
1 parent 89bf076
commit 3cb30c0
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 89 deletions.
diff --git a/src/app/events/components/grades/grade-select/grade-select.component.html b/src/app/events/components/grades/grade-select/grade-select.component.html
@@ -3,6 +3,7 @@
   [allowEmpty]="true"
   [value]="valueId"
   [disabled]="disabled"
+  [width]="width"
   (valueChange)="onGradeChange($event)"
   data-testid="grade-select"
 >

diff --git a/src/app/events/components/grades/grade-select/grade-select.component.scss b/src/app/events/components/grades/grade-select/grade-select.component.scss
@@ -1,3 +0,0 @@
-:host ::ng-deep select {
-  min-width: 13ch;
-}

diff --git a/src/app/events/components/grades/grade-select/grade-select.component.ts b/src/app/events/components/grades/grade-select/grade-select.component.ts
@@ -14,6 +14,7 @@ export class GradeSelectComponent {
   @Input() valueId: Option<number>; // the selected key from the options list
   @Input() gradeId: Option<number>; // the id of the grade itself
   @Input() disabled: boolean = false;
+  @Input() width: string = "5em";
 
   @Output() gradeIdSelected = new EventEmitter<{
     id: number;

diff --git a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.html
@@ -15,7 +15,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade test-info-desktop"
+      class="test-grade grade test-info-desktop"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
       <bkd-test-table-header
@@ -29,7 +29,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade header-mobile test-info-mobile"
+      class="test-grade header-mobile test-info-mobile"
       colspan="3"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
@@ -43,7 +43,7 @@
     </th>
   </tr>
   <tr>
-    <th class="primary-column-width sticky" (click)="state.sortBy('FullName')">
+    <th class="sticky student-name" (click)="state.sortBy('FullName')">
       <div class="d-flex">
         <div class="column-title">
           {{ "tests.student.name" | translate }}
@@ -54,7 +54,7 @@
       </div>
     </th>
     <th
-      class="secondary-column-width sticky sticky-col-2 desktop"
+      class="sticky student-grade desktop"
       (click)="state.sortBy('FinalGrade')"
       [ngClass]="{ selected: selectedTest === undefined }"
     >
@@ -68,7 +68,7 @@
       </div>
     </th>
     <th
-      class="secondary-column-width border-end sticky sticky-col-3 desktop"
+      class="border-end sticky student-average desktop"
       (click)="state.sortBy('TestsMean')"
     >
       <div class="d-flex">
@@ -83,7 +83,7 @@
     <th
       *ngFor="let test of data.tests"
       container="body"
-      class="grade"
+      class="test-grade"
       [ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
     >
       <div class="d-flex">

diff --git a/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss b/src/app/events/components/test-edit-grades-header/test-edit-grades-header.component.scss
@@ -10,7 +10,7 @@
   display: none;
 }
 
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   :host.sticky.shown {
     display: table-header-group;
   }
@@ -34,7 +34,7 @@ tr th.test-info-desktop {
   width: 5em;
 }
 
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   tr th.test-info-mobile {
     display: none !important;
   }
@@ -48,27 +48,6 @@ tr th.test-info-desktop {
     padding-top: calc($spacer / 4);
     padding-bottom: calc($spacer / 4);
     border-top: initial;
-    min-width: 100px;
-    max-width: 100px;
-  }
-
-  tr th.grade {
-    min-width: 300px;
-    max-width: 300px;
-  }
-
-  th.sticky {
-    position: sticky;
-    left: 0;
-    background-color: $white;
-  }
-
-  th.sticky.sticky-col-2 {
-    left: 300px;
-  }
-
-  th.sticky.sticky-col-3 {
-    left: 447px;
   }
 
   // FIREFOX HACK: Sadly, the sticky cells inside the fixed positioned sticky
@@ -77,7 +56,7 @@ tr th.test-info-desktop {
   // `fixed` and give them a fixed height via JavaScript (see
   // TestEditGradesHeaderStickyDirective).
   :host.sticky {
-    margin-left: 547px;
+    margin-left: var(--test-columns-offset);
 
     th.sticky {
       position: fixed;

diff --git a/src/app/events/components/test-edit-grades/test-edit-grades-common.scss b/src/app/events/components/test-edit-grades/test-edit-grades-common.scss
@@ -4,13 +4,36 @@
  * Common table styles for the TestEditGradesComponent & the TestEditGradesHeaderComponent
  */
 
-th.grade.selected,
-td.grade.selected {
+:host {
+  --student-name-column-width: 225px;
+  --student-grade-column-width: 112px;
+  --student-average-column-width: 100px;
+  --test-grade-column-width: 300px;
+
+  --student-grade-column-offset: var(--student-name-column-width);
+  --student-average-column-offset: calc(
+    var(--student-grade-column-offset) + var(--student-grade-column-width)
+  );
+  --test-columns-offset: calc(
+    var(--student-average-column-offset) + var(--student-average-column-width)
+  );
+}
+
+@media (min-width: 1000px) {
+  :host {
+    --student-name-column-width: 275px;
+  }
+}
+
+.student-grade.selected,
+.student-average.selected,
+.test-grade.selected {
   display: table-cell !important;
 }
 
-th.grade,
-td.grade,
+.student-grade,
+.student-average,
+.test-grade,
 .desktop {
   display: none !important;
 }
@@ -28,9 +51,15 @@ td {
   padding: $spacer;
 }
 
-@include media-breakpoint-up(sm) {
-  th.grade,
-  td.grade,
+.student-name {
+  // Make sure the student name is going to ellipse also on mobile
+  max-width: var(--student-name-column-width);
+}
+
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
+  .student-grade,
+  .student-average,
+  .test-grade,
   .desktop {
     display: table-cell !important;
   }
@@ -39,18 +68,43 @@ td {
     display: none !important;
   }
 
-  .primary-column-width {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 300px;
-    min-width: 300px;
-    max-width: 300px;
+  .student-name {
+    width: var(--student-name-column-width);
+    min-width: var(--student-name-column-width);
+    max-width: var(--student-name-column-width);
+  }
+
+  .student-grade {
+    width: var(--student-grade-column-width);
+    min-width: var(--student-grade-column-width);
+    max-width: var(--student-grade-column-width);
+  }
+
+  .student-average {
+    width: var(--student-average-column-width);
+    min-width: var(--student-average-column-width);
+    max-width: var(--student-average-column-width);
+  }
+
+  .test-grade {
+    min-width: var(--test-grade-column-width);
+    max-width: var(--test-grade-column-width);
+  }
+
+  th.sticky,
+  td.sticky {
+    position: sticky;
+    left: 0;
+    background-color: $white;
+  }
+
+  th.sticky.student-grade,
+  td.sticky.student-grade {
+    left: var(--student-grade-column-offset);
   }
 
-  .secondary-column-width {
-    width: 100px;
-    min-width: 100px;
-    max-width: 100px;
+  th.sticky.student-average,
+  td.sticky.student-average {
+    left: var(--student-average-column-offset);
   }
 }
diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.html b/src/app/events/components/test-edit-grades/test-edit-grades.component.html
@@ -35,7 +35,7 @@
             trackBy: trackStudentGrade
           "
         >
-          <td class="primary-column-width sticky name">
+          <td class="sticky student-name">
             <a [routerLink]="['student', studentGrade.student.Id, 'grades']">
               <span>{{ studentGrade.student.FullName }}</span>
               <span class="mobile mean">
@@ -45,7 +45,7 @@
             </a>
           </td>
           <td
-            class="grade sticky sticky-col-2"
+            class="sticky student-grade"
             [ngClass]="{ selected: selectedTest === undefined }"
           >
             <bkd-grade-select
@@ -69,7 +69,7 @@
               {{ studentGrade.finalGrade.freeHandGrade }}
             </div>
           </td>
-          <td class="grade border-end sticky sticky-col-3">
+          <td class="border-end sticky student-average">
             {{ studentGrade.finalGrade?.average | decimalOrDash: "1-3" }}
           </td>
           <td
@@ -78,7 +78,7 @@
               let gradeIndex = index;
               trackBy: trackGradeOf(studentGrade.student)
             "
-            class="grade"
+            class="test-grade"
             [ngClass]="
               selectedTest !== undefined && grade.test.Id === selectedTest.Id
                 ? 'selected'
@@ -95,7 +95,7 @@
         </tr>
         <!-- course and test averages -->
         <tr>
-          <td class="sticky">
+          <td class="sticky student-name">
             <div class="d-flex flex-column">
               <div>{{ "tests.average" | translate }}</div>
               <div class="mobile mean">
@@ -109,21 +109,21 @@
             </div>
           </td>
           <td
-            class="desktop sticky sticky-col-2"
+            class="desktop sticky student-grade"
             [ngClass]="{ selected: selectedTest === undefined }"
           >
             {{
               state.meanOfFinalGradesForCourse$ | async | decimalOrDash: "1-3"
             }}
           </td>
-          <td class="desktop border-end sticky sticky-col-3">
+          <td class="desktop border-end sticky student-average">
             {{
               state.meanOfStudentGradesForCourse$ | async | decimalOrDash: "1-3"
             }}
           </td>
           <td
             *ngFor="let test of data.tests"
-            class="grade"
+            class="test-grade"
             [ngClass]="
               test.Id === selectedTest?.Id || test.Id === selectedTest?.Id
                 ? 'selected'

diff --git a/src/app/events/components/test-edit-grades/test-edit-grades.component.scss b/src/app/events/components/test-edit-grades/test-edit-grades.component.scss
@@ -10,7 +10,12 @@ $mean-font-size: $font-size-sm;
   line-height: 1;
 }
 
-td.name {
+tbody td.student-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 0;
+
   a {
     text-decoration: none;
   }
@@ -24,15 +29,7 @@ td.name {
   }
 }
 
-tbody td.name,
-tbody td.average {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 0;
-}
-
-@include media-breakpoint-up(sm) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   .table-responsive-wrapper {
     display: block;
     overflow-x: auto;
@@ -43,27 +40,13 @@ tbody td.average {
     border-spacing: 0;
   }
 
-  tbody td.sticky {
-    position: sticky;
-    left: 0;
-    background-color: $white;
-  }
-
-  tbody td.sticky.sticky-col-2 {
-    left: 300px;
-  }
-
-  tbody td.sticky.sticky-col-3 {
-    left: 447px;
-  }
-
   .action-buttons {
     position: sticky;
     left: 0;
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (max-width: $bkd-tests-mobile-breakpoint) {
   .apply-average-button:not(.visible-on-mobile) {
     display: none !important;
   }

diff --git a/src/app/events/components/test-table-header/test-table-header.component.scss b/src/app/events/components/test-table-header/test-table-header.component.scss
@@ -40,7 +40,7 @@
   text-decoration: none;
 }
 
-@media (min-width: 750px) {
+@media (min-width: ($bkd-tests-mobile-breakpoint + 1)) {
   .test-designation {
     display: inherit !important;
   }