open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make charity cards extend same length in row. Tweak image padding

Browse Source
This commit is contained in:
James Grugett 2022-04-29 23:55:32 -04:00
parent 78e8927de4
commit 3bb4111445
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/charity/charity-card.tsx
View File

@ -12,8 +12,8 @@ export function CharityCard(props: { charity: Charity }) {
return ( return (
<Link href={`/charity/${slug}`} passHref> <Link href={`/charity/${slug}`} passHref>
<div className="card card-compact transition:shadow cursor-pointer border-2 bg-white hover:shadow-md"> <div className="card card-compact transition:shadow flex-1 cursor-pointer border-2 bg-white hover:shadow-md">
<figure className="h-32"> <figure className="h-32 px-4 pt-4">
{photo ? ( {photo ? (
<img className="h-full w-full object-contain" src={photo} alt="" /> <img className="h-full w-full object-contain" src={photo} alt="" />
) : ( ) : (
@ -23,7 +23,7 @@ export function CharityCard(props: { charity: Charity }) {
<div className="card-body"> <div className="card-body">
<h3 className="card-title line-clamp-3">{name}</h3> <h3 className="card-title line-clamp-3">{name}</h3>
<div className="line-clamp-4 text-sm">{preview}</div> <div className="line-clamp-4 text-sm">{preview}</div>
<Row className="text-primary mt-4 items-end justify-center gap-1"> <Row className="text-primary mt-4 flex-1 items-end justify-center gap-2">
<span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span> <span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span>
<span>raised</span> <span>raised</span>
</Row> </Row>

5
web/pages/charity/index.tsx
View File

@ -6,7 +6,6 @@ import { Col } from '../../components/layout/col'
import { Page } from '../../components/page' import { Page } from '../../components/page'
import { Title } from '../../components/title' import { Title } from '../../components/title'
// TODO: Fetch amount raised.
const charities = charityList.map((charity) => ({ const charities = charityList.map((charity) => ({
...charity, ...charity,
raised: 4001, raised: 4001,
@ -40,9 +39,7 @@ export default function Charity() {
</Col> </Col>
<div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3"> <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
{filterCharities.map((charity) => ( {filterCharities.map((charity) => (
<div key={charity.name}> <CharityCard charity={charity} key={charity.name} />
<CharityCard charity={charity} />
</div>
))} ))}
</div> </div>
{filterCharities.length === 0 && ( {filterCharities.length === 0 && (