Skip to content

Commit 725f7f4

Browse files
ErikvvErikvv
committed
Flexible height for Cards
In the Binnenhaven case I noticed that the text doesn't fit on the card by 1-2 words depending on screen size. I've removed the fixed height from the card and done some refactoring to simplify the code.
1 parent eb4df46 commit 725f7f4

File tree

2 files changed

+69
-70
lines changed

2 files changed

+69
-70
lines changed

‎frontend/components/Blocks/CardsBlock/CardBlock.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,20 @@ export default function CardBlock({
2727
>
2828
{cards.map((cardItem, index) => {
2929
return (
30-
<div
31-
className="px-[1rem] flex-[0_0_50%] sm:flex-[0_0_33%] lg:flex-[0_0_25%] xl:flex-[0_0_20%]"
30+
<Card
3231
key={index}
33-
>
34-
<Card cardItem={cardItem} cardType="cardBlockCard"></Card>
35-
</div>
32+
cardItem={cardItem}
33+
cardType="cardBlockCard"
34+
style={{margin: "1rem"}}
35+
className="flex-[0_0_50%] sm:flex-[0_0_33%] lg:flex-[0_0_25%] xl:flex-[0_0_20%]"/>
3636
)
3737
})}
3838
</div>
3939

40-
{buttonBlock.length > 0 && (
41-
<ButtonBlock
40+
{buttonBlock.length > 0 && (<ButtonBlock
4241
buttons={buttonBlock[0].value.buttons}
4342
align={buttonBlock[0].value.buttonsAlign}
44-
></ButtonBlock>
45-
)}
43+
></ButtonBlock>)}
4644
</div>
4745
)
4846
}

‎frontend/components/Card/Card.tsx‎

Lines changed: 62 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react"
1+
import React, {ComponentProps} from "react"
22
import { useRouter } from "next/router"
33
import { ArrowSmallRightIcon } from "@heroicons/react/24/outline"
44
import RawHtml from "../RawHtml/RawHtml"
@@ -19,7 +19,7 @@ const CardTitle = ({ condition, children, ...linkProps }: CardTitleProps) => {
1919
return <strong className="block line-clamp-2">{children}</strong>
2020
}
2121

22-
export default function Card({ cardItem, cardType }: CardProps) {
22+
export default function Card({ cardItem, cardType, className, ...props }: CardProps & ComponentProps<"span">) {
2323
const backgroundColor: string = cardItem.cardColor !== "" ? cardItem.cardColor : "bg-white"
2424
const router = useRouter()
2525
let link: string
@@ -49,10 +49,10 @@ export default function Card({ cardItem, cardType }: CardProps) {
4949
})
5050
} else {
5151
return (cardStyling = {
52-
card: "flex-col min-h-96 mb-4 h-[360px] xl:h-[400px] overflow-hidden",
53-
imgSpan: "h-2/3",
52+
card: "flex-col min-h-96 mb-4 overflow-hidden",
53+
imgSpan: "",
5454
img: "rounded-t-lg duration-300 ease-in group-hover:brightness-100 group-hover:scale-110",
55-
text: "flex-col h-1/3 m-4",
55+
text: "flex-col m-4",
5656
})
5757
}
5858
}
@@ -76,64 +76,65 @@ export default function Card({ cardItem, cardType }: CardProps) {
7676
}
7777

7878
return (
79-
<React.Fragment>
80-
<span
81-
className={`group ${cardStyling.card} ${backgroundColor} relative rounded-lg flex `}
82-
data-testid={cardItem.title}
83-
>
84-
<span className={`${cardStyling.imgSpan} overflow-hidden relative`}>
85-
{/* eslint-disable @next/next/no-img-element */}
86-
<img
87-
src={
88-
cardItem.thumbnail ?
89-
cardItem.thumbnail.url
90-
: cardItem.imageSelector?.img.src
91-
}
92-
alt={
93-
cardItem.thumbnail ?
94-
`storyline ${cardItem.title}`
95-
: cardItem.imageSelector?.img.alt
96-
}
97-
width="100%"
98-
height="auto"
99-
className={`object-cover object-center h-full w-full ${cardStyling.img} max-w-none max-h-none brightness-90 overflow-hidden`}
100-
/>
101-
{cardItem.informationTypes && (
102-
<span className="max-w-full mt-auto text-right absolute bottom-1 flex justify-start self-end flex-wrap-reverse">
103-
{cardItem.informationTypes.map((informationtype, index) => (
104-
<span
105-
key={index}
106-
className="flex bg-white truncate opacity-80 rounded-3xl items-center py-1 px-2 ml-2 mt-2"
107-
>
108-
{informationtype.icon && (
109-
<StorylineIcons icon={informationtype.icon} />
110-
)}
111-
{informationtype.name}
112-
</span>
113-
))}
114-
</span>
115-
)}
116-
</span>
79+
<span
80+
className={`group ${cardStyling.card} ${backgroundColor} relative rounded-lg flex ${className}`}
81+
data-testid={cardItem.title}
82+
{...props}
83+
>
84+
<span className={`${cardStyling.imgSpan} overflow-hidden relative`}>
85+
{/* eslint-disable @next/next/no-img-element */}
86+
<img
87+
src={
88+
cardItem.thumbnail ?
89+
cardItem.thumbnail.url
90+
: cardItem.imageSelector?.img.src
91+
}
92+
alt={
93+
cardItem.thumbnail ?
94+
`storyline ${cardItem.title}`
95+
: cardItem.imageSelector?.img.alt
96+
}
97+
style={{
98+
aspectRatio: "1 / 1",
99+
objectFit: "cover",
100+
}}
101+
className={`object-cover object-center h-full w-full ${cardStyling.img} max-w-none max-h-none brightness-90 overflow-hidden`}
102+
/>
103+
{cardItem.informationTypes && (
104+
<span className="max-w-full mt-auto text-right absolute bottom-1 flex justify-start self-end flex-wrap-reverse">
105+
{cardItem.informationTypes.map((informationtype, index) => (
106+
<span
107+
key={index}
108+
className="flex bg-white truncate opacity-80 rounded-3xl items-center py-1 px-2 ml-2 mt-2"
109+
>
110+
{informationtype.icon && (
111+
<StorylineIcons icon={informationtype.icon} />
112+
)}
113+
{informationtype.name}
114+
</span>
115+
))}
116+
</span>
117+
)}
118+
</span>
117119

118-
<span className={`flex gap-2 overflow-hidden ${cardStyling.text}`}>
119-
<CardTitle
120-
condition={cardItem.url || cardItem.slug || cardItem.itemLink?.length > 0}
121-
href={createLink(cardItem)}
122-
{...externLinkProps}
123-
>
124-
{cardItem.title}
125-
</CardTitle>
120+
<span className={`flex gap-2 overflow-hidden ${cardStyling.text}`}>
121+
<CardTitle
122+
condition={cardItem.url || cardItem.slug || cardItem.itemLink?.length > 0}
123+
href={createLink(cardItem)}
124+
{...externLinkProps}
125+
>
126+
{cardItem.title}
127+
</CardTitle>
126128

127-
{cardType === "buttonCard" ?
128-
<span className="w-10 h-10 flex-[0_0_40px]" data-testid="arrow">
129-
<ArrowSmallRightIcon />
130-
</span>
131-
: <span className="line-clamp-4">
132-
<RawHtml html={cardItem.description} />
133-
</span>
134-
}
135-
</span>
129+
{cardType === "buttonCard" ?
130+
<span className="w-10 h-10 flex-[0_0_40px]" data-testid="arrow">
131+
<ArrowSmallRightIcon />
132+
</span>
133+
: <span>
134+
<RawHtml html={cardItem.description} />
135+
</span>
136+
}
136137
</span>
137-
</React.Fragment>
138+
</span>
138139
)
139140
}

0 commit comments

Comments
 (0)