Add page layout updates

CarletonComputerScienceSociety · Aug 3, 2024 · 9aeecb4 · 9aeecb4
1 parent 042a528
commit 9aeecb4
Show file tree

Hide file tree

Showing 16 changed files with 301 additions and 285 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -13,5 +13,6 @@ export default defineConfig({
   },
   redirects: {
     "/evaluations": "/evaluations/1",
+    "/" : "/comp2804",
   },
 });
diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
@@ -10,32 +10,21 @@ const upperLimit = pagination.totalPages - adjacentLinks;
 
 {
   pagination.totalPages > 1 && (
-    <ul class="pagination">
+    <ul class="Pagination">
       {/* First page */}
-      {pagination.pageNumber !== 1 && (
-        <li class="pagination__item pagination__item--first">
-          <a class="pagination__link pagination__link--first" href={1}>
-            ««
-          </a>
-        </li>
-      )}
-
-      {/* Previous page */}
-      {pagination.hasPrev && (
-        <li class="pagination__item pagination__item--previous">
-          <a
-            href={pagination.prev.url}
-            class="pagination__link pagination__link--previous"
-          >
-            «
-          </a>
-        </li>
-      )}
+      <li class="Pagination__item pagination__item--first">
+        <a
+          class="Pagination__link pagination__link--first"
+          href={pagination.first.url}
+        >
+          <span style="font-size: 1.2rem" class="mdi mdi-page-first" />
+        </a>
+      </li>
 
       {/* Page numbers */}
-      {pagination.pagers.map((page) => {
+      {pagination.pagers.map((page: any) => {
         return (
-          <Fragment>
+          <div>
             {(() => {
               const isInRange =
                 pagination.totalPages > maxLinks
@@ -52,42 +41,28 @@ const upperLimit = pagination.totalPages - adjacentLinks;
               return (
                 isInRange && (
                   <li
-                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
+                    class={`Pagination__item ${page.pageNumber === pagination.pageNumber ? "Pagination__item--current" : ""}`}
                   >
-                    <a href={page.url} class="pagination__link">
+                    <a href={page.url} class="Pagination__link">
                       {page.pageNumber}
                     </a>
                   </li>
                 )
               );
             })()}
-          </Fragment>
+          </div>
         );
       })}
 
-      {/* Next page */}
-      {pagination.hasNext && (
-        <li class="pagination__item pagination__item--next">
-          <a
-            href={pagination.next.url}
-            class="pagination__link pagination__link--next"
-          >
-            »
-          </a>
-        </li>
-      )}
-
       {/* Last page */}
-      {pagination.pageNumber !== pagination.totalPages && (
-        <li class="pagination__item pagination__item--last">
-          <a
-            class="pagination__link pagination__link--last"
-            href={pagination.last.url}
-          >
-            »»
-          </a>
-        </li>
-      )}
+      <li class="Pagination__item pagination__item--last">
+        <a
+          class="Pagination__link pagination__link--last"
+          href={pagination.last.url}
+        >
+          <span style="font-size: 1.2rem" class="mdi mdi-page-last" />
+        </a>
+      </li>
     </ul>
   )
 }
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
@@ -1,9 +1,10 @@
-.pagination {
+.Pagination {
   text-align: center;
   font-weight: bold;
   display: flex;
   justify-content: space-between;
-  max-width: 10rem;
+  align-items: center;
+  max-width: 8rem;
   margin: auto;
   padding: 0;
 
@@ -14,9 +15,12 @@
 
   a {
     text-decoration: auto;
+    color: black;
   }
 
-  .pagination__item--current {
-    color: black;
+  &__item--current {
+    a {
+      color: red;
+    }
   }
 }
diff --git a/src/components/RowCard/RowCard.astro b/src/components/RowCard/RowCard.astro
@@ -1,15 +1,15 @@
 ---
-const { href, title, icon, div } = Astro.props;
+const { href, title, icon, description } = Astro.props;
 import "./RowCard.scss";
 ---
 
 <div class="RowCard">
   <div class="RowCard__section">
     <div class="RowCard__icon"><i class={icon}></i></div>
-    <div class="RowCard__title"><h4>{title}</h4></div>
+    <div class="RowCard__text">
+      <div class="RowCard__title">{title}</div>
+
+      {description && <div class="RowCard__description">{description}</div>}
+    </div>
   </div>
-  <!-- <div class="RowCard__section">
-    <div class="RowCard__icon"><i class={"mdi mdi-book-open-variant"}></i></div>
-    <div class="RowCard__icon"><i class={icon}></i></div>
-  </div> -->
 </div>
diff --git a/src/components/RowCard/RowCard.scss b/src/components/RowCard/RowCard.scss
@@ -12,8 +12,25 @@
   transition: all 0.2s;
   margin-left: -0.8rem;
   margin-right: -0.8rem;
+  height: 4rem;
   cursor: grab;
 
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  &__title {
+    font-size: 1.1rem;
+    font-weight: bold;
+  }
+
+  &__description {
+    font-size: 0.8rem;
+    color: #717171d5;
+  }
+
   &:hover {
     background-color: rgba(248, 248, 248, 0.753);
     .RowCard__icon {

diff --git a/src/components/Sidebar/Sidebar.astro b/src/components/Sidebar/Sidebar.astro
@@ -1,28 +1,35 @@
 ---
+import SidebarItem from "./SidebarItem.astro";
 import "./Sidebar.scss";
 
 // mdi mdi-file-document-multiple-outline
 // mdi mdi-bookmark-box-multiple-outline
+
 const sections = [
-  { icon: "mdi mdi-home", title: "Home", disabled: false, link: "/" },
   {
     icon: "mdi mdi-book-open-variant",
     title: "Evaluations",
     disabled: false,
     link: "/evaluations",
   },
-  {
-    icon: "mdi mdi-school",
-    title: "Courses",
-    disabled: false,
-    link: "/courses",
-  },
   {
     icon: "mdi mdi-tag",
     title: "Tags",
     disabled: false,
     link: "/practice-by-tag",
   },
+  // {
+  //   icon: "mdi mdi-book",
+  //   title: "Textbook",
+  //   disabled: false,
+  //   link: "https://patmorin.me/teaching/2804/resources/DiscreteStructures.pdf",
+  // },
+  {
+    icon: "mdi mdi-video",
+    title: "Lectures",
+    disabled: false,
+    link: "https://www.youtube.com/playlist?list=PLY7TEz3ZRQHTnY56q2uJtdXg-bl-c0sDk",
+  },
   { icon: "mdi mdi-creation", title: "Sandbox", disabled: true },
   // { icon: "mdi mdi-beaker", title: "Experiments", disabled: true },
 ];
@@ -47,34 +54,34 @@ const endSections = [
   <div class="Sidebar__sections">
     <div>
       <img class="Sidebar__logo" src="/logo2.png" alt="CCSS Logo" />
+      <hr style="border-color: #f1f1f12e; margin-bottom: 0.2rem" />
+      <SidebarItem
+        icon={"mdi mdi-school"}
+        title={"COMP 2804"}
+        link={"/comp2804"}
+        disabled={false}
+      />
+      <hr style="border-color: #f1f1f12e; margin-top: 0.2rem" />
       {
         sections.map((section) => (
-          <a href={section.link}>
-            <div
-              class={`Sidebar__item ${section.disabled ? "Sidebar__item--disabled" : "Sidebar__item--enabled"}`}
-            >
-              <div class="Sidebar__item__icon">
-                <i class={section.icon} />
-              </div>
-              <div class="Sidebar__item__title">{section.title}</div>
-            </div>
-          </a>
+          <SidebarItem
+            icon={section.icon}
+            title={section.title}
+            link={section.link}
+            disabled={section.disabled}
+          />
         ))
       }
     </div>
     <div>
       {
         endSections.map((endSection) => (
-          <a href={endSection.link}>
-            <div
-              class={`Sidebar__item ${endSection.disabled ? "Sidebar__item--disabled" : "Sidebar__item--enabled"}`}
-            >
-              <div class="Sidebar__item__icon">
-                <i class={endSection.icon} />
-              </div>
-              <div class="Sidebar__item__title">{endSection.title}</div>
-            </div>
-          </a>
+          <SidebarItem
+            icon={endSection.icon}
+            title={endSection.title}
+            link={endSection.link}
+            disabled={endSection.disabled}
+          />
         ))
       }
     </div>

diff --git a/src/components/Sidebar/SidebarItem.astro b/src/components/Sidebar/SidebarItem.astro
@@ -0,0 +1,14 @@
+---
+const { link, disabled, icon, title } = Astro.props;
+---
+
+<a href={link}>
+  <div
+    class={`Sidebar__item ${disabled ? "Sidebar__item--disabled" : "Sidebar__item--enabled"}`}
+  >
+    <div class="Sidebar__item__icon">
+      <i class={icon}></i>
+    </div>
+    <div class="Sidebar__item__title">{title}</div>
+  </div>
+</a>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -13,6 +13,18 @@ const questionCollection = defineCollection({
   // }),
 });
 
+const courseCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    id: z.string(),
+    code: z.string(),
+    title: z.string(),
+    description: z.string(),
+    textbook: z.string(),
+    textbookUrl: z.string(),
+  }),
+});
+
 const evaluationCollection = defineCollection({
   type: "content",
   schema: z.object({
@@ -35,6 +47,7 @@ const tagCollection = defineCollection({
 });
 
 export const collections = {
+  courses: courseCollection,
   questions: questionCollection,
   evaluations: evaluationCollection,
   tags: tagCollection,

diff --git a/src/content/courses/comp2804.md b/src/content/courses/comp2804.md
@@ -0,0 +1,8 @@
+---
+id: comp2804
+code: COMP 2804
+title: Discrete Structures II
+description: "Topics include: counting, sequences and sums, discrete probability, basic statistics, recurrence relations, randomized algorithms. Material is illustrated through examples from computing."
+textbook: "Discrete Structures for Computer Science: Counting, Recursion, and Probability"
+textbookUrl: https://patmorin.me/teaching/2804/resources/DiscreteStructures.pdf
+---
diff --git a/src/layouts/Content/Content.scss b/src/layouts/Content/Content.scss
@@ -29,7 +29,7 @@
 .Question__tags {
   display: flex;
   gap: 0.5rem;
-  margin-top: 3rem;
+  margin-top: 2rem;
   flex-wrap: wrap;
 }