From a581b7ba299b4ef612855deb03e0fd45221bcb1e Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Mon, 10 Aug 2020 21:29:37 +0530
Subject: [PATCH] Update styling of resources page
---
.../pages/ModuleResources/index.tsx | 52 +++++---
.../pages/ModuleResources/style.module.scss | 112 +++++++++++++++++-
2 files changed, 149 insertions(+), 15 deletions(-)
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index ad186cf48..c95c397d5 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -4,13 +4,16 @@ 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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faFile } from "@fortawesome/free-solid-svg-icons";
const ModuleResources: React.FC = () => {
useEffect(() => {
@@ -21,14 +24,17 @@ const ModuleResources: React.FC = () => {
return (
<>
<MyBreadcrumbs />
- <InputGroup style={{ marginTop: "3rem" }}>
- <InputGroup.Prepend>
- <InputGroup.Text>
- <FontAwesomeIcon icon={faSearch} />
- </InputGroup.Text>
- </InputGroup.Prepend>
-
- <FormControl aria-label="Search" placeholder="Search" />
+ <InputGroup>
+ <FormControl
+ className={styles.searchBar}
+ aria-label="Search"
+ placeholder="Search..."
+ />
+ <InputGroup.Append>
+ <Button className={styles.searchBarIcon}>
+ <FontAwesomeIcon size="1x" icon={faInfoCircle} />
+ </Button>
+ </InputGroup.Append>
</InputGroup>
<h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
@@ -36,23 +42,41 @@ const ModuleResources: React.FC = () => {
<Row>
{[...Array(4)].map((e, i) => (
<Col xs={6} sm={6} md={3} key={i}>
- <Card style={{ marginTop: "1rem" }}>
- <Card.Img variant="top" src="holder.js/100px100" />
+ <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={styles.quickViewTag}>
+ New
+ </Badge>
+ </Card.Footer>
</Card>
</Col>
))}
</Row>
- <h5 className={classNames(styles.moduleSectionHeader)}>Folders</h5>
+ <h5
+ style={{ marginTop: "30px", marginBottom: "10px" }}
+ className={classNames(styles.moduleSectionHeader)}
+ >
+ Folders
+ </h5>
<Row>
{[...Array(10)].map((e, i) => (
<Col xs={6} sm={6} md={3} key={i}>
- <Card style={{ marginTop: ".6rem" }}>
+ <Card className={styles.folderCard}>
<Card.Body style={{ padding: ".6rem" }}>
- <Card.Text>Folder{i}</Card.Text>
+ <Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
+ <FontAwesomeIcon
+ style={{ fontSize: "1.125rem" }}
+ icon={faFile}
+ />
</Card.Body>
</Card>
</Col>
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index 78be428d8..bc6679ff8 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -5,7 +5,117 @@
}
.moduleParagraph {
- margin-top: 1rem;
+ margin-top: 1rem;
+}
+
+.searchBar {
+ border-radius: 8px;
+ background-color: $gray-100;
+ border-color: $gray-100;
+ transition: 0.5s border-color;
+ -webkit-transition: 0.5s border-color;
+ -moz-transition: 0.5s border-color;
+}
+
+.serachBar::placeholder {
+ color: #acb5bd;
+ opacity: 1;
+}
+
+.searchBar:focus {
+ box-shadow: none !important;
+ border-color: $gray-300;
+ background-color: $white;
+}
+
+.searchBarIcon {
+ border-radius: 8px;
+ background-color: $gray-100;
+ border-color: $gray-100;
+ color: $gray-500;
+ transition: 0.2s background;
+ -webkit-transition: 0.2s background;
+ -moz-transition: 0.2s background;
+ margin-left: 1px;
+}
+
+.searchBarIcon:hover {
+ background: $gray-200;
+ color: $gray-700 !important;
+ border-color: $gray-200;
+}
+
+.searchBarIcon:global(.active),
+.searchBarIcon:active {
+ background: $black !important;
+ font-weight: 500 !important;
+ color: $white !important;
+ border-color: $black;
+}
+
+.quickViewCard {
+ margin-top: 20px;
+ border-radius: 8px;
+ border-color: $gray-300;
+ transition: transform 0.2s;
+}
+
+.quickViewCard:hover {
+ transform: scale(1.03);
+}
+
+.quickViewCard :global(.card-body) {
+ padding: 0.5rem;
+ display: flex;
+ justify-content: space-between;
+ 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: 18px;
+ font-weight: 400;
+ margin-bottom: 0px;
+}
+
+.quickViewCard :global(.card-img-top) {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+}
+
+$new-tag-background: transparentize($blue-100, 0.5);
+
+.quickViewTag {
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 500;
+ color: $blue-700;
+ background: $new-tag-background;
+ border-radius: 4px;
+}
+
+.folderCard {
+ border-radius: 8px;
+ transition: transform 0.2s;
+ margin-top: 10px;
+}
+
+.folderCard:hover {
+ transform: scale(1.03);
+}
+
+.folderCard :global(.card-body) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
@media (max-width: 62rem) {
--
GitLab