From f5f8fb5ff6fcfc6cfdc152b41401e1a188542918 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Wed, 12 Jun 2024 22:40:21 +1000
Subject: [PATCH] MDL-80748 mod_assign: grading table now has a sticky header

`position: sticky` doesn't work in responsive tables because responsive
tables have scrollbars, making them the nearest ancestor with a
scrolling mechanism for the sticky header. As a result, the table can no
longer be responsive. This change is actually desired and was intended
for MDL-81860. Since we implemented it here, we can close the other
issue.
---
 mod/assign/locallib.php              | 2 ++
 mod/assign/styles.css                | 9 +++++++++
 theme/boost/scss/moodle/modules.scss | 6 ++++++
 theme/boost/style/moodle.css         | 6 ++++++
 theme/classic/style/moodle.css       | 6 ++++++
 5 files changed, 29 insertions(+)

diff --git a/mod/assign/locallib.php b/mod/assign/locallib.php
index 64052b2b70f..1178ed9e604 100644
--- a/mod/assign/locallib.php
+++ b/mod/assign/locallib.php
@@ -4602,6 +4602,7 @@ class assign {
         // Load and print the table of submissions.
         if ($showquickgrading && $quickgrading) {
             $gradingtable = new assign_grading_table($this, $perpage, $filter, 0, true);
+            $gradingtable->responsive = false;
             $table = $this->get_renderer()->render($gradingtable);
             $page = optional_param('page', null, PARAM_INT);
             $quickformparams = array('cm'=>$this->get_course_module()->id,
@@ -4613,6 +4614,7 @@ class assign {
             $o .= $this->get_renderer()->render(new assign_form('quickgradingform', $quickgradingform));
         } else {
             $gradingtable = new assign_grading_table($this, $perpage, $filter, 0, false);
+            $gradingtable->responsive = false;
             $o .= $this->get_renderer()->render($gradingtable);
         }
 
diff --git a/mod/assign/styles.css b/mod/assign/styles.css
index 9e63e71dcd6..134b3a5b56b 100644
--- a/mod/assign/styles.css
+++ b/mod/assign/styles.css
@@ -139,6 +139,15 @@
     display: block;
 }
 
+.path-mod-assign .gradingtable table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.path-mod-assign .gradingtable thead th {
+    background-color: white;
+}
+
 .path-mod-assign .gradingtable tr.selectedrow td {
     background-color: #fec;
 }
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index efffa9d030c..81b63b67067 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -1497,6 +1497,12 @@ $popout-header-height: 4rem;
     background-color: $card-bg;
 }
 
+.path-mod-assign .gradingtable thead tr {
+    position: sticky;
+    top: $navbar-height;
+    z-index: 1;
+}
+
 /**
  * Mod LTI.
  */
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 253667f40f1..561da0f4fcc 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -34761,6 +34761,12 @@ img.userpicture {
   background-color: #fff;
 }
 
+.path-mod-assign .gradingtable thead tr {
+  position: sticky;
+  top: 60px;
+  z-index: 1;
+}
+
 /**
  * Mod LTI.
  */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index e58998b898a..f6b958d94a5 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -34761,6 +34761,12 @@ img.userpicture {
   background-color: #fff;
 }
 
+.path-mod-assign .gradingtable thead tr {
+  position: sticky;
+  top: 50px;
+  z-index: 1;
+}
+
 /**
  * Mod LTI.
  */