From e72fcaee7db0aa777a6755673eb6f59c00310531 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Tue, 11 Aug 2020 16:56:30 +0100
Subject: [PATCH] Split resources page into components
---
.../molecules/QuickAccess/index.tsx | 71 +++++++
.../molecules/QuickAccess/style.module.scss | 98 ++++++++++
.../molecules/ResourceFolders/index.tsx | 36 ++++
.../ResourceFolders/style.module.scss | 17 ++
.../molecules/ResourceSectionHeader/index.tsx | 29 +++
.../ResourceSectionHeader/style.module.scss | 64 ++++++
.../pages/ModuleResources/index.tsx | 104 +---------
.../pages/ModuleResources/style.module.scss | 185 +-----------------
8 files changed, 320 insertions(+), 284 deletions(-)
create mode 100644 frontend/src/components/molecules/QuickAccess/index.tsx
create mode 100644 frontend/src/components/molecules/QuickAccess/style.module.scss
create mode 100644 frontend/src/components/molecules/ResourceFolders/index.tsx
create mode 100644 frontend/src/components/molecules/ResourceFolders/style.module.scss
create mode 100644 frontend/src/components/molecules/ResourceSectionHeader/index.tsx
create mode 100644 frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
diff --git a/frontend/src/components/molecules/QuickAccess/index.tsx b/frontend/src/components/molecules/QuickAccess/index.tsx
new file mode 100644
index 000000000..fc4c2b8b6
--- /dev/null
+++ b/frontend/src/components/molecules/QuickAccess/index.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+
+import graphIllustration from "assets/images/graph-illustration.svg";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faFile,
+} from "@fortawesome/free-solid-svg-icons";
+import ResourceSectionHeader from "../ResourceSectionHeader";
+
+const QuickAccess: React.FC = () => {
+ return (
+ <>
+ <ResourceSectionHeader/>
+
+ <Row
+ className={classNames(
+ "d-flex",
+ "flex-row",
+ "flex-nowrap",
+ styles.quickAccessRow
+ )}
+ >
+ {[...Array(10)].map((e, i) => (
+ <Col
+ xs={7}
+ sm={5}
+ md={5}
+ lg={4}
+ 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>
+ ))}
+ </Row>
+ </>
+ );
+};
+
+export default QuickAccess;
diff --git a/frontend/src/components/molecules/QuickAccess/style.module.scss b/frontend/src/components/molecules/QuickAccess/style.module.scss
new file mode 100644
index 000000000..45d9cf6d2
--- /dev/null
+++ b/frontend/src/components/molecules/QuickAccess/style.module.scss
@@ -0,0 +1,98 @@
+@import "assets/scss/custom";
+
+.quickViewCard {
+ border-radius: 0.5rem;
+ border-color: $gray-300;
+ transition: transform 0.2s;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.quickViewCard:hover {
+ transform: scale(1.03);
+}
+
+.quickViewCard :global(.card-body) {
+ padding: 0.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid $gray-300;
+}
+
+.quickViewCard :global(.card-footer) {
+ border-radius: 0.5rem !important;
+ background: #fff;
+ border-width: 0rem;
+ padding: 0.5rem;
+ display: flex;
+ align-items: flex-end;
+}
+
+.quickViewCard :global(.card-title) {
+ font-size: 1.125rem;
+ font-weight: 400;
+ margin-bottom: 0px;
+}
+
+.quickViewCard :global(.card-img-top) {
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+}
+
+$blue-tag-background: transparentize($blue-100, 0.5);
+$teal-tag-background: transparentize($teal-100, 0.5);
+
+.quickViewTag {
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ font-weight: 500;
+ border-radius: 0.33rem;
+ margin-right: 0.5rem;
+}
+
+.tagBlue {
+ color: $blue-700;
+ background: $blue-tag-background;
+}
+
+.tagTeal {
+ color: $teal-700;
+ background: $teal-tag-background;
+}
+
+.quickAccessRow {
+ scrollbar-width: thin;
+ scrollbar-color: $white $white;
+ margin-top: 10px;
+ // margin-left: 0; // leave space before card
+}
+
+.quickAccessRow::-webkit-scrollbar {
+ width: 1rem;
+ height: 0.5rem;
+}
+.quickAccessRow::-webkit-scrollbar-track {
+ background: $white;
+ margin-left: 15px;
+ margin-right: 15px;
+}
+.quickAccessRow::-webkit-scrollbar-thumb {
+ background-color: $white;
+ border-radius: .5rem;
+}
+
+.quickAccessRow:hover {
+ scrollbar-color: $gray-400 $white;
+}
+
+.quickAccessRow:hover::-webkit-scrollbar-thumb {
+ background-color: $gray-400;
+}
+
+.quickAccessRow {
+ overflow-y: visible;
+ overflow-x: auto;
+ white-space: nowrap;
+ height: max-content;
+}
diff --git a/frontend/src/components/molecules/ResourceFolders/index.tsx b/frontend/src/components/molecules/ResourceFolders/index.tsx
new file mode 100644
index 000000000..192ad1f75
--- /dev/null
+++ b/frontend/src/components/molecules/ResourceFolders/index.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styles from "./style.module.scss";
+import Card from "react-bootstrap/Card";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faFolder,
+} from "@fortawesome/free-solid-svg-icons";
+import ResourceSectionHeader from "../ResourceSectionHeader";
+
+const ResourceFolders: React.FC = () => {
+ return (
+ <>
+ <ResourceSectionHeader/>
+
+ <Row style={{ marginTop: "10px" }}>
+ {[...Array(10)].map((e, i) => (
+ <Col xs={6} sm={6} md={3} key={i}>
+ <Card className={styles.folderCard}>
+ <Card.Body style={{ padding: ".6rem" }}>
+ <Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
+ <FontAwesomeIcon
+ style={{ fontSize: "1.125rem" }}
+ icon={faFolder}
+ />
+ </Card.Body>
+ </Card>
+ </Col>
+ ))}
+ </Row>
+ </>
+ );
+};
+
+export default ResourceFolders;
diff --git a/frontend/src/components/molecules/ResourceFolders/style.module.scss b/frontend/src/components/molecules/ResourceFolders/style.module.scss
new file mode 100644
index 000000000..7b3d07224
--- /dev/null
+++ b/frontend/src/components/molecules/ResourceFolders/style.module.scss
@@ -0,0 +1,17 @@
+@import "assets/scss/custom";
+
+.folderCard {
+ border-radius: 0.5rem;
+ transition: transform 0.2s;
+ margin-top: 0.67rem;
+}
+
+.folderCard:hover {
+ transform: scale(1.03);
+}
+
+.folderCard :global(.card-body) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
new file mode 100644
index 000000000..c58265764
--- /dev/null
+++ b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./style.module.scss";
+
+import Button from "react-bootstrap/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faDownload,
+} from "@fortawesome/free-solid-svg-icons";
+import { faSquare , faCheckSquare} from "@fortawesome/free-regular-svg-icons";
+
+const ResourceSectionHeader: React.FC = () => {
+ return (
+ <>
+ <div className={styles.sectionHeaderContainer}>
+ <span className={styles.sectionHeader}>Quick Access</span>
+ <div className={styles.sectionHeaderButtonGroup}>
+ <Button className={styles.sectionHeaderButton}>
+ <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
+ </Button>
+ <Button className={styles.sectionHeaderButton}>
+ <FontAwesomeIcon className={styles.buttonIcon} icon={faSquare} />
+ </Button>
+ </div>
+ </div>
+ </>
+ );
+};
+
+export default ResourceSectionHeader;
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
new file mode 100644
index 000000000..8ffeafbce
--- /dev/null
+++ b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
@@ -0,0 +1,64 @@
+@import "assets/scss/custom";
+
+.sectionHeaderContainer {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1.875rem;
+ align-items: center;
+}
+
+.sectionHeader {
+ font-weight: 500;
+ font-size: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.sectionHeaderButtonGroup {
+ // display: none;
+}
+
+.sectionHeaderButton {
+ background: $white;
+ color: #000;
+ border-width: 0px;
+ border-radius: 8px;
+ margin-left: 20px;
+ justify-content: space-between;
+ height: 2.25rem;
+ transition: 0.2s background;
+ -webkit-transition: 0.2s background;
+ -moz-transition: 0.2s background;
+ font-size: 1.05rem;
+}
+
+.buttonIcon {
+ margin-top: 0.22rem;
+}
+
+.buttonCheckbox :global(.form-check-input) {
+ margin: 0px;
+}
+
+.sectionHeaderButton:active:hover,
+.sectionHeaderButton:global(.active):hover {
+ background-color: $gray-900 !important;
+}
+
+.sectionHeaderButton:global(.active),
+.sectionHeaderButton:active {
+ color: #fff;
+ background: #000 !important;
+ font-weight: 500;
+ text-align: left;
+ border-width: 0rem;
+ height: 2.25rem;
+ line-height: 1.375rem;
+}
+
+.sectionHeaderButton:hover {
+ background: #e5e5e5;
+ border-color: #fff;
+ color: #000;
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index af5072ff7..f4e687b4e 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -1,28 +1,16 @@
import React from "react";
import styles from "./style.module.scss";
-
-import classNames from "classnames";
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 Button from "react-bootstrap/Button";
-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 Form from "react-bootstrap/Form";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faInfoCircle,
- faFile,
- faFolder,
- faDownload,
- faCheckSquare
} from "@fortawesome/free-solid-svg-icons";
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import QuickAccess from "components/molecules/QuickAccess";
+import ResourceFolders from "components/molecules/ResourceFolders";
const ModuleResources: React.FC = () => {
return (
@@ -41,92 +29,8 @@ const ModuleResources: React.FC = () => {
</InputGroup.Append>
</InputGroup>
- <div className={styles.sectionHeaderContainer}>
- <span className={styles.sectionHeader}>Quick Access</span>
- <div className={styles.sectionHeaderButtonGroup}>
- <Button className={styles.sectionHeaderButton}>
- <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
- </Button>
- <Button className={styles.sectionHeaderButton}>
- <FontAwesomeIcon className={styles.buttonIcon} icon={faSquare} />
- </Button>
- </div>
- </div>
-
- {/* TODO: add scroll listener once code is refactored */}
- <Row
- className={classNames(
- "d-flex",
- "flex-row",
- "flex-nowrap",
- styles.quickAccessRow
- )}
- >
- {[...Array(10)].map((e, i) => (
- <Col
- xs={7}
- sm={5}
- md={5}
- lg={4}
- 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>
- ))}
- </Row>
-
- <div className={styles.sectionHeaderContainer}>
- <span className={styles.sectionHeader}>Folders</span>
- <div className={styles.sectionHeaderButtonGroup}>
- <Button className={styles.sectionHeaderButton}>
- <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
- </Button>
- <Button className={styles.sectionHeaderButton}>
- <FontAwesomeIcon className={styles.buttonIcon} icon={faCheckSquare} />
- </Button>
- </div>
- </div>
-
- <Row style={{ marginTop: "10px" }}>
- {[...Array(10)].map((e, i) => (
- <Col xs={6} sm={6} md={3} key={i}>
- <Card className={styles.folderCard}>
- <Card.Body style={{ padding: ".6rem" }}>
- <Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
- <FontAwesomeIcon
- style={{ fontSize: "1.125rem" }}
- icon={faFolder}
- />
- </Card.Body>
- </Card>
- </Col>
- ))}
- </Row>
+ <QuickAccess />
+ <ResourceFolders/>
</>
);
};
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 4c5dd6dba..1ece388a1 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -1,8 +1,5 @@
@import "assets/scss/custom";
-.moduleParagraph {
- margin-top: 1rem;
-}
.searchBar {
border-radius: 0.5rem;
@@ -54,184 +51,4 @@
font-weight: 500 !important;
color: $white !important;
border-color: $black;
-}
-
-.sectionHeaderContainer {
- display: flex;
- justify-content: space-between;
- margin-top: 1.875rem;
- align-items: center;
-}
-
-.sectionHeader {
- font-weight: 500;
- font-size: 24px;
-}
-
-.sectionHeaderButtonGroup {
- display: none;
-}
-
-.sectionHeaderButton {
- background: $white;
- color: #000;
- border-width: 0px;
- border-radius: 8px;
- margin-left: 20px;
- justify-content: space-between;
- height: 2.25rem;
- transition: 0.2s background;
- -webkit-transition: 0.2s background;
- -moz-transition: 0.2s background;
- font-size: 1.05rem;
-}
-
-.buttonIcon {
- margin-top: 0.22rem;
-}
-
-.buttonCheckbox :global(.form-check-input) {
- margin: 0px;
-}
-
-.sectionHeaderButton:active:hover,
-.sectionHeaderButton:global(.active):hover {
- background-color: $gray-900 !important;
-}
-
-.sectionHeaderButton:global(.active),
-.sectionHeaderButton:active {
- color: #fff;
- background: #000 !important;
- font-weight: 500;
- text-align: left;
- border-width: 0rem;
- height: 2.25rem;
- line-height: 1.375rem;
-}
-
-.sectionHeaderButton:hover {
- background: #e5e5e5;
- border-color: #fff;
- color: #000;
-}
-
-.quickViewCard {
- border-radius: 0.5rem;
- border-color: $gray-300;
- transition: transform 0.2s;
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
-.quickViewCard:hover {
- transform: scale(1.03);
-}
-
-.quickViewCard :global(.card-body) {
- padding: 0.5rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-top: 1px solid $gray-300;
-}
-
-.quickViewCard :global(.card-footer) {
- border-radius: 0.5rem !important;
- background: #fff;
- border-width: 0rem;
- padding: 0.5rem;
- display: flex;
- align-items: flex-end;
-}
-
-.quickViewCard :global(.card-title) {
- font-size: 1.125rem;
- font-weight: 400;
- margin-bottom: 0px;
-}
-
-.quickViewCard :global(.card-img-top) {
- border-top-left-radius: 0.5rem;
- border-top-right-radius: 0.5rem;
-}
-
-$blue-tag-background: transparentize($blue-100, 0.5);
-$teal-tag-background: transparentize($teal-100, 0.5);
-
-.quickViewTag {
- text-transform: uppercase;
- font-size: 0.8rem;
- font-weight: 500;
- border-radius: 0.33rem;
- margin-right: 0.5rem;
-}
-
-.tagBlue {
- color: $blue-700;
- background: $blue-tag-background;
-}
-
-.tagTeal {
- color: $teal-700;
- background: $teal-tag-background;
-}
-
-.folderCard {
- border-radius: 0.5rem;
- transition: transform 0.2s;
- margin-top: 0.67rem;
-}
-
-.folderCard:hover {
- transform: scale(1.03);
-}
-
-.folderCard :global(.card-body) {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.quickAccessRow {
- scrollbar-width: thin;
- scrollbar-color: $white $white;
- margin-top: 10px;
- // margin-left: 0; // leave space before card
-}
-
-.quickAccessRow::-webkit-scrollbar {
- width: 1rem;
- height: 0.5rem;
-}
-.quickAccessRow::-webkit-scrollbar-track {
- background: $white;
- margin-left: 15px;
- margin-right: 15px;
-}
-.quickAccessRow::-webkit-scrollbar-thumb {
- background-color: $white;
- border-radius: .5rem;
-}
-
-.quickAccessRow:hover {
- scrollbar-color: $gray-400 $white;
-}
-
-.quickAccessRow:hover::-webkit-scrollbar-thumb {
- background-color: $gray-400;
-}
-
-.quickAccessRow {
- overflow-y: visible;
- overflow-x: auto;
- white-space: nowrap;
- height: max-content;
-}
-
-
-@media (max-width: 62rem) {
-}
-
-@media (min-width: 62rem) {
-}
+}
\ No newline at end of file
--
GitLab