#15: Implemented Article Related Topics Component

* implemented BodySection component, fixed header-marker from disappearing at smaller screen widths

* refactored body content into a separate component and used body content component with header component to create section body component

* completed basic structure and font sizes

* adapted article components to not use container

* added key to topic list

* finished related topics component

Author: Darren52BT

frontend/src/Components/Article/Topics/RelatedTopicsList.js

@@ -0,0 +1,30 @@
+//Component for list of related topics, which displays multiple categories of topic lists
+
+import { Stack } from "react-bootstrap";
+import TopicList from "./TopicList";
+
+//accepts an array of objects, which each contain topic category name
+//and an array of topics and their corresponding links
+//these objects have the following format
+/*{
+    topicCategory: string,
+    topicList: Array of {topic: string, link: string}
+}
+*/
+
+export default function RelatedTopicsList({ topicLists }) {
+  return (
+    <Stack className="ps-3" style={{ borderLeft: "1px solid black" }}>
+      <h3 className="related-topics-heading">Related Topics</h3>
+      <Stack gap={3}>
+        {topicLists.map(({ topicCategory, topicList }) => (
+          <TopicList
+            topicCategory={topicCategory}
+            topicList={topicList}
+            key={topicCategory}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

frontend/src/css/custom.css

@@ -1,10 +1,63 @@
 import ArticleHeader from "../Components/Article/ArticleHeader/ArticleHeader";
 import BodySection from "../Components/Article/Section/BodySection";
+import RelatedTopicsList from "../Components/Article/Topics/RelatedTopicsList";
 import Header from "../Components/Header";
-import TopicList from "../Components/Article/Topics/TopicList";
 import TableOfContents from "../Components/Article/Section/TableOfContents";
 import ImageBanner from "../Components/Article/ImageBanner";
-import TableOfContents from "../Components/Article/Section/TableOfContents"
+
+//dummy data for related topics list
+const relatedTopicsList = [
+  {
+    topicCategory: "FOUNDATIONAL CONCEPTS",
+    topicList: [
+      {
+        topic:
+          "Artificial Intelligence (AI) and its Intersection with Machine Learning",
+        link: "/",
+      },
+      {
+        topic: "Data Preprocessing and Feature Engineering in Machine Learning",
+        link: "/",
+      },
+    ],
+  },
+  {
+    topicCategory: "TYPES OF MACHINE LEARNING",
+    topicList: [
+      {
+        topic:
+          "Supervised, Unsupervised, and Reinforcement Learning Techniques",
+        link: "/",
+      },
+      {
+        topic: "Deep Learning and Neural Networks",
+        link: "/",
+      },
+      {
+        topic: "Natural Language Processing (NLP) and Machine Learning",
+        link: "/",
+      },
+    ],
+  },
+  {
+    topicCategory: "APPLICATIONS",
+    topicList: [
+      {
+        topic: "Machine Learning in Business and Marketing",
+        link: "/",
+      },
+      {
+        topic: "Machine Learning in Healthcare and Biotechnology",
+        link: "/",
+      },
+      {
+        topic: "The Role of Machine Learning in Automation and Robotics",
+        link: "/",
+      },
+    ],
+  },
+];
+
 //ONLY for displaying article components until we can construct the full page
 export default function ArticleExample() {
   return (
@@ -53,21 +106,7 @@ export default function ArticleExample() {
             </div>
 
             <div style={{ width: "30%" }}>
-              <TopicList
-                topicCategory={"Foundational Concepts"}
-                topicList={[
-                  {
-                    topic:
-                      "Artificial Intelligence (AI) and its Intersection with Machine Learning",
-                    link: "/",
-                  },
-                  {
-                    topic:
-                      "Data Preprocessing and Feature Engineering in Machine Learning",
-                    link: "/",
-                  },
-                ]}
-              />
+              <RelatedTopicsList topicLists={relatedTopicsList} />
             </div>
           </div>
         </div>

frontend/src/css/custom.css.map

@@ -69,10 +69,45 @@
   }
 }
 
+//SectionContent
+.section-content-marker-container {
+  display: flex;
+  width: 0.7rem;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.section-content-marker {
+  display: inline-block;
+  width: 2px;
+  background-color: $primary;
+}
+
+.section-content-text {
+  width: calc(100% - 0.7rem);
+  font-size: calc(1rem + 0.1vw);
+
+  @media screen and (max-width: 800px) {
+    font-size: calc(0.65rem + 0.3vw);
+  }
+
+  @media screen and (max-width: 500px) {
+    font-size: calc(0.7rem + 0.3vw);
+  }
+}
+
+//Related Topics List
+.related-topics-heading {
+  font-size: calc(0.975rem + 0.1vw);
+  line-height: 2rem;
+  font-weight: 600;
+}
+
 //Topics List
 .topic-list-title,
 .topic-link {
   font-size: calc(0.65rem + 0.1vw);
+  font-weight: 600;
 }
 
 .topic-link {