Skip to content

Commit

Permalink
Adds rough blocking for news.tsx. It is not fully functional at the m…
Browse files Browse the repository at this point in the history 
…oment, it exists purely as a structure to be improved late. Need to figure out how to make it responsive.
  • Loading branch information
Stephen Swanson authored and Stephen Swanson committed Aug 26, 2024
1 parent c01df68 commit 455bb23
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 2 deletions.
130 changes: 128 additions & 2 deletions pages/news.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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
Expand All @@ -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} />
</>
);
}
49 changes: 49 additions & 0 deletions styles/news.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
padding: 5rem 0;
width: 100%;
background-color: var(--blue100);
margin-bottom: 5rem;
}

.headerContainer {
Expand All @@ -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;
}

0 comments on commit 455bb23

Please sign in to comment.