messing around with event items, grid and order
This commit is contained in:
@ -40,38 +40,43 @@ export const EventItem = ({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.text}>
|
<div className={styles.time}>
|
||||||
<h1 className={styles.title}>{event.title}</h1>
|
|
||||||
{mode === "list" && nextOccurrence && (
|
{mode === "list" && nextOccurrence && (
|
||||||
<div className={styles.details}>
|
<div className={styles.dates}>
|
||||||
{numOccurrences === 1 &&
|
{numOccurrences === 1 &&
|
||||||
nextOccurrence?.start &&
|
nextOccurrence?.start &&
|
||||||
formatDate(nextOccurrence.start, commonDateTimeFormat)}
|
formatDate(nextOccurrence.start, commonDateTimeFormat)}
|
||||||
{numOccurrences > 1 && nextOccurrence?.start && (
|
{numOccurrences > 1 && nextOccurrence?.start && (
|
||||||
<div>
|
<>
|
||||||
<span>
|
<span>
|
||||||
{formatDate(nextOccurrence.start, commonDateTimeFormat)}
|
{formatDate(nextOccurrence.start, commonDateTimeFormat)}
|
||||||
</span>
|
</span>
|
||||||
<p>Flere datoer ({numOccurrences}) →</p>
|
<p className={styles.moreDates}>
|
||||||
</div>
|
Flere datoer ({numOccurrences})
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{mode === "singular" &&
|
{mode === "singular" &&
|
||||||
"occurrence" in event &&
|
"occurrence" in event &&
|
||||||
event.occurrence?.start && (
|
event.occurrence?.start && (
|
||||||
<p className={styles.details}>
|
<p className={styles.dates}>
|
||||||
{formatDate(event.occurrence?.start, commonDateTimeFormat)}
|
{formatDate(event.occurrence?.start, commonDateTimeFormat)}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{mode === "calendar" &&
|
{mode === "calendar" &&
|
||||||
"occurrence" in event &&
|
"occurrence" in event &&
|
||||||
event.occurrence?.start && (
|
event.occurrence?.start && (
|
||||||
<p className={styles.details}>
|
<p className={styles.dates}>
|
||||||
{formatDate(event.occurrence?.start, "'kl.' HH:mm")}
|
{formatDate(event.occurrence?.start, "'kl.' HH:mm")}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles.text}>
|
||||||
|
<h1 className={styles.title}>{event.title}</h1>
|
||||||
|
<p className={styles.details}>Evt. andre detaljer</p>
|
||||||
|
</div>
|
||||||
<Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
|
<Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
|
||||||
Mer om arrangementet {event.title}
|
Mer om arrangementet {event.title}
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
.eventItem {
|
.eventItem {
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
display: grid;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
&.small {
|
&.small {
|
||||||
|
|
||||||
@ -12,19 +14,59 @@
|
|||||||
|
|
||||||
&.medium {
|
&.medium {
|
||||||
--size-image-width: 8rem;
|
--size-image-width: 8rem;
|
||||||
display: grid;
|
grid-template-rows: 1fr 2fr;
|
||||||
grid-template-columns: var(--size-image-width) auto;
|
grid-template-columns: var(--size-image-width) auto;
|
||||||
column-gap: .6rem;
|
column-gap: .6rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: var(--size-item-width);
|
width: var(--size-item-width);
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: var(--size-image-width);
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dates,
|
||||||
.title,
|
.title,
|
||||||
.details {
|
.details {
|
||||||
font-size: var(--font-size-body);
|
font-size: var(--font-size-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dates {
|
||||||
|
font-size: var(--font-size-caption);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dates {
|
||||||
|
margin: auto 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.large {
|
||||||
|
align-content: start;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: var(--size-image-width);
|
order: 2;
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
order: 3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -43,15 +85,38 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.title {
|
||||||
padding: .8rem 0;
|
font-size: var(--font-size-h2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title,
|
|
||||||
.details {
|
.details {
|
||||||
font-size: 1.6rem;
|
font-size: var(--font-size-lead);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dates,
|
||||||
.details {
|
.details {
|
||||||
font-family: var(--font-serif);
|
font-family: var(--font-serif);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.time {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dates {
|
||||||
|
font-size: var(--font-size-body);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moreDates {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--color-background-secondary);
|
||||||
|
color: var(--color-chateauBlue);
|
||||||
|
border-radius: 2rem;
|
||||||
|
padding: 0 .4rem;
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
font-family: var(--font-main);
|
||||||
|
}
|
@ -10,6 +10,7 @@
|
|||||||
--font-main-bold-italic: 'AvenirNextBoldItalic', 'Avenir Next', 'Avenir', sans-serif;
|
--font-main-bold-italic: 'AvenirNextBoldItalic', 'Avenir Next', 'Avenir', sans-serif;
|
||||||
--font-serif: 'p22-mackinac-pro', serif;
|
--font-serif: 'p22-mackinac-pro', serif;
|
||||||
|
|
||||||
|
--font-size-xs: .66rem;
|
||||||
--font-size-caption: .8rem;
|
--font-size-caption: .8rem;
|
||||||
--font-size-body: 1rem;
|
--font-size-body: 1rem;
|
||||||
--font-size-lead: 1.4rem;
|
--font-size-lead: 1.4rem;
|
||||||
|
Reference in New Issue
Block a user