Update implementation of resources quick access view

frontend/src/components/pages/ModuleResources/index.tsx

@@ -12,11 +12,12 @@ import Badge from "react-bootstrap/Badge";
 import Card from "react-bootstrap/Card";
 import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
+import Container from "react-bootstrap/Container";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faInfoCircle,
   faFile,
-  faFolder,
+  faFolder
 } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleResources: React.FC = () => {
@@ -37,53 +38,33 @@ const ModuleResources: React.FC = () => {
       </InputGroup>
 
       <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
-	
-			{/* TODO: add scroll listener once code is refactored */}
-      <Row
-        className={classNames(
-          "d-flex",
-          "flex-row",
-          "flex-nowrap",
-          styles.quickAccessRow
-        )}
-      >
+
+      {/* TODO: add scroll listener once code is refactored */}
+      <Container className={classNames(styles.quickAccessRow)}>
         {[...Array(6)].map((e, i) => (
-          <Col
-            xs={7}
-            sm={7}
-            md={7}
-            lg={5}
-            xl={3}
-						key={i}
-						style={{marginBottom: ".5rem"}}
-          >
-            <Card className={styles.quickViewCard}>
-              <Card.Img variant="top" src={graphIllustration} />
-              <Card.Body>
-                <Card.Title>Document {i}</Card.Title>
-                <FontAwesomeIcon
-                  style={{ fontSize: "1.125rem" }}
-                  icon={faFile}
-                />
-              </Card.Body>
-              <Card.Footer>
-                <Badge
-                  pill
-                  className={classNames(styles.quickViewTag, styles.tagTeal)}
-                >
-                  New
-                </Badge>
-                <Badge
-                  pill
-                  className={classNames(styles.quickViewTag, styles.tagBlue)}
-                >
-                  Week 1
-                </Badge>
-              </Card.Footer>
-            </Card>
-          </Col>
+          <Card className={styles.quickViewCard}>
+            <Card.Img variant="top" src={graphIllustration} />
+            <Card.Body>
+              <Card.Title>Document {i}</Card.Title>
+              <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFile} />
+            </Card.Body>
+            <Card.Footer>
+              <Badge
+                pill
+                className={classNames(styles.quickViewTag, styles.tagTeal)}
+              >
+                New
+              </Badge>
+              <Badge
+                pill
+                className={classNames(styles.quickViewTag, styles.tagBlue)}
+              >
+                Week 1
+              </Badge>
+            </Card.Footer>
+          </Card>
         ))}
-      </Row>
+      </Container>
 
       <h5
         style={{ marginTop: "30px", marginBottom: "10px" }}

frontend/src/components/pages/ModuleResources/style.module.scss

@@ -136,43 +136,64 @@ $teal-tag-background: transparentize($teal-100, 0.5);
   align-items: center;
 }
 
-.quickAccessRow {
-  scrollbar-width: thin;
-	scrollbar-color: $white $white;
-	margin-top: 1rem;
-	// margin-left: 0; // leave space before card
-}
-
 .quickAccessRow::-webkit-scrollbar {
-	width: 1rem;
+  width: 1rem;
+  height: 0.5rem;
 }
 .quickAccessRow::-webkit-scrollbar-track {
   background: $white;
 }
 .quickAccessRow::-webkit-scrollbar-thumb {
   background-color: $white;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
 }
 
 .quickAccessRow:hover {
-	scrollbar-color: $gray-400 $white;
+  scrollbar-color: $gray-400 $white;
 }
 
 .quickAccessRow:hover::-webkit-scrollbar-thumb {
-	background-color: $gray-400;
+  background-color: $gray-400;
 }
 
-
 .quickAccessRow {
-	overflow-y: visible;
-	overflow-x: auto;
-	white-space: nowrap;
-	height: max-content;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  height: max-content;
+
+  scrollbar-width: thin;
+  scrollbar-color: $white $white;
+
+  margin-top: 1rem;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-rows: minmax(max-width, 1fr);
+  grid-auto-flow: column;
+  padding-left: 0px;
+
+  overflow-x: scroll;
+  scroll-snap-type: x proximity;
+  padding-bottom: calc(0.75 * 20px);
+  margin-bottom: calc(-0.25 * 20px);
+  // margin-left: 0; // leave space before card
 }
 
+.quickAccessRow::before,
+.quickAccessRow::after {
+  content: ‘’;
+  width: 10px;
+}
 
 @media (max-width: 62rem) {
+  .quickAccessRow {
+    grid-auto-columns: minmax(44%, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(44%, 1fr));
+  }
 }
 
 @media (min-width: 62rem) {
-}
\ No newline at end of file
+  .quickAccessRow {
+    grid-auto-columns: minmax(20%, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
+  }
+}