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

Move pic to top of card. Other misc styling.

Browse Source
This commit is contained in:
Sinclair Chen 2022-04-27 17:23:39 -07:00
parent 4d5f1b7d1f
commit 8046bd2b6b
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,14 +12,18 @@ export function CharityCard(props: { charity: Charity }) {
return ( return (
<Link href={`/charity/${slug}`} passHref> <Link href={`/charity/${slug}`} passHref>
<div className="card image-full bg-base-100 glass cursor-pointer shadow-xl"> <div className="card card-compact transition:shadow cursor-pointer border-2 bg-white hover:shadow-md">
<figure className="absolute h-full"> <figure className="h-32">
{photo && <img className="!object-contain" src={photo} alt="" />} {photo ? (
<img className="h-full w-full object-contain" src={photo} alt="" />
) : (
<div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
)}
</figure> </figure>
<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 text-gray-100">{blurb}</div> <div className="line-clamp-4 text-sm">{blurb}</div>
<Row className="mt-4 items-end justify-center gap-1 text-green-300"> <Row className="text-primary mt-4 items-end justify-center gap-1">
<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>

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

@ -23,7 +23,7 @@ export default function Charity() {
return ( return (
<Page> <Page>
<Col className="w-full rounded bg-white px-4 py-6 sm:px-8"> <Col className="w-full items-center rounded px-4 py-6 sm:px-8 xl:w-[125%]">
<Col className="max-w-xl"> <Col className="max-w-xl">
<Title className="!mt-0" text="Donate to a charity" /> <Title className="!mt-0" text="Donate to a charity" />
<div className="mb-6 text-gray-500"> <div className="mb-6 text-gray-500">
@ -36,7 +36,7 @@ export default function Charity() {
className="input input-bordered mb-6 w-full" className="input input-bordered mb-6 w-full"
/> />
</Col> </Col>
<div className="grid max-w-xl grid-flow-row grid-cols-1 gap-3 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}> <div key={charity.name}>
<CharityCard charity={charity} /> <CharityCard charity={charity} />