From b099cdf13f73514b4e6e8460321c0eea08131ca6 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Tue, 11 Aug 2020 00:02:23 +0100
Subject: [PATCH] Add basic scrolling to quick access
---
.../pages/ModuleResources/index.tsx | 33 ++++++++++++-------
.../pages/ModuleResources/style.module.scss | 27 +++++++++++++++
2 files changed, 48 insertions(+), 12 deletions(-)
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 3f67e142a..5d64ddc28 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, RefObject } from "react";
import styles from "./style.module.scss";
import classNames from "classnames";
@@ -7,8 +7,6 @@ import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
import graphIllustration from "assets/images/graph-illustration.svg";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
-import Carousel from "react-bootstrap/Carousel";
-
import Button from "react-bootstrap/Button";
import Badge from "react-bootstrap/Badge";
import Card from "react-bootstrap/Card";
@@ -22,11 +20,6 @@ import {
} from "@fortawesome/free-solid-svg-icons";
const ModuleResources: React.FC = () => {
- useEffect(() => {
- //@ts-ignore
- window.Holder.run();
- });
-
return (
<>
<MyBreadcrumbs />
@@ -44,10 +37,26 @@ const ModuleResources: React.FC = () => {
</InputGroup>
<h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
-
- <Row>
- {[...Array(4)].map((e, i) => (
- <Col xs={12} sm={6} md={6} lg={4} xl={3} key={i}>
+
+ {/* TODO: add scroll listener once code is refactored */}
+ <Row
+ className={classNames(
+ "d-flex",
+ "flex-row",
+ "flex-nowrap",
+ 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>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index b9554ade2..2bb383e36 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -136,6 +136,33 @@ $teal-tag-background: transparentize($teal-100, 0.5);
align-items: center;
}
+.quickAccessRow {
+ scrollbar-width: thin;
+ scrollbar-color: $gray-300 $gray-100;
+ margin-top: 1rem;
+ margin-left: 0;
+}
+
+.quickAccessRow::-webkit-scrollbar {
+ width: 1rem;
+}
+.quickAccessRow::-webkit-scrollbar-track {
+ background: $gray-100;
+}
+.quickAccessRow::-webkit-scrollbar-thumb {
+ background-color: $gray-300;
+ border-radius: .5rem;
+}
+
+
+.quickAccessRow {
+ overflow-y: visible;
+ overflow-x: auto;
+ white-space: nowrap;
+ height: max-content;
+}
+
+
@media (max-width: 62rem) {
}
--
GitLab