new date list, event page progress

This commit is contained in:
elisejakob
2024-05-23 15:35:05 +02:00
parent 1c69eda47f
commit 443abe7b9e
8 changed files with 170 additions and 32 deletions

View File

@ -1,6 +1,7 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { DateList } from "@/components/events/DateList";
import { DateListOld } from "@/components/events/DateListOld";
import { EventHeader } from "@/components/events/EventHeader";
import { BgPig } from "@/components/general/BgPig";
import { graphql } from "@/gql";
@ -54,6 +55,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
<EventHeader event={event} />
<section className="pageContent">
<DateList />
<DateListOld />
<Blocks blocks={event.body} />
</section>
</main>

View File

@ -3,7 +3,12 @@ import styles from "./dateList.module.scss";
export const DateList = () => {
return (
<div className={styles.dateWrapper}>
<h2 className="suphead">Kommende datoer</h2>
<h2 className="circlehead">
<span className="circle"></span>
<span className="circle"></span>
<span className="circle"></span>Kommende datoer{" "}
<span className="number">(4)</span>
</h2>
<ul className={styles.dateList}>
<li className={styles.date}>
<div className={styles.time}>

View File

@ -0,0 +1,47 @@
import styles from "./dateListOld.module.scss";
export const DateListOld = () => {
return (
<div className={styles.dateWrapper}>
<h2 className="suphead">Kommende datoer (4)</h2>
<ul className={styles.dateList}>
<li className={styles.date}>
<div className={styles.time}>
<span>27/05/2024</span>&nbsp;
<span>18.00</span>
</div>
<div className={styles.venue}>
<span>Storsalen</span>
</div>
</li>
<li className={styles.date}>
<div className={styles.time}>
<span>Mandag 27. mai 2024</span>&nbsp;
<span>kl. 18.00</span>
<div className={styles.venue}>
<span>i Storsalen</span>
</div>
</div>
</li>
<li className={styles.date}>
<div className={styles.time}>
<span>27. mai 2024</span>&nbsp;
<span>kl. 18.00</span>
</div>
<div className={styles.venue}>
<span>Storsalen</span>
</div>
</li>
<li className={styles.date}>
<div className={styles.venue}>
<span>Storsalen</span>
</div>
<div className={styles.time}>
<span>27.05.2024</span>&nbsp;
<span>18.00</span>
</div>
</li>
</ul>
</div>
);
};

View File

@ -15,18 +15,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
</span>
<h1 className={styles.title}>{event.title}</h1>
<div className={styles.details}>
{event.facebookUrl && (
<a href={event.facebookUrl} className="button">
til Facebook-event
</a>
)}
{event.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
Kjøp billetter
</a>
)}
<p>Vise neste dato her?</p>
<div className={styles.prices}>
<h2>Pris</h2>
{/*<h2>Pris</h2>*/}
<ul className={styles.priceList}>
{!event.priceRegular &&
!event.priceStudent &&
@ -55,6 +46,16 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
)}
</ul>
</div>
{event.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
Kjøp billetter
</a>
)}
{event.facebookUrl && (
<a href={event.facebookUrl} className="textLink">
til Facebook-event
</a>
)}
{event.categories.length > 0 && (
<div>
Kategorier: {event.categories.map((x) => x.name).join(", ")}

View File

@ -1,30 +1,18 @@
.dateList {
list-style: none;
margin: 1rem 0 var(--spacing-sitepadding);
margin: 0 calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*2);
padding: 0 var(--spacing-sitepadding);
display: flex;
gap: var(--spacing-gap-column);
gap: 1rem;
}
.date {
font-family: var(--font-serif);
font-size: var(--font-size-lead);
margin-bottom: 1rem;
padding-left: 4rem;
font-size: var(--font-size-body);
position: relative;
min-height: 3.2rem;
line-height: 1.2;
&:before {
content: "";
display: block;
width: 3.2rem;
height: 3.2rem;
border-radius: 100%;
background: var(--color-goldenBeige);
position: absolute;
left: 0;
top: 0;
}
border-right: var(--border);
padding-right: 1rem;
}
.time {

View File

@ -0,0 +1,38 @@
.dateList {
list-style: none;
background: var(--color-background-secondary);
margin: 1rem calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding);
display: flex;
gap: var(--spacing-gap-column);
}
.date {
font-family: var(--font-serif);
font-size: var(--font-size-lead);
margin-bottom: 1rem;
padding-left: 4rem;
position: relative;
min-height: 3.2rem;
line-height: 1.2;
&:before {
content: "";
display: block;
width: 3.2rem;
height: 3.2rem;
border-radius: 100%;
background: var(--color-goldenBeige);
position: absolute;
left: 0;
top: 0;
}
}
.time {
width: 100%;
}
.venue {
font-style: italic;
}

View File

@ -21,7 +21,49 @@
}
}
.details {
font-family: var(--font-serif);
font-size: var(--font-size-lead);
.details {}
.prices {
margin: 2rem 0 1rem;
h2 {
font-size: 1rem;
font-family: var(--font-main);
}
}
.priceList {
list-style: none;
display: flex;
}
.priceItem {
font-family: var(--font-serif);
font-size: var(--font-size-caption);
position: relative;
padding: 0 1.5rem 0 1rem;
&:after {
content: "/";
font-family: var(--font-serif);
font-size: 2rem;
position: absolute;
top: 0;
right: 0;
line-height: 1.2;
}
&:first-child {
padding-left: 0;
}
&:last-child {
&:after {
display: none;
}
}
}
.priceLabel {
display: block;
}

View File

@ -166,6 +166,21 @@ input[type="text"] {
transition: opacity var(--transition-easing);
}
.number {
font-family: var(--font-serif);
font-weight: 400;
}
.textLink {
font-family: var(--font-serif);
font-style: italic;
display: block;
&:after {
content: "";
}
}
.hiddenLink {
position: absolute;
top: 0;