Merge pull request #146 from muselesscreator/locked_headers_alone

lock header row and column
openedx · Oct 22, 2020 · dbe3dfa · dbe3dfa
2 parents 9bc86fc + 9e0c326
commit dbe3dfa
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git a/src/components/Gradebook/gradebook.scss b/src/components/Gradebook/gradebook.scss
@@ -57,9 +57,17 @@
 .grade-history-current-grade{
     padding-right: 25px;
 }
+.gradebook-container {
+    width: 100%;
+    overflow-x: auto;
+    height: 600px;
+    overflow-y: auto;
+    word-break: break-word;
+    position: relative;
+}
 
 .gbook { 
-    overflow-x: scroll;
+    width: 100%;
 
     .grade-button {
         text-decoration: underline;
@@ -68,19 +76,25 @@
     .student-key {
         font-size: 14px;
     }
+
 
-    .table {
-        padding-left: 244px;
-        // prevents the table from shrinking to a width where "Final 01" breaks to two lines
-        min-width: 731px;
-        th {
-            vertical-align: top;
-            font-size: 14px;
+    .table thead tr {
+        min-height: 60px;
+        &:nth-child(1) {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: white;
+          th {
+            background-color: white;
+            border-bottom: 1px solid $gray_200;
+          }
         }
     }
 
-    .table thead tr {
-        height: 60px;
+    thead, tbody, tr, td, th {
+      display: block;
+      word-break: break-word;
     }
 
     .table tr th:first-child {
@@ -89,16 +103,47 @@
     .table tr th:first-child,
     .table tr td:first-child {
         position: sticky;
-        width: 160px;
         left: 0;
         z-index: 1; // to float over the following children in the side-scrolling case
         background: white;
     }
 
+    .table tr {
+      th:nth-child(1),
+      td:nth-child(1),
+      th:nth-child(2),
+      td:nth-child(2) {
+        min-width: 240px;
+      }
+      th, td {
+        min-width: 120px;
+      }
+    }
     .table tbody th {
         font-weight: normal;
     }
 
+    .table {
+      overflow-x: hidden;
+
+      height: 100%;
+
+      tbody {
+        overflow-y: auto;
+        display: block;
+      }
+
+      thead, tbody tr {
+        display: table;
+        table-layout: fixed;
+      }
+
+      th {
+          vertical-align: top;
+          font-size: 14px;
+      }
+    }
+
     .link-style {
         color: #0075b4;
         &:hover, &:focus {

diff --git a/src/components/Gradebook/index.jsx b/src/components/Gradebook/index.jsx
@@ -457,13 +457,11 @@ export default class Gradebook extends React.Component {
       );
       const emailHeadingLabel = 'Email*';
 
-      headings = headings.map(heading => ({ label: heading, key: heading, width: 'col-1' }));
+      headings = headings.map(heading => ({ label: heading, key: heading }));
 
       // replace username heading label to include additional user data
       headings[0].label = userInformationHeadingLabel;
-      headings[0].width = 'col-2';
       headings[1].label = emailHeadingLabel;
-      headings[1].width = 'col-2';
     }
 
     return headings;