Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added gaps in between items in Chronology

This commit is contained in:
DrMint 2022-01-02 16:33:26 +01:00
parent 9daf218c51
commit 57d9013aa7
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Chronology/ChronologyItemComponent.tsx
View File

@ -53,7 +53,7 @@ export default function ChronologyItemComponent(
return ( return (
<div <div
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid" className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
id={generateAnchor( id={generateAnchor(
props.item.attributes.year, props.item.attributes.year,
props.item.attributes.month, props.item.attributes.month,
@ -61,7 +61,7 @@ export default function ChronologyItemComponent(
)} )}
> >
{props.displayYear ? ( {props.displayYear ? (
<p className="text-lg font-bold"> <p className="text-lg mt-[-.2em] font-bold">
{generateYear( {generateYear(
props.item.attributes.displayed_date, props.item.attributes.displayed_date,
props.item.attributes.year props.item.attributes.year
@ -75,7 +75,7 @@ export default function ChronologyItemComponent(
{generateDate(props.item.attributes.month, props.item.attributes.day)} {generateDate(props.item.attributes.month, props.item.attributes.day)}
</p> </p>
<div className="col-start-2 row-start-1 row-span-2"> <div className="col-start-2 row-start-1 row-span-2 grid gap-4">
{props.item.attributes.events.map((event) => ( {props.item.attributes.events.map((event) => (
<div className="m-0" key={event.id}> <div className="m-0" key={event.id}>
{event.translations.map((translation) => ( {event.translations.map((translation) => (