From ba01aaf30b35ddec213e264c69755531644adb8d Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Mon, 10 Aug 2020 22:06:38 +0100
Subject: [PATCH] Fix sidebar issues and icon wrapping
---
.../src/components/atoms/ModuleCard/index.tsx | 2 +-
.../atoms/ModuleCard/style.module.scss | 1 -
.../organisms/LeftBar/style.module.scss | 6 +--
.../organisms/RightBar/style.module.scss | 6 +--
.../components/pages/ModuleFeedback/index.tsx | 7 +---
.../pages/ModuleFeedback/style.module.scss | 5 +--
.../pages/ModuleResources/index.tsx | 20 ++++++++--
.../pages/ModuleResources/style.module.scss | 40 +++++++++----------
.../components/pages/StandardView/index.tsx | 2 +-
9 files changed, 47 insertions(+), 42 deletions(-)
diff --git a/frontend/src/components/atoms/ModuleCard/index.tsx b/frontend/src/components/atoms/ModuleCard/index.tsx
index d66458d74..03ae8902e 100644
--- a/frontend/src/components/atoms/ModuleCard/index.tsx
+++ b/frontend/src/components/atoms/ModuleCard/index.tsx
@@ -42,7 +42,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
textColor = "#000";
}
return (
- <Col xs={12} sm={12} md={6} lg={6} xl={4} style={{ marginTop: "1.875rem" }}>
+ <Col xs={12} sm={12} md={6} lg={4} xl={3} style={{ marginTop: "1.875rem" }}>
<Card
className={classNames(styles.moduleCard)}
as={Link}
diff --git a/frontend/src/components/atoms/ModuleCard/style.module.scss b/frontend/src/components/atoms/ModuleCard/style.module.scss
index f515ea997..ab00b579c 100644
--- a/frontend/src/components/atoms/ModuleCard/style.module.scss
+++ b/frontend/src/components/atoms/ModuleCard/style.module.scss
@@ -30,7 +30,6 @@
padding: 0.5rem;
display: flex;
justify-content: space-between;
- font-size: 1.125rem;
}
.moduleCard :global(.card-body) {
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index 077de184a..4b83558ac 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -7,8 +7,8 @@
display: block;
top: 0;
left: 0;
- width: 250px;
- height: calc(100vh - 61px);
+ width: 15.625rem;
+ height: calc(100vh - 3.8125rem);
overflow-y: auto;
overflow-x: hidden;
@@ -19,7 +19,7 @@
transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
z-index: 5000;
- margin-top: 61px;
+ margin-top: 3.8125rem;
padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss
index fc0fd0c42..22ff87076 100644
--- a/frontend/src/components/organisms/RightBar/style.module.scss
+++ b/frontend/src/components/organisms/RightBar/style.module.scss
@@ -7,8 +7,8 @@
display: block;
top: 0;
right: 0;
- width: 250px;
- height: calc(100vh - 61px);
+ width: 15.625rem;
+ height: calc(100vh - 3.813rem);
overflow-y: auto;
overflow-x: hidden;
@@ -19,7 +19,7 @@
transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
z-index: 5000;
- margin-top: 61px;
+ margin-top: 3.813rem;
padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
diff --git a/frontend/src/components/pages/ModuleFeedback/index.tsx b/frontend/src/components/pages/ModuleFeedback/index.tsx
index d8c15b5ba..d5ea5913f 100644
--- a/frontend/src/components/pages/ModuleFeedback/index.tsx
+++ b/frontend/src/components/pages/ModuleFeedback/index.tsx
@@ -39,12 +39,7 @@ const ModuleFeedback: React.FC = () => {
<Col xs={12} sm={6} md={6} lg={4} xl={3} key={i}>
<Card className={styles.quickViewCard}>
<Card.Header>
- <div className={styles.assessmentIcons}>
- <FontAwesomeIcon icon={faClock} />
- <FontAwesomeIcon icon={faExclamationTriangle} />
- <FontAwesomeIcon icon={faCalendarPlus} />
- </div>
- <span>40 / 50</span>
+ <span className={styles.assessmentResult}>40 / 50</span>
</Card.Header>
<Card.Img variant="top" src={graphIllustration} />
<Card.Body>
diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss
index d4858c958..9c82a47c8 100644
--- a/frontend/src/components/pages/ModuleFeedback/style.module.scss
+++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss
@@ -8,9 +8,8 @@
margin-top: 1rem;
}
-.assessmentIcons > * {
- margin-right: .5rem;
- height: 1.125rem;
+.assessmentResult{
+ float: right;
}
.searchBar {
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index cfd071b66..3f67e142a 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -7,13 +7,19 @@ 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";
import Row from "react-bootstrap/esm/Row";
import Col from "react-bootstrap/esm/Col";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faInfoCircle, faFile } from "@fortawesome/free-solid-svg-icons";
+import {
+ faInfoCircle,
+ faFile,
+ faFolder,
+} from "@fortawesome/free-solid-svg-icons";
const ModuleResources: React.FC = () => {
useEffect(() => {
@@ -52,10 +58,16 @@ const ModuleResources: React.FC = () => {
/>
</Card.Body>
<Card.Footer>
- <Badge pill className={classNames(styles.quickViewTag, styles.tagTeal)}>
+ <Badge
+ pill
+ className={classNames(styles.quickViewTag, styles.tagTeal)}
+ >
New
</Badge>
- <Badge pill className={classNames(styles.quickViewTag, styles.tagBlue)}>
+ <Badge
+ pill
+ className={classNames(styles.quickViewTag, styles.tagBlue)}
+ >
Week 1
</Badge>
</Card.Footer>
@@ -78,7 +90,7 @@ const ModuleResources: React.FC = () => {
<Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
<FontAwesomeIcon
style={{ fontSize: "1.125rem" }}
- icon={faFile}
+ icon={faFolder}
/>
</Card.Body>
</Card>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 4a0f5c403..b9554ade2 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -9,10 +9,10 @@
}
.searchBar {
- border-radius: .5rem;
+ border-radius: 0.5rem;
background-color: $gray-100;
- border-color: $gray-100;
- transition: 0.2s background-color;
+ border-color: $gray-100;
+ transition: 0.2s background-color;
-webkit-transition: 0.2s background-color;
-moz-transition: 0.2s back-ground-color;
}
@@ -22,22 +22,22 @@
opacity: 1;
}
-.searchBar:focus + :global(.input-group-append) .searchBarIcon{
- box-shadow: none !important;
- border-left: none;
+.searchBar:focus + :global(.input-group-append) .searchBarIcon {
+ box-shadow: none !important;
+ border-left: none;
border-color: $gray-300;
- background-color: $white;
+ background-color: $white;
}
-.searchBar:focus{
- box-shadow: none !important;
- border-right: none;
+.searchBar:focus {
+ box-shadow: none !important;
+ border-right: none;
border-color: $gray-300;
- background-color: $white;
+ background-color: $white;
}
.searchBarIcon {
- border-radius: .5rem;
+ border-radius: 0.5rem;
background-color: $gray-100;
border-color: $gray-100;
color: $gray-500;
@@ -62,7 +62,7 @@
.quickViewCard {
margin-top: 1.25rem;
- border-radius: .5rem;
+ border-radius: 0.5rem;
border-color: $gray-300;
transition: transform 0.2s;
}
@@ -95,8 +95,8 @@
}
.quickViewCard :global(.card-img-top) {
- border-top-left-radius: .5rem;
- border-top-right-radius: .5rem;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
}
$blue-tag-background: transparentize($blue-100, 0.5);
@@ -104,10 +104,10 @@ $teal-tag-background: transparentize($teal-100, 0.5);
.quickViewTag {
text-transform: uppercase;
- font-size: .8rem;
+ font-size: 0.8rem;
font-weight: 500;
- border-radius: .33rem;
- margin-right: .5rem;
+ border-radius: 0.33rem;
+ margin-right: 0.5rem;
}
.tagBlue {
@@ -121,7 +121,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
.folderCard {
- border-radius: .5rem;
+ border-radius: 0.5rem;
transition: transform 0.2s;
margin-top: 0.67rem;
}
@@ -140,4 +140,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
}
@media (min-width: 62rem) {
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 52c443a9a..2c4ad1245 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -52,7 +52,7 @@ const StandardView: React.FC<StandardViewProps> = ({
</Switch>
<div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
- <Container className={classNames("px-4", "pageContainer")}>
+ <Container className={classNames("px-3", "pageContainer")}>
<Switch>
<Route path="/dashboard">
<ExamplePage name="Dashboard" />
--
GitLab