From 9f81efde48d6e9a4a437731364e6b9b30643a3cc Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Tue, 25 Aug 2020 16:55:16 +0530
Subject: [PATCH] Update styling of resources list view
---
.../CategoryHeader/style.module.scss | 10 ++-
.../molecules/CategoryList/index.tsx | 69 ++++++++++---------
.../molecules/CategoryList/style.module.scss | 25 ++++++-
.../SectionHeader/style.module.scss | 4 ++
.../ModuleResources/components/ListView.tsx | 4 +-
5 files changed, 77 insertions(+), 35 deletions(-)
diff --git a/src/components/molecules/CategoryHeader/style.module.scss b/src/components/molecules/CategoryHeader/style.module.scss
index ae0eefa66..b92b43200 100644
--- a/src/components/molecules/CategoryHeader/style.module.scss
+++ b/src/components/molecules/CategoryHeader/style.module.scss
@@ -2,5 +2,13 @@
@import "assets/scss/global";
.sectionHeader {
- text-transform: uppercase;
+ font-size: 1.25rem;
+ text-transform: capitalize;
+}
+
+.sectionHeaderContainer {
+ padding: 0.25rem;
+ border-bottom: 0.0625rem solid $gray-300;
+ margin-bottom: 1rem;
+ margin-top: 1.25rem;
}
diff --git a/src/components/molecules/CategoryList/index.tsx b/src/components/molecules/CategoryList/index.tsx
index 87b54aa2b..93e43e6b3 100644
--- a/src/components/molecules/CategoryList/index.tsx
+++ b/src/components/molecules/CategoryList/index.tsx
@@ -8,59 +8,66 @@ import Badge from "react-bootstrap/Badge";
import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { SelectionProps } from "components/molecules/SelectionView";
-import { resourceTypeToIcon } from "../../pages/ModuleResources"
+import { resourceTypeToIcon } from "../../pages/ModuleResources";
-const CategoryList: React.FC<{ select: SelectionProps }> = ({
- select,
-}) => {
+const CategoryList: React.FC<{ select: SelectionProps }> = ({ select }) => {
return (
- <>
+ <>
{select.selectionItems.map(({ title, type, tags, id }) => {
if (type === undefined || tags === undefined) return null;
- let icon = select.isAnySelected() || select.state.isHoveringOver[id]
- ? select.state.isSelected[id]
- ? faCheckSquare
- : faSquare
- : resourceTypeToIcon(type);
+ let icon =
+ select.isAnySelected() || select.state.isHoveringOver[id]
+ ? select.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : resourceTypeToIcon(type);
return (
<Row
- style={{ marginTop: "10px", marginLeft: "0px", marginRight: "0px", cursor: "pointer" }}
- onClick={() => select.handleCardClick(id)}
- onMouseOver={() => select.handleMouseOver(id)}
- onMouseOut={() => select.handleMouseOut(id)}
- key={id}
+ className={styles.listRow}
+ onClick={() => select.handleCardClick(id)}
+ onMouseOver={() => select.handleMouseOver(id)}
+ onMouseOut={() => select.handleMouseOut(id)}
+ key={id}
>
- <Col>{title}</Col>
- <Col md="auto">
- {tags.map((tag) => (
+ <Col
+ style={{
+ display: "flex",
+ alignItems: "center",
+ padding: 0,
+ fontSize: "1rem"
+ }}
+ >
+ {title}
+ </Col>
+ <Col md="auto" style={{ display: "flex", alignItems: "center" }}>
+ {tags.map(tag => (
<Badge
pill
key={tag}
className={classNames(
styles.fileTag,
tag === "new" ? styles.tagTeal : styles.tagBlue
- )}>
+ )}
+ >
{tag}
</Badge>
))}
</Col>
- <Col md="auto" className="px-0">
- <FontAwesomeIcon
- style={{ fontSize: "1.125rem", marginRight: "0.5rem" }}
- icon={icon}
- onClick={(e) => {
- e.stopPropagation();
- select.handleIconClick(id);
- }}
- fixedWidth
- />
- </Col>
+ <FontAwesomeIcon
+ style={{ fontSize: "1.125rem" }}
+ icon={icon}
+ onClick={e => {
+ e.stopPropagation();
+ select.handleIconClick(id);
+ }}
+ fixedWidth
+ />
</Row>
);
})}
- </>
+ </>
);
};
diff --git a/src/components/molecules/CategoryList/style.module.scss b/src/components/molecules/CategoryList/style.module.scss
index d098ba485..7bcc96b80 100644
--- a/src/components/molecules/CategoryList/style.module.scss
+++ b/src/components/molecules/CategoryList/style.module.scss
@@ -1 +1,24 @@
-@import "assets/scss/global";
\ No newline at end of file
+@import "assets/scss/global";
+
+.listRow {
+ border: 0.0625rem solid $white;
+ padding: 0.25rem 0.75rem;
+ margin-right: 0rem;
+ margin-left: 0rem;
+ cursor: pointer;
+ margin-top: 0.25rem;
+ transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+ display: flex;
+ align-items: center;
+}
+
+.listRow:hover {
+ border-radius: 0.5rem;
+ transform: scale(1.01);
+ box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+ border-color: $gray-300;
+}
+
+.fileTag:last-child {
+ margin-right: 0rem;
+}
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
index b3f8e7dc8..feea72920 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
+++ b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
@@ -3,20 +3,24 @@
.sectionHeader {
cursor: pointer;
+ font-size: 1.5rem;
}
.alert-enter {
opacity: 0;
transform: scale(0.9);
}
+
.alert-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
+
.alert-exit {
opacity: 1;
}
+
.alert-exit-active {
opacity: 0;
transform: scale(0.9);
diff --git a/src/components/pages/ModuleResources/components/ListView.tsx b/src/components/pages/ModuleResources/components/ListView.tsx
index 22318335d..f0a98efe8 100644
--- a/src/components/pages/ModuleResources/components/ListView.tsx
+++ b/src/components/pages/ModuleResources/components/ListView.tsx
@@ -34,7 +34,7 @@ const ListView: React.FC<ListViewProps> = ({
return (
<SelectionView
- heading="Materials"
+ heading="Resources"
onItemClick={onItemClick}
onDownloadClick={onDownloadClick}
selectionItems={filesContent}
@@ -83,4 +83,4 @@ const ListView: React.FC<ListViewProps> = ({
);
};
-export default ListView;
\ No newline at end of file
+export default ListView;
--
GitLab