Add content card (#227)

* Add test styling

* Add content card

app/src/apps/Examinations/components/MultipleChoiceQuestion/styles.scss

@@ -1,3 +1,11 @@
 .multiple-choice-question {
-  margin-bottom: 2rem;
+  padding: 1rem;
+  font-family: Arial;
+}
+
+.test-header {
+  font-family: Arial;
+  font-size: 2rem;
+  text-align: center;
+  margin: 1rem;
 }

app/src/components/ContentCard/ContentCard.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let title;
+  export let info;
+  export let tag;
+  import "./styles.scss";
+</script>
+
+<div class="content-card">
+  <div class="content-card-tag">
+    {tag}
+  </div>
+  <div class="content-card-title">{title}</div>
+  <!-- <div class="content-card-info">
+      <span class="content-card-info-spacing" />{info}
+    </div> -->
+</div>

app/src/components/ContentCard/index.js

@@ -0,0 +1 @@
+export { default as ContentCard } from "./ContentCard.svelte";

app/src/components/ContentCard/styles.scss

@@ -0,0 +1,66 @@
+.content-card {
+  padding: 1rem;
+  width: 15rem;
+  height: 125px;
+  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
+  transition: all 0.15s;
+  overflow: hidden;
+  font-family: "Assistant", sans-serif;
+}
+
+.content-card:hover {
+  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
+  opacity: 1;
+}
+
+.content-card-tag {
+  transition: all 0.15s;
+  background: #ffab0443;
+  margin-bottom: 1rem;
+  background: #ffab04;
+  color: white;
+  font-weight: bold;
+  font-size: 0.7rem;
+  border-radius: 0.2rem;
+  padding: 0.25rem 0.7rem;
+  width: fit-content;
+  opacity: 0.8;
+}
+
+.content-card-title {
+  font-weight: bold;
+  font-size: 1rem;
+  margin-bottom: 10px;
+  min-height: 60px;
+  width: 100%;
+  opacity: 0.55;
+  transition: all 0.15s;
+}
+
+.content-card-info {
+  margin-bottom: 5px;
+  color: #6c717a;
+  font-size: 0.9rem;
+  opacity: 0.55;
+  transition: all 0.15s;
+}
+
+.content-card-info-spacing {
+  margin-left: 0.25rem;
+}
+
+.content-card:hover {
+  .content-card-info {
+    opacity: 1;
+  }
+
+  .content-card-title {
+    opacity: 1;
+  }
+
+  .content-card-tag {
+    background: #ffab04;
+    color: white;
+    opacity: 1;
+  }
+}

app/src/components/index.js

@@ -1,3 +1,4 @@
 export { Button } from "./Button";
+export { ContentCard } from "./ContentCard";
 export { CourseNavbar } from "./CourseNavbar";
 export { LoadingAnimation } from "./LoadingAnimation";

app/src/pages/[course].astro

@@ -2,6 +2,7 @@
 import CourseLayout from "../layouts/CourseLayout.astro";
 import { Repository } from "../data";
 import Graph from "../apps/Graphs/Graph.svelte";
+import { ContentCard } from "../components";
 
 export function getStaticPaths() {
   return [
@@ -20,25 +21,46 @@ const data = new Repository().fetchCourse(course);
     <p>{data.description}</p>
     <h3>Tests:</h3>
     <!-- TODO: remove base link -->
-    <div>
+    <div class="content-container">
       {data.tests.map((test) => (
-        <div>
-          <a href={`/discretemath.ca/${data.id}/tests/${test.id}`}>
-            {test.title}
-          </a>
-        </div>
+        <a href={`/discretemath.ca/${data.id}/tests/${test.id}`}>
+          <ContentCard title={test.title} tag={"Test"} />
+        </a>
       ))}
     </div>
     <h3>Labs:</h3>
-    <div>
+    <div class="content-container">
       {data.labs.map((lab) => (
-        <div>
-          <a href={`/discretemath.ca/${data.id}/labs/${lab.id}`}>{lab.title}</a>
-        </div>
+        <a href={`/discretemath.ca/${data.id}/labs/${lab.id}`}>
+          <ContentCard title={lab.title} tag={"Lab"} />
+        </a>
       ))}
     </div>
     <br />
     <h3>Temporary Graph Demo:</h3>
     <Graph client:load />
   </div>
 </CourseLayout>
+
+<style lang="scss">
+  .content-container {
+    display: flex;
+    flex-direction: row;
+    gap: 3rem;
+  }
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  h1 {
+    font-family: Arial;
+  }
+
+  h3 {
+    font-family: Arial;
+  }
+
+  p {
+    font-family: Arial;
+  }
+</style>