update date list, change news list grid
This commit is contained in:
@ -13,8 +13,12 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
|
||||
return (
|
||||
<li className={styles.date}>
|
||||
<div className={styles.time}>
|
||||
<span>{formatDate(occurrence.start, dateFormat)}</span>
|
||||
<span>{formatDate(occurrence.start, timeFormat)}</span>
|
||||
<span className={styles.day}>
|
||||
{formatDate(occurrence.start, dateFormat)}
|
||||
</span>
|
||||
<span className={styles.hour}>
|
||||
{formatDate(occurrence.start, timeFormat)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.venue}>
|
||||
<span>
|
||||
@ -82,54 +86,3 @@ export const DateList = ({ event }: { event: EventFragment }) => {
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span>18.00</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -13,12 +13,28 @@
|
||||
line-height: 1.2;
|
||||
border-right: var(--border);
|
||||
padding-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: block;
|
||||
|
||||
&:first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.hour {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.venue {
|
||||
font-style: italic;
|
||||
}
|
@ -48,7 +48,11 @@
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
grid-column: span 4;
|
||||
grid-column: span 3;
|
||||
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user