Merge pull request #730 from bkd-mba-fbi/bug/728-sticky-header-test-t…

…able-display-none scroll-test-table tbody #728
bkd-mba-fbi · Aug 29, 2024 · 4ccbbf2 · 4ccbbf2
2 parents fe13077 + c47b0e4
commit 4ccbbf2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
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
@@ -43,7 +43,7 @@
     </th>
   </tr>
   <tr>
-    <th class="sticky student-name" (click)="state.sortBy('FullName')">
+    <th class="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="sticky student-grade desktop"
+      class="student-grade desktop"
       (click)="state.sortBy('FinalGrade')"
       [ngClass]="{ selected: selectedTest === undefined }"
     >
@@ -68,7 +68,7 @@
       </div>
     </th>
     <th
-      class="border-end sticky student-average desktop"
+      class="border-end student-average desktop"
       (click)="state.sortBy('TestsMean')"
     >
       <div class="d-flex">

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
@@ -18,6 +18,14 @@
   --test-columns-offset: calc(
     var(--student-average-column-offset) + var(--student-average-column-width)
   );
+  #stickyHeader {
+    display: none;
+  }
+  .scroll-test-table {
+    display: table-caption;
+    overflow-y: scroll;
+    height: 80vh;
+  }
 }
 
 $student-name-width-breakpoint: 1000px;

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
@@ -13,29 +13,31 @@
       [stickyHeader]="stickyHeader"
     >
       <thead
+        style="display: block"
         bkdTestEditGradesHeader
         [selectedTest]="selectedTest"
         (publish)="publish($event)"
         (unpublish)="unpublish($event)"
         #inlineHeader
       ></thead>
       <thead
+        id="stickyHeader"
         bkdTestEditGradesHeader
         [sticky]="true"
         [selectedTest]="selectedTest"
         (publish)="publish($event)"
         (unpublish)="unpublish($event)"
         #stickyHeader
       ></thead>
-      <tbody>
+      <tbody class="scroll-test-table">
         <tr
           *ngFor="
             let studentGrade of data.studentGrades;
             let studentGradeIndex = index;
             trackBy: trackStudentGrade
           "
         >
-          <td class="sticky student-name">
+          <td class="student-name">
             <a [routerLink]="['student', studentGrade.student.Id, 'grades']">
               <div>{{ studentGrade.student.FullName }}</div>
               <div class="student-average-inline">
@@ -45,7 +47,7 @@
             </a>
           </td>
           <td
-            class="sticky student-grade"
+            class="student-grade"
             [ngClass]="{ selected: selectedTest === undefined }"
           >
             <bkd-grade-select