mirror of
https://github.com/MAGICGrants/campaign-site.git
synced 2026-01-09 12:27:59 -05:00
Merge pull request #162 from MAGICGrants/project-page-improvements
feat: project page improvements
This commit is contained in:
@@ -28,20 +28,20 @@ export default function PageHeading({ project, children }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="divide-y divide-gray-200">
|
<div className="divide-y divide-gray-200">
|
||||||
<div className="items-start space-y-2 pb-8 pt-6 md:space-y-5 xl:grid xl:grid-cols-3 xl:gap-x-8">
|
<div className="items-start pb-8 pt-6 md:space-y-5 md:grid md:grid-cols-3 md:gap-x-10">
|
||||||
{project.coverImage ? (
|
{project.coverImage ? (
|
||||||
<Image
|
<Image
|
||||||
src={project.coverImage}
|
src={project.coverImage}
|
||||||
alt="avatar"
|
alt="avatar"
|
||||||
width={300}
|
width={300}
|
||||||
height={300}
|
height={300}
|
||||||
className="h-60 w-60 mx-auto my-auto object-contain row-span-3 hidden xl:block"
|
className="w-full mx-auto my-auto object-contain row-span-3 hidden md:block"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden xl:block" />
|
<PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden md:block" />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 xl:col-span-2">
|
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:col-span-2">
|
||||||
{!!project.website && (
|
{!!project.website && (
|
||||||
<CustomLink
|
<CustomLink
|
||||||
className="text-inherit hover:text-inherit hover:underline"
|
className="text-inherit hover:text-inherit hover:underline"
|
||||||
@@ -87,7 +87,7 @@ export default function PageHeading({ project, children }: Props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-4 items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-4 xl:space-y-0">
|
<div className="pt-4 items-start space-y-4 md:grid md:grid-cols-3 md:space-x-4 md:space-y-0">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -67,17 +67,15 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
|
|||||||
|
|
||||||
<div className="divide-y divide-gray-200">
|
<div className="divide-y divide-gray-200">
|
||||||
<PageHeading project={project}>
|
<PageHeading project={project}>
|
||||||
<div className="w-full flex flex-col items-center gap-4 xl:flex">
|
<div className="w-full flex flex-col items-center gap-4">
|
||||||
{coverImage ? (
|
{coverImage && (
|
||||||
<Image
|
<Image
|
||||||
src={coverImage}
|
src={coverImage}
|
||||||
alt="avatar"
|
alt="avatar"
|
||||||
width={700}
|
width={700}
|
||||||
height={700}
|
height={700}
|
||||||
className="w-full max-w-[700px] mx-auto object-contain xl:hidden"
|
className="w-full max-w-96 mx-auto object-contain md:hidden"
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<PlaceholderImage className="w-full max-w-[700px] mx-auto object-contain xl:hidden" />
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="w-full max-w-96 space-y-6 p-6 bg-white rounded-lg">
|
<div className="w-full max-w-96 space-y-6 p-6 bg-white rounded-lg">
|
||||||
@@ -172,7 +170,7 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<article
|
<article
|
||||||
className="prose max-w-none mt-4 p-6 xl:col-span-2 bg-white rounded-lg"
|
className="prose max-w-none mt-4 p-6 col-span-2 bg-white rounded-lg"
|
||||||
dangerouslySetInnerHTML={{ __html: xss(content || '') }}
|
dangerouslySetInnerHTML={{ __html: xss(content || '') }}
|
||||||
/>
|
/>
|
||||||
</PageHeading>
|
</PageHeading>
|
||||||
@@ -249,13 +247,5 @@ export async function getServerSideProps({ params, resolvedUrl }: GetServerSideP
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return { props: { project: { ...project, content }, donationStats } }
|
||||||
props: {
|
|
||||||
project: {
|
|
||||||
...project,
|
|
||||||
content,
|
|
||||||
},
|
|
||||||
donationStats,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user