mirror of
https://github.com/MAGICGrants/campaign-site.git
synced 2026-01-08 20:08:05 -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 (
|
||||
<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 ? (
|
||||
<Image
|
||||
src={project.coverImage}
|
||||
alt="avatar"
|
||||
width={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 && (
|
||||
<CustomLink
|
||||
className="text-inherit hover:text-inherit hover:underline"
|
||||
@@ -87,7 +87,7 @@ export default function PageHeading({ project, children }: Props) {
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,17 +67,15 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
|
||||
|
||||
<div className="divide-y divide-gray-200">
|
||||
<PageHeading project={project}>
|
||||
<div className="w-full flex flex-col items-center gap-4 xl:flex">
|
||||
{coverImage ? (
|
||||
<div className="w-full flex flex-col items-center gap-4">
|
||||
{coverImage && (
|
||||
<Image
|
||||
src={coverImage}
|
||||
alt="avatar"
|
||||
width={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">
|
||||
@@ -172,7 +170,7 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
|
||||
</div>
|
||||
|
||||
<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 || '') }}
|
||||
/>
|
||||
</PageHeading>
|
||||
@@ -249,13 +247,5 @@ export async function getServerSideProps({ params, resolvedUrl }: GetServerSideP
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
project: {
|
||||
...project,
|
||||
content,
|
||||
},
|
||||
donationStats,
|
||||
},
|
||||
}
|
||||
return { props: { project: { ...project, content }, donationStats } }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user