Merge branch 'main' into feat/event-card
This commit is contained in:
commit
051fa14303
|
@ -2,7 +2,6 @@
|
||||||
"recommendations": [
|
"recommendations": [
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
"humao.rest-client",
|
"humao.rest-client",
|
||||||
"silvenon.mdx",
|
"silvenon.mdx"
|
||||||
"xyc.vscode-mdx-preview"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { ReactNode } from "react";
|
import React, { ReactNode } from "react";
|
||||||
// import { Button } from "./Button";
|
// import { Button } from "./Button";
|
||||||
|
import { Image } from "./Image";
|
||||||
import { EventSetting } from "./EventSetting";
|
import { EventSetting } from "./EventSetting";
|
||||||
import styles from "./EventDescriptionCard.module.css";
|
import styles from "./EventDescriptionCard.module.css";
|
||||||
|
|
||||||
|
@ -37,7 +38,7 @@ const links = {
|
||||||
export function EventDescriptionCard(props: Props) {
|
export function EventDescriptionCard(props: Props) {
|
||||||
return (
|
return (
|
||||||
<article className={styles.card}>
|
<article className={styles.card}>
|
||||||
<img className={styles.poster} src={props.poster} alt={props.name} />
|
<Image className={styles.poster} src={props.poster} alt={props.name} />
|
||||||
|
|
||||||
<div className={styles.details}>
|
<div className={styles.details}>
|
||||||
<h3 className={styles.name}>{props.name}</h3>
|
<h3 className={styles.name}>{props.name}</h3>
|
||||||
|
@ -61,7 +62,7 @@ export function EventDescriptionCard(props: Props) {
|
||||||
)}
|
)}
|
||||||
{props.online && (
|
{props.online && (
|
||||||
<a target="_blank" href={links[props.location]} rel="noreferrer">
|
<a target="_blank" href={links[props.location]} rel="noreferrer">
|
||||||
<img
|
<Image
|
||||||
className={styles.logo}
|
className={styles.logo}
|
||||||
alt={props.location}
|
alt={props.location}
|
||||||
src={"logos/" + props.location + ".png"}
|
src={"logos/" + props.location + ".png"}
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React, { ImgHTMLAttributes } from "react";
|
||||||
|
|
||||||
|
export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
|
||||||
|
const { src: relativeSrc = "" } = props;
|
||||||
|
|
||||||
|
let absoluteSrc = process.env.BASE_PATH ?? "/";
|
||||||
|
if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
|
||||||
|
absoluteSrc += relativeSrc.slice(1);
|
||||||
|
} else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {
|
||||||
|
absoluteSrc += relativeSrc;
|
||||||
|
} else {
|
||||||
|
absoluteSrc += "/" + relativeSrc;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <img {...props} src={absoluteSrc} />;
|
||||||
|
}
|
|
@ -0,0 +1,151 @@
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: stretch;
|
||||||
|
max-width: 1440px;
|
||||||
|
height: auto;
|
||||||
|
padding: 1.75rem 8.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
width: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
width: 32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu li {
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu a {
|
||||||
|
color: var(--purple-2);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu a.currentPage {
|
||||||
|
color: var(--blue-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu > li:hover > a {
|
||||||
|
color: var(--blue-2);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevents the menu items from shifting when made bold on hover */
|
||||||
|
.navMenu > li > a::before {
|
||||||
|
display: block;
|
||||||
|
content: attr(title);
|
||||||
|
font-weight: 600;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu > li > a {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
visibility: visible;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--white);
|
||||||
|
box-shadow: 0 0.5rem 1rem var(--blue-1-20);
|
||||||
|
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li > a {
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li:hover > a,
|
||||||
|
.dropdown > li > a:focus {
|
||||||
|
background-color: var(--blue-1-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li:first-child > a {
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-radius: 0.5rem 0.5rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li:last-child > a {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu > li .dropdown {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenu > li:hover .dropdown,
|
||||||
|
.navMenu > li:focus-within .dropdown {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On a smaller desktop screen, keep the same navbar layout but decrease the
|
||||||
|
* horizontal padding so it still fits
|
||||||
|
*/
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
.navContent {
|
||||||
|
padding: 1.75rem 4rem;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,120 @@
|
||||||
|
import React from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { Image } from "./Image";
|
||||||
|
import styles from "./Navbar.module.css";
|
||||||
|
|
||||||
|
interface NavLink {
|
||||||
|
name: string;
|
||||||
|
route: string;
|
||||||
|
submenu?: {
|
||||||
|
name: string;
|
||||||
|
route: string;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const menu: NavLink[] = [
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
route: "/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "About",
|
||||||
|
route: "/about",
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
name: "About Us",
|
||||||
|
route: "/about",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Meet the Team",
|
||||||
|
route: "/about/team",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Constitution",
|
||||||
|
route: "/about/constitution",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Code of Conduct",
|
||||||
|
route: "/about/code-of-conduct",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Get Involved",
|
||||||
|
route: "/get-involved",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Events",
|
||||||
|
route: "/events",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Resources",
|
||||||
|
route: "/resources",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function NavItem(props: NavLink) {
|
||||||
|
const router = useRouter();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link href={props.route}>
|
||||||
|
<a
|
||||||
|
title={props.name}
|
||||||
|
className={
|
||||||
|
router.pathname === props.route ||
|
||||||
|
((props.submenu?.length ?? 0) > 0 &&
|
||||||
|
router.pathname.startsWith(props.route))
|
||||||
|
? styles.currentPage
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
onClick={() => {
|
||||||
|
if (document.activeElement instanceof HTMLElement) {
|
||||||
|
document.activeElement.blur();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.name}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
{(props.submenu?.length ?? 0) > 0 ? (
|
||||||
|
<ul className={styles.dropdown}>
|
||||||
|
{props.submenu?.map((item) => {
|
||||||
|
return (
|
||||||
|
<li className={styles.dropdownWrapper} key={item.name}>
|
||||||
|
<NavItem name={item.name} route={item.route} />
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
return (
|
||||||
|
<nav className={styles.navbar}>
|
||||||
|
<div className={styles.navContent}>
|
||||||
|
<Link href="/">
|
||||||
|
<a className={styles.logo}>
|
||||||
|
<Image src="/images/logo-icon.png" alt="CSC Logo" />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<ul className={styles.navMenu}>
|
||||||
|
{menu.map((item) => {
|
||||||
|
return (
|
||||||
|
<li className={styles.dropdownWrapper} key={item.name}>
|
||||||
|
<NavItem
|
||||||
|
name={item.name}
|
||||||
|
route={item.route}
|
||||||
|
submenu={item.submenu}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
|
@ -91,7 +91,7 @@ export function EventDescriptionCardDemo() {
|
||||||
date={date}
|
date={date}
|
||||||
online={true}
|
online={true}
|
||||||
location="Twitch"
|
location="Twitch"
|
||||||
poster="images/playground/intro-ootb.jpg"
|
poster="/images/playground/intro-ootb.jpg"
|
||||||
registerLink="/"
|
registerLink="/"
|
||||||
>
|
>
|
||||||
<p>{short}</p>
|
<p>{short}</p>
|
||||||
|
@ -101,7 +101,7 @@ export function EventDescriptionCardDemo() {
|
||||||
date={date}
|
date={date}
|
||||||
online={true}
|
online={true}
|
||||||
location="Twitch"
|
location="Twitch"
|
||||||
poster="images/playground/alt-tab.jpg"
|
poster="/images/playground/alt-tab.jpg"
|
||||||
registerLink="/"
|
registerLink="/"
|
||||||
>
|
>
|
||||||
<p>{short}</p>
|
<p>{short}</p>
|
||||||
|
@ -111,7 +111,7 @@ export function EventDescriptionCardDemo() {
|
||||||
date={date}
|
date={date}
|
||||||
online={true}
|
online={true}
|
||||||
location="Twitch"
|
location="Twitch"
|
||||||
poster="images/playground/intro-ootb.jpg"
|
poster="/images/playground/intro-ootb.jpg"
|
||||||
registerLink="/"
|
registerLink="/"
|
||||||
>
|
>
|
||||||
<p>{short}</p>
|
<p>{short}</p>
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
const withMDX = require('@next/mdx')({
|
const withMDX = require("@next/mdx")({
|
||||||
extension: /\.mdx$/
|
extension: /\.mdx$/,
|
||||||
})
|
});
|
||||||
|
|
||||||
module.exports = withMDX({
|
module.exports = withMDX({
|
||||||
pageExtensions: ['ts', 'tsx', 'mdx']
|
pageExtensions: ["ts", "tsx", "mdx"],
|
||||||
})
|
trailingSlash: true,
|
||||||
|
basePath: process.env.BASE_PATH,
|
||||||
|
});
|
||||||
|
|
|
@ -8,11 +8,13 @@ code, pre {
|
||||||
|
|
||||||
/* Default is light theme */
|
/* Default is light theme */
|
||||||
body {
|
body {
|
||||||
|
--white: #ffffff;
|
||||||
--off-white: #fdf8f5;
|
--off-white: #fdf8f5;
|
||||||
--teal-1: #76ffdc;
|
--teal-1: #76ffdc;
|
||||||
--teal-2: #4ed4b2;
|
--teal-2: #4ed4b2;
|
||||||
--blue-1: #5caff9;
|
--blue-1: #5caff9;
|
||||||
--blue-2: #5caff9;
|
--blue-1-20: #5caff934;
|
||||||
|
--blue-2: #1482e3;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
|
@ -20,14 +22,17 @@ body {
|
||||||
#1481e3 -17.95%,
|
#1481e3 -17.95%,
|
||||||
#4ed4b2 172.82%
|
#4ed4b2 172.82%
|
||||||
);
|
);
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
--white: #ffffff;
|
||||||
--off-white: #fdf8f5;
|
--off-white: #fdf8f5;
|
||||||
--teal-1: #76ffdc;
|
--teal-1: #76ffdc;
|
||||||
--teal-2: #4ed4b2;
|
--teal-2: #4ed4b2;
|
||||||
--blue-1: #5caff9;
|
--blue-1: #5caff9;
|
||||||
--blue-2: #5caff9;
|
--blue-2: #1482e3;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from "react";
|
||||||
import { AppProps } from "next/app";
|
import { AppProps } from "next/app";
|
||||||
import { MDXProvider } from "@mdx-js/react";
|
import { MDXProvider } from "@mdx-js/react";
|
||||||
import { ThemeProvider } from "../components/theme";
|
import { ThemeProvider } from "../components/theme";
|
||||||
|
import { Navbar } from "../components/Navbar";
|
||||||
import "./_app.css";
|
import "./_app.css";
|
||||||
import "./font.css";
|
import "./font.css";
|
||||||
|
|
||||||
|
@ -9,6 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme="light">
|
<ThemeProvider theme="light">
|
||||||
<MDXProvider components={{}}>
|
<MDXProvider components={{}}>
|
||||||
|
<Navbar />
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</MDXProvider>
|
</MDXProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
# Code of Conduct page
|
|
@ -0,0 +1 @@
|
||||||
|
# Constitution page
|
|
@ -0,0 +1 @@
|
||||||
|
# About Us page
|
|
@ -0,0 +1 @@
|
||||||
|
# Meet the Team page
|
|
@ -0,0 +1 @@
|
||||||
|
# Events page
|
|
@ -0,0 +1 @@
|
||||||
|
# Get Involved page
|
|
@ -0,0 +1 @@
|
||||||
|
# Resources page
|
Binary file not shown.
After Width: | Height: | Size: 208 KiB |
Loading…
Reference in New Issue