Grading Overview - Clickable Horizontal Scrollbar (#2824)

InfinityTwo · lhw-1 · RichDom2185 · web-flow · commit 36e6352ef6a5 · 2024-02-27T01:26:46.000+08:00
* moved grading horizontal scrollbar downwards

* added text-overflow ellipsis for filterable btns

* made horizontal scrollbar clickable

---------

Co-authored-by: Lee Hyung Woon / 이형운 &lt;leehyungwoonsamuel@gmail.com&gt;
Co-authored-by: Richard Dominick &lt;34370238+RichDom2185@users.noreply.github.com&gt;
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -230,7 +230,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
             </TableRow>
           ))}
         </TableBody>
-
+        <div className="grading-overview-footer-sibling"></div>
         <Footer>
           <Flex justifyContent="justify-center" spaceX="space-x-3">
             <Button
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
@@ -552,3 +552,15 @@
     }
   }
 }
+
+.grading-overview-footer-sibling {
+  // Footer component
+  ~ div ~ div {
+    pointer-events: none;
+
+    // Footer's children
+    > * > * {
+      pointer-events: all;
+    }
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -552,3 +552,15 @@`
`552`	`552`	`}`
`553`	`553`	`}`
`554`	`554`	`}`
	`555`	`+`
	`556`	`+.grading-overview-footer-sibling {`
	`557`	`+ // Footer component`
	`558`	`+ ~ div ~ div {`
	`559`	`+ pointer-events: none;`
	`560`	`+`
	`561`	`+ // Footer's children`
	`562`	`+ > * > * {`
	`563`	`+ pointer-events: all;`
	`564`	`+ }`
	`565`	`+ }`
	`566`	`+}`