From 52cf1f78a41bb33db1c90d654e5ff1ff405879a7 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 12 Aug 2020 17:05:15 +0100
Subject: [PATCH] Add real logic data to resources example
---
frontend/src/assets/images/pdf-label.png | Bin 0 -> 4438 bytes
.../src/components/atoms/FileCard/index.tsx | 6 +-
.../atoms/FileCard/style.module.scss | 14 ++-
.../molecules/QuickAccessView/index.tsx | 2 +-
.../QuickAccessView/style.module.scss | 12 +--
.../pages/ModuleResources/index.tsx | 80 +++++++++++++-----
6 files changed, 78 insertions(+), 36 deletions(-)
create mode 100755 frontend/src/assets/images/pdf-label.png
diff --git a/frontend/src/assets/images/pdf-label.png b/frontend/src/assets/images/pdf-label.png
new file mode 100755
index 0000000000000000000000000000000000000000..9b054ec504c387e0615012c6b375ad333a122eac
GIT binary patch
literal 4438
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
KnU$Cx<NgCvvr;tx
literal 0
HcmV?d00001
diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index 17ea3fbf8..bc1b5d5d7 100644
--- a/frontend/src/components/atoms/FileCard/index.tsx
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -3,7 +3,7 @@ import styles from "./style.module.scss";
import classNames from "classnames";
-import graphIllustration from "assets/images/graph-illustration.svg";
+import applicationPDF from "assets/images/pdf-label.png";
import Badge from "react-bootstrap/Badge";
import Card from "react-bootstrap/Card";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -32,9 +32,9 @@ const FileCard: React.FC<FileCardProps> = ({
}: FileCardProps) => {
return (
<Card className={styles.quickViewCard} onClick={onClick}>
- <Card.Img variant="top" src={graphIllustration} />
+ <Card.Img variant="top" src={applicationPDF} />
<Card.Body>
- <Card.Title className={"text-truncate"}>{title}</Card.Title>
+ <Card.Title style={{wordWrap: "break-word"}} >{title}</Card.Title>
<FontAwesomeIcon
style={{ fontSize: "1.125rem" }}
icon={icon}
diff --git a/frontend/src/components/atoms/FileCard/style.module.scss b/frontend/src/components/atoms/FileCard/style.module.scss
index 4c3395e6c..74865272f 100644
--- a/frontend/src/components/atoms/FileCard/style.module.scss
+++ b/frontend/src/components/atoms/FileCard/style.module.scss
@@ -4,8 +4,7 @@
border-radius: 0.5rem;
border-color: $gray-300;
transition: transform 0.2s;
- margin-top: 10px;
- margin-bottom: 10px;
+ height: 96%;
}
.quickViewCard:hover {
@@ -31,8 +30,15 @@
.quickViewCard :global(.card-title) {
font-size: 1.125rem;
- font-weight: 400;
- margin-bottom: 0px;
+ font-weight: 400;
+ white-space: normal;
+ margin-bottom: 0px;
+
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
}
.quickViewCard :global(.card-img-top) {
diff --git a/frontend/src/components/molecules/QuickAccessView/index.tsx b/frontend/src/components/molecules/QuickAccessView/index.tsx
index f1041ed90..e2eeaf39c 100644
--- a/frontend/src/components/molecules/QuickAccessView/index.tsx
+++ b/frontend/src/components/molecules/QuickAccessView/index.tsx
@@ -132,7 +132,7 @@ class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
lg={4}
xl={3}
key={id}
- style={{ marginBottom: ".5rem" }}
+ style={{ marginBottom: ".5rem", marginTop: ".5rem" }}
>
<FileCard
title={title}
diff --git a/frontend/src/components/molecules/QuickAccessView/style.module.scss b/frontend/src/components/molecules/QuickAccessView/style.module.scss
index 00092d368..a43504ce7 100644
--- a/frontend/src/components/molecules/QuickAccessView/style.module.scss
+++ b/frontend/src/components/molecules/QuickAccessView/style.module.scss
@@ -4,6 +4,9 @@
scrollbar-width: thin;
scrollbar-color: $white $white;
margin-top: 10px;
+ overflow-y: visible;
+ overflow-x: auto;
+ height: fit-content;
// margin-left: 0; // leave space before card
}
@@ -27,11 +30,4 @@
.quickAccessRow:hover::-webkit-scrollbar-thumb {
background-color: $gray-400;
-}
-
-.quickAccessRow {
- overflow-y: visible;
- overflow-x: auto;
- white-space: nowrap;
- height: max-content;
-}
+}
\ 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 7f30c905d..3d021196a 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -13,68 +13,108 @@ import ResourcesFolderView from "components/molecules/ResourcesFolderView";
const ModuleResources: React.FC = () => {
let folderItems = [
{
- title: "Lecture Materials",
+ title: "Slides",
id: 0,
},
{
- title: "Panopto Videos",
- id: 1,
- },
- {
- title: "Tutorial Sheets",
+ title: "Logic Exercise",
id: 2,
},
{
- title: "Code",
+ title: "Pandor Lab",
id: 3,
},
{
- title: "Useful Links",
+ title: "Extra",
id: 4,
- },
- {
- title: "Other",
- id: 5,
},
];
- let quickAccessItems = [
+ let ResourceItems = [
{
- title: "My very very very very very long title",
+ title: "Syntax Semantics Propositional Logic",
type: "File",
tags:["new", "Week 1"],
id: 0,
},
{
- title: "Slides 1 - 1UP",
+ title: "Classical First-Order Predicate Logic",
type: "File",
tags:["new", "Week 2"],
id: 1,
},
{
- title: "Circuit simulator",
+ title: "Translation Validity",
type: "Link",
tags:["new", "Week 2"],
id: 2,
},
{
- title: "C - Lecture 1",
+ title: "validityPL-part1",
type: "Panopto",
tags:["new"],
id: 3,
},
{
- title: "Translation Validity",
+ title: "validityPL-part2",
type: "Link",
tags:["Week 2"],
id: 4,
},
{
- title: "Revision Exercises",
+ title: "validityPL-part3",
type: "File",
tags:["Week 3"],
id: 5,
},
+ {
+ title: "validityPL-part3",
+ type: "File",
+ tags:["Week 3"],
+ id: 6,
+ },
+ {
+ title: "validityFOL-part2",
+ type: "File",
+ tags:["Week 3"],
+ id: 7,
+ },
+ {
+ title: "Logic Exercise 1",
+ type: "File",
+ tags:["Week 3"],
+ id: 8,
+ },
+ {
+ title: "Logic Exercise 2",
+ type: "File",
+ tags:["Week 3"],
+ id: 9,
+ },
+ {
+ title: "Logic Exercise 3",
+ type: "File",
+ tags:["Week 3"],
+ id: 10,
+ },
+ {
+ title: "Pandor Lab",
+ type: "File",
+ tags:["Week 3"],
+ id: 11,
+ },
+ {
+ title: "Propositional Logic Exercises",
+ type: "File",
+ tags:["Week 3"],
+ id: 12,
+ },
+ {
+ title: "Extra Logic Exercises",
+ type: "File",
+ tags:["Week 3"],
+ id: 13,
+ },
]
return (
@@ -93,7 +133,7 @@ const ModuleResources: React.FC = () => {
</InputGroup.Append>
</InputGroup>
- <QuickAccessView quickAccessItems={quickAccessItems}/>
+ <QuickAccessView quickAccessItems={ResourceItems}/>
<ResourcesFolderView folderItems={folderItems}/>
</>
);
--
GitLab