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
Binary files /dev/null and b/frontend/src/assets/images/pdf-label.png differ
diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index 17ea3fbf8ecbc5b144ab357adf7c16c6d5edce44..bc1b5d5d7c30908d79810f234a7698cbae5aaf3f 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 4c3395e6c843edd5b13f65899a3b9c1a02b525f7..74865272f6aeb612528e5e0498d98e710ff2b815 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 f1041ed90c6b7c7e6caba6bfeb6b475d4e7bcc41..e2eeaf39cb83b96d923fc240e46044199ee0569a 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 00092d3680fa85bc218a34621a95d91e6db7ef36..a43504ce77deb164dbc71e67b179f60534c52035 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 7f30c905d9ffd236dfe17f1a522a08f9676981d6..3d021196afd51a30487c25e29bbe2235e3faf25b 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}/>
</>
);