From 455bb230cb7fad3348893189cbbbdf3e5963383a Mon Sep 17 00:00:00 2001
From: Stephen Swanson <stephenswanson@Stephens-MacBook-Pro.local>
Date: Mon, 26 Aug 2024 15:36:30 +0300
Subject: [PATCH] Adds rough blocking for news.tsx. It is not fully functional
 at the moment, it exists purely as a structure to be improved late. Need to
 figure out how to make it responsive.

---
 pages/news.tsx         | 130 ++++++++++++++++++++++++++++++++++++++++-
 styles/news.module.css |  49 ++++++++++++++++
 2 files changed, 177 insertions(+), 2 deletions(-)

diff --git a/pages/news.tsx b/pages/news.tsx
index 2181974..405a079 100644
--- a/pages/news.tsx
+++ b/pages/news.tsx
@@ -2,6 +2,13 @@ import Navbar, { NavbarProps } from "@/components/Navbar";
 import createClient from "@/lib/cmsClient";
 import styles from "@/styles/news.module.css";
 import { readItems } from "@directus/sdk";
+import {
+  List,
+  ListItemButton,
+  Pagination,
+  Paper,
+  Tooltip,
+} from "@mui/material";
 import { GetStaticProps } from "next";
 import Head from "next/head";
 
@@ -36,7 +43,7 @@ export default function News({ navBar }: NewsPageProps) {
       <Navbar links={navBar.links} />
       <header className={styles.header}>
         <div className={styles.headerContainer}>
-          <h1 className={styles.h1}>Tietoa Osakunnosta</h1>
+          <h1 className={styles.h1}>Uutiset</h1>
           <p className={styles.headerText}>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit
             distinctio, ullam doloremque provident voluptas illo quaerat ex
@@ -45,7 +52,126 @@ export default function News({ navBar }: NewsPageProps) {
           </p>
         </div>
       </header>
-      <main className={styles.main} />
+      <main className={styles.main}>
+        <Paper elevation={3} className={styles.newsContainer}>
+          <div className={styles.listContainer}>
+            <List className={styles.articleList}>
+              <Tooltip
+                title="Osakunnan viikko 34&35 / Nations week 34&45"
+                arrow
+              >
+                <ListItemButton className={styles.articleListItem}>
+                  Osakunnan viikko 34&35 / Nations week 34&45
+                </ListItemButton>
+              </Tooltip>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 15 / week 15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 14 / week 14
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 13 / week 13
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan maaliskuun juhlakokoukseen
+                20.3.2024 klo 19:15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan maaliskuun juhlakokoukseen
+                20.3.2024 klo 19:15
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 12 / week 12
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 11 / week 11
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 10 / week 10
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                SatOn viikko 9 / week 9
+              </ListItemButton>
+              <ListItemButton className={styles.articleListItem}>
+                Kutsu Satakuntalaisen Osakunnan helmikuun kokoukseen ke
+                21.2.2024 klo 19.15
+              </ListItemButton>
+            </List>
+            <Pagination count={3} />
+          </div>
+          <Paper elevation={0} className={styles.articleWindow}>
+            <h2>Title</h2>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi
+              dolore hic minus quaerat, fugit, veniam inventore recusandae esse
+              impedit ratione unde eius ipsa necessitatibus odit beatae, modi
+              aut blanditiis exercitationem?
+            </p>
+          </Paper>
+        </Paper>
+      </main>
+      <footer className={styles.footer} />
     </>
   );
 }
diff --git a/styles/news.module.css b/styles/news.module.css
index 9bba59e..f4e9d74 100644
--- a/styles/news.module.css
+++ b/styles/news.module.css
@@ -20,6 +20,7 @@
   padding: 5rem 0;
   width: 100%;
   background-color: var(--blue100);
+  margin-bottom: 5rem;
 }
 
 .headerContainer {
@@ -33,3 +34,51 @@
 .headerText {
   width: 70%;
 }
+
+.newsContainer {
+  background-color: var(--blue100);
+  width: 70%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 1.5rem;
+}
+
+.listContainer {
+  width: 26%;
+}
+
+.articleList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.articleListItem {
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.articleWindow {
+  width: 70%;
+  max-height: 60vh;
+  overflow-y: scroll;
+  padding: 1rem;
+  border-radius: 1rem;
+}
+
+.footer {
+  width: 100%;
+  height: 20rem;
+  background-color: var(--blue300);
+  margin-top: 5rem;
+}