Skip to content

Commit

Permalink
301 style project page and blog page to look similiar (#302)
Browse files Browse the repository at this point in the history 
* style(frontend): 💄 Change grid on project page and border styling on blog page

* style(frontend): 💄 style blogcard component instead of changing blogcard to card

* style(frontend): 💄 remove justify start for related satellite/project cards

* style(frontend): 💄 change border radius on project and blogs and hover effect on projects

* style(frontend): 💄 add the same on hover effect in project page as for related satellites/projects

* fix(frontend): 🐛 remove wrong content on satellite page

* style(frontend): 💄 change related satellites/projects title and make all the cards center in flex

* refactor(frontend): ♻️ Prettier write

* refactor(frontend): ✨ Remove unused layout component and update CSS classes in ProjectsPage

* feat(frontend): ✨ add layout to project page

* refactor(frontend): 🎨

---------

Co-authored-by: Mads Hermansen <mads.d.hermansen+main@gmail.com>
  • Loading branch information
2 people authored and GitHub committed Apr 16, 2024
1 parent 0883596 commit 8ac0493
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 55 deletions.
0 frontend/src/app/projects/layout.tsx → ...src/app/projects/[projectSlug]/layout.tsx
View file
File renamed without changes.
54 changes: 28 additions & 26 deletions frontend/src/app/projects/[projectSlug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,36 +73,38 @@ export default async function Page({
projectTitle = STRAPI_URL + projectTitle;
}
return (
<div className="flex flex-col items-center gap-4">
<div className="mt-8 flex flex-col items-center gap-4">
<BlockRendererClient content={content} />
{graphqlData.data.projects?.data[0].attributes?.satellites?.data
.length != 0 && (
<h1 className="mb-2 mt-2 text-xl font-bold">
Related Satellites
</h1>
<>
<div className="prose prose-invert mb-1 lg:prose-xl">
<h2>Related Satellites</h2>
</div>
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
{graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
(satellite: any) => {
const previewImage =
satellite?.attributes?.previewImage?.data
?.attributes?.url ?? undefined;
const satelliteObject: ProjectOrSatellite = {
id: satellite.id,
title: satellite.attributes.name,
previewImage: previewImage,
slug: satellite.attributes.name,
isProject: false,
};
return (
<RelatedProjectsAndSatellites
project={satelliteObject}
key={satellite.id}
/>
);
},
)}
</div>
</>
)}
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
(satellite: any) => {
const previewImage =
satellite?.attributes?.previewImage?.data
?.attributes?.url ?? undefined;
const satelliteObject: ProjectOrSatellite = {
id: satellite.id,
title: satellite.attributes.name,
previewImage: previewImage,
slug: satellite.attributes.name,
isProject: false,
};
return (
<RelatedProjectsAndSatellites
project={satelliteObject}
key={satellite.id}
/>
);
},
)}
</div>
</div>
);
}
20 changes: 11 additions & 9 deletions frontend/src/app/projects/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default async function ProjectsPage() {
}

return (
<div>
<div className="mx-auto w-full max-w-6xl grow bg-opacity-50 px-4 py-8 sm:px-8 md:px-10">
<div className="flex flex-col items-center justify-center">
<PageHeaderAndSubtitle>
<PageHeader>Our Projects</PageHeader>
Expand All @@ -70,8 +70,8 @@ export default async function ProjectsPage() {
</PageHeaderAndSubtitle>
</div>

<div className="grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-16 lg:grid-cols-3 xl:grid-cols-4">
{graphqlData.data.projects.data.map((project) => {
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{graphqlData.data.projects.data.map((project: any) => {
let previewImage =
project?.attributes?.previewImage?.data?.attributes
?.url;
Expand All @@ -81,11 +81,11 @@ export default async function ProjectsPage() {
}
return (
<Link
className="h-full transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
className="h-full sm:m-4"
href={"/projects/" + project?.attributes?.slug}
key={project.id}
>
<Card className="h-full w-full">
<Card className="h-full w-full hover:border-blue-500">
<CardHeader></CardHeader>
<CardContent>
<div className="w-full">
Expand All @@ -108,10 +108,12 @@ export default async function ProjectsPage() {
{project?.attributes?.title}
</CardTitle>
<p className="break-words">
{SlicePreviewText(
project?.attributes?.content ??
[],
)}
<span>
{SlicePreviewText(
project?.attributes
?.content ?? [],
)}
</span>
</p>
</div>
</CardContent>
Expand Down
35 changes: 19 additions & 16 deletions frontend/src/app/satellites/[satelliteSlug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,22 +81,25 @@ export default async function SatelliteInfoPage({
</div>

{/* Related projects */}
{satelliteInfo.relatedProjects?.length != 0 ? (
<div className="mt-8 flex w-full flex-col items-center">
<h1 className="text-xl font-bold">Related Projects</h1>

<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{satelliteInfo.relatedProjects?.map(
(project: ProjectOrSatellite) => (
<RelatedProjectsAndSatellites
project={project}
key={project.id}
/>
),
)}
</div>
</div>
) : null}
<div className="mt-8 flex w-full flex-col items-center">
{satelliteInfo.relatedProjects?.length != 0 ? (
<>
<div className="prose prose-invert mb-1 lg:prose-xl">
<h2>Related Projects</h2>
</div>
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
{satelliteInfo.relatedProjects?.map(
(project: ProjectOrSatellite) => (
<RelatedProjectsAndSatellites
project={project}
key={project.id}
/>
),
)}
</div>
</>
) : null}
</div>
</>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/RelatedProjectsAndSatellites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export default function RelatedProjectsAndSatellites({

return (
<Link
className="m-1 transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
className="m-1 sm:m-4"
href={"/" + projectOrSatellite + "/" + project.slug}
key={project.id}
>
<Card className="md:w-68 flex h-full w-64 flex-col">
<Card className="md:w-68 flex h-full w-64 flex-col hover:border-blue-500">
<CardHeader>
<CardTitle className="mb-2 mt-2 text-center text-xl font-bold">
{project.title}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/shadcn/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
"border bg-card text-card-foreground shadow-sm",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/blogCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const BlogCard = React.forwardRef<
<div
ref={ref}
className={cn(
"flex flex-col border border-white bg-background p-5 text-card-foreground",
"flex flex-col border bg-background p-5 text-card-foreground",
className,
)}
{...props}
Expand Down

0 comments on commit 8ac0493

Please sign in to comment.