Skip to content

Commit

Permalink
Adds layout for events page. Will now go through and try to condense …
Browse files Browse the repository at this point in the history 
…or seperate styles to create smaller components, as well as updating styles to match new design.
  • Loading branch information
Stephen Swanson authored and Stephen Swanson committed Aug 30, 2024
1 parent 2c722f3 commit b584bf4
Show file tree
Hide file tree
Showing 5 changed files with 275 additions and 0 deletions.
1 change: 1 addition & 0 deletions hooks/translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"sv": "Satakunta Nation"
},
"nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
"nav:events": { "fi": "Tapahtumat", "en": "Events", "sv": "Evenemang" },
"nav:forMembers": {
"fi": "Jäsenille",
"en": "For Members",
Expand Down
174 changes: 174 additions & 0 deletions pages/events.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
/* eslint-disable jsx-a11y/anchor-is-valid -- Disabled because of a lot of placeholder hrefs */
import Navbar, { NavbarProps } from "@/components/Navbar";
import createClient from "@/lib/cmsClient";
import styles from "@/styles/events.module.css";
import { readItems } from "@directus/sdk";
import {
Button,
Card,
CardContent,
CardMedia,
Typography,
} from "@mui/material";
import { GetStaticProps } from "next";
import Head from "next/head";

export const getStaticProps: GetStaticProps<EventsPageProps> = async () => {
const client = createClient();
const links = await client.request(readItems("NavigationLink"));
return {
props: {
navBar: {
links,
},
},
};
};

type EventsPageProps = {
navBar: NavbarProps;
};

export default function Events({ navBar }: EventsPageProps) {
return (
<>
<Head>
<title>Satakuntalainen Osakunta</title>
<link
rel="icon"
href="/new-sato-website/public/favicon.ico"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<Navbar links={navBar.links} />
<header className={styles.header}>
<div className={styles.headerContainer}>
<h1>Tapahtumat</h1>
<p className={styles.headerText}>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
doloribus impedit sapiente ipsum rerum neque consequatur tempore,
sit repellat unde, enim veniam accusantium minima molestias?
Obcaecati quis doloribus quae nesciunt?
</p>
</div>
</header>
<main className={styles.main}>
<section className={styles.eventsSection}>
<div className={styles.eventsContainer}>
<Card className={styles.hCard}>
<CardContent className={styles.cardContent}>
<span className={styles.cardContentText}>
<Typography className={styles.cardTitle}>
Rapujuhlat
</Typography>
<Typography className={styles.cardDescription}>
<p>
<b>Aika:</b> Lauantaina 11.1.2024
</p>
<p>
<b>Paika:</b> Osakuntahuoneisto viisi
</p>
</Typography>
</span>
<Button variant="contained" className={styles.buttonPink}>
Lisätiedot
</Button>
</CardContent>
<CardMedia
component="img"
image="/Placeholder_5.png"
alt="A placeholder image"
className={styles.cardMedia}
/>
</Card>
<Card className={styles.hCard}>
<CardContent className={styles.cardContent}>
<span className={styles.cardContentText}>
<Typography className={styles.cardTitle}>
Rapujuhlat
</Typography>
<Typography className={styles.cardDescription}>
<p>
<b>Aika:</b> Lauantaina 11.1.2024
</p>
<p>
<b>Paika:</b> Osakuntahuoneisto viisi
</p>
</Typography>
</span>
<Button variant="contained" className={styles.buttonPink}>
Lisätiedot
</Button>
</CardContent>
<CardMedia
component="img"
image="/Placeholder_1.png"
alt="A placeholder image"
className={styles.cardMedia}
/>
</Card>
</div>
</section>
<section className={styles.meetingsSection}>
<div className={styles.eventsContainer}>
<h2>Kerhojen Kokoontumiset</h2>
<Card className={styles.hCard}>
<CardContent className={styles.cardContent}>
<span className={styles.cardContentText}>
<Typography className={styles.cardTitle}>
Rapujuhlat
</Typography>
<Typography className={styles.cardDescription}>
<p>
<b>Aika:</b> Lauantaina 11.1.2024
</p>
<p>
<b>Paika:</b> Osakuntahuoneisto viisi
</p>
</Typography>
</span>
<Button variant="contained" className={styles.buttonPink}>
Lisätiedot
</Button>
</CardContent>
<CardMedia
component="img"
image="/Placeholder_5.png"
alt="A placeholder image"
className={styles.cardMedia}
/>
</Card>
<Card className={styles.hCard}>
<CardContent className={styles.cardContent}>
<span className={styles.cardContentText}>
<Typography className={styles.cardTitle}>
Rapujuhlat
</Typography>
<Typography className={styles.cardDescription}>
<p>
<b>Aika:</b> Lauantaina 11.1.2024
</p>
<p>
<b>Paika:</b> Osakuntahuoneisto viisi
</p>
</Typography>
</span>
<Button variant="contained" className={styles.buttonPink}>
Lisätiedot
</Button>
</CardContent>
<CardMedia
component="img"
image="/Placeholder_1.png"
alt="A placeholder image"
className={styles.cardMedia}
/>
</Card>
</div>
</section>
</main>
<footer className={styles.footer}>blah</footer>
</>
);
}
Binary file added public/Placeholder_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/Placeholder_5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions styles/events.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
.main {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

.h3 {
font-size: 2rem;
font-weight: 600;
margin: 0.5rem 0;
}

.header {
display: flex;
justify-content: center;
align-items: center;
padding: 5rem 0;
width: 100%;
background-color: var(--blue100);
}

.headerContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 70%;
}

.headerText {
width: 70%;
}

.eventsSection {
background-color: var(--blue100);
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 2.5rem;
}

.eventsContainer {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2rem;
}

.hCard {
display: flex;
border-radius: 1rem;
background-color: var(--blue300);
}

.cardContent {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 50%;
color: var(--white);
}

.cardTitle {
font-size: 2rem;
font-weight: 500;
}

.buttonPink {
border-radius: 5rem;
padding: 0.5rem 1.5rem;
background-color: var(--pink);
color: var(--blue300);
}

.cardMedia {
border-radius: 1rem;
width: 50%;
}

.meetingsSection {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 2.5rem;
margin-bottom: 5rem;
}

.footer {
width: 100%;
height: 20rem;
background-color: var(--blue300);
}

0 comments on commit b584bf4

Please sign in to comment.