update date list, change news list grid

This commit is contained in:
elisejakob
2024-06-10 14:07:48 +02:00
parent 2dab1937d2
commit 6ccc6082ec
4 changed files with 28 additions and 56 deletions

View File

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

View File

@ -13,8 +13,12 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
return ( return (
<li className={styles.date}> <li className={styles.date}>
<div className={styles.time}> <div className={styles.time}>
<span>{formatDate(occurrence.start, dateFormat)}</span>&nbsp; <span className={styles.day}>
<span>{formatDate(occurrence.start, timeFormat)}</span> {formatDate(occurrence.start, dateFormat)}
</span>
<span className={styles.hour}>
{formatDate(occurrence.start, timeFormat)}
</span>
</div> </div>
<div className={styles.venue}> <div className={styles.venue}>
<span> <span>
@ -82,54 +86,3 @@ export const DateList = ({ event }: { event: EventFragment }) => {
</div> </div>
); );
}; };
export const DateListDemo = () => {
return (
<div className={styles.dateWrapper}>
<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}>
<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

@ -13,12 +13,28 @@
line-height: 1.2; line-height: 1.2;
border-right: var(--border); border-right: var(--border);
padding-right: 1rem; padding-right: 1rem;
&:last-child {
border: none;
}
} }
.time { .time {
width: 100%; width: 100%;
} }
.day {
display: block;
&:first-letter {
text-transform: capitalize;
}
}
.hour {
display: block;
}
.venue { .venue {
font-style: italic; font-style: italic;
} }

View File

@ -48,7 +48,11 @@
&:nth-child(3), &:nth-child(3),
&:nth-child(4), &:nth-child(4),
&:nth-child(5) { &:nth-child(5) {
grid-column: span 4; grid-column: span 3;
h2 {
font-size: 1.4rem;
}
} }
} }
} }