Mobile event card
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
0008d9e914
commit
8ed72bf61b
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
padding: calc(24rem / 16);
|
||||
padding: calc(20rem / 16) 0;
|
||||
}
|
||||
|
||||
.card aside {
|
||||
|
@ -12,10 +12,10 @@
|
|||
|
||||
.card aside img {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
margin-top: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
@ -44,3 +44,69 @@
|
|||
font-size: 1rem;
|
||||
margin-bottom: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.mobileLearnMore {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card aside {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card aside img {
|
||||
box-sizing: border-box;
|
||||
border: calc(1rem / 16) solid var(--text);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content > h1,
|
||||
.content > h2 {
|
||||
font-size: 1rem;
|
||||
line-height: calc(30 / 16);
|
||||
}
|
||||
|
||||
.content > h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mobileShowDescriptionContent {
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
.mobileShowDescriptionContent > h1 {
|
||||
font-size: calc(24rem / 16);
|
||||
margin-bottom: calc(8rem / 16);
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobileLearnMore {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.mobileShowDescriptionContent .mobileLearnMore {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.children {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobileShowDescriptionContent .children {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,10 +3,11 @@ import React, { ReactNode } from "react";
|
|||
import { Button } from "./Button";
|
||||
import { EventSetting } from "./EventSetting";
|
||||
import { Image } from "./Image";
|
||||
import { Link } from "./Link";
|
||||
|
||||
import styles from "./EventCard.module.css";
|
||||
|
||||
interface EventCardProps {
|
||||
interface BaseProps {
|
||||
name: string;
|
||||
short: string;
|
||||
date: Date;
|
||||
|
@ -17,7 +18,12 @@ interface EventCardProps {
|
|||
children: ReactNode;
|
||||
}
|
||||
|
||||
type EventCardProps =
|
||||
| (BaseProps & { showDescription?: false; link: string })
|
||||
| (BaseProps & { showDescription: true; link?: string });
|
||||
|
||||
export function EventCard({
|
||||
link,
|
||||
name,
|
||||
date,
|
||||
online,
|
||||
|
@ -25,6 +31,7 @@ export function EventCard({
|
|||
poster,
|
||||
registerLink,
|
||||
children,
|
||||
showDescription = false,
|
||||
}: EventCardProps) {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
|
@ -43,12 +50,22 @@ export function EventCard({
|
|||
)}
|
||||
</aside>
|
||||
)}
|
||||
<section className={styles.content}>
|
||||
<section
|
||||
className={[
|
||||
styles.content,
|
||||
showDescription ? styles.mobileShowDescriptionContent : "",
|
||||
].join(" ")}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
<h2>
|
||||
<EventSetting date={date} online={online} location={location} />
|
||||
</h2>
|
||||
<div>{children}</div>
|
||||
{!showDescription && link && (
|
||||
<Link href={link}>
|
||||
<span className={styles.mobileLearnMore}>Learn more</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className={styles.children}>{children}</div>
|
||||
{!poster && registerLink && (
|
||||
<Button
|
||||
isLink={true}
|
||||
|
|
|
@ -146,13 +146,23 @@ export function EventDescriptionCardDemo() {
|
|||
export function EventCardDemo() {
|
||||
return (
|
||||
<>
|
||||
{events.map(({ Content, metadata }) => (
|
||||
{events.map(({ Content, metadata }, idx) => (
|
||||
<>
|
||||
<EventCard
|
||||
{...metadata}
|
||||
key={metadata.name + metadata.date.toDateString()}
|
||||
key={metadata.name + metadata.date.toDateString() + "1"}
|
||||
showDescription
|
||||
>
|
||||
<Content />
|
||||
</EventCard>
|
||||
<EventCard
|
||||
{...metadata}
|
||||
key={metadata.name + metadata.date.toDateString() + "2"}
|
||||
link="#"
|
||||
>
|
||||
<Content />
|
||||
</EventCard>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -27,7 +27,9 @@ export async function getEventTermsByYear(year: string): Promise<string[]> {
|
|||
}
|
||||
|
||||
interface Metadata {
|
||||
slug: string;
|
||||
name: string;
|
||||
poster?: string;
|
||||
short: string;
|
||||
date: string;
|
||||
online: boolean;
|
||||
|
@ -52,7 +54,7 @@ export async function getEventBySlug(
|
|||
|
||||
return {
|
||||
content: await serialize(content),
|
||||
metadata: metadata as Metadata,
|
||||
metadata: { ...metadata, slug } as Metadata,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -122,12 +124,14 @@ export async function getEventsPageProps({
|
|||
new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
|
||||
);
|
||||
|
||||
const currentDate = Date.now();
|
||||
|
||||
const pastEvents = events
|
||||
.filter((event) => new Date(event.metadata.date).getTime() < Date.now())
|
||||
.filter((event) => new Date(event.metadata.date).getTime() < currentDate)
|
||||
.reverse();
|
||||
|
||||
const futureEvents = events.filter(
|
||||
(event) => new Date(event.metadata.date).getTime() >= Date.now()
|
||||
(event) => new Date(event.metadata.date).getTime() >= currentDate
|
||||
);
|
||||
|
||||
const current = getCurrentTerm();
|
||||
|
|
|
@ -18,6 +18,7 @@ export default function EventInfoPage(props: Props) {
|
|||
<EventCard
|
||||
{...props.event.metadata}
|
||||
date={new Date(props.event.metadata.date)}
|
||||
showDescription
|
||||
>
|
||||
<MDXRemote {...props.event.content} />
|
||||
</EventCard>
|
||||
|
|
|
@ -8,12 +8,6 @@
|
|||
border-bottom: 1px solid var(--primary-heading);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.main {
|
||||
margin-top: calc(60rem / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.header a {
|
||||
color: var(--text);
|
||||
font-size: calc(18rem / 16);
|
||||
|
@ -31,3 +25,7 @@
|
|||
.miniEventCards {
|
||||
margin-top: calc(30rem / 16);
|
||||
}
|
||||
|
||||
.main > .miniEventCards {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
@ -72,6 +72,7 @@ export default function Term(props: Props) {
|
|||
{...metadata}
|
||||
date={new Date(metadata.date)}
|
||||
key={metadata.name + metadata.date.toString()}
|
||||
link={`/events/${props.year}/${props.term}/${metadata.slug}`}
|
||||
>
|
||||
<MDXRemote {...content} />
|
||||
</EventCard>
|
||||
|
|
Loading…
Reference in New Issue