Skip to content

Commit

Permalink
116 style project page (#119)
Browse files Browse the repository at this point in the history 
* style(frontend): 💄 Style cards and cardcontent in project page for better overview

Co-authored-by: Jakob <jakob.gregusson@gmail.com>

* style(frontend): 💄 Add new line if the words are too long in blocksrenderer

* fix(frontend): 🚨 handle lint warning

* style(frontend): 💄 Make the cards go from left to right and start from center if the screen is too small

* refactor(frontend): 🎨 Run prettier

* refactor(frontend): ♻️ Run prettier

---------

Co-authored-by: Jakob <jakob.gregusson@gmail.com>
  • Loading branch information
2 people authored and GitHub committed Mar 18, 2024
1 parent 4dd1f88 commit d8bd3d4
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 34 deletions.
75 changes: 42 additions & 33 deletions frontend/src/app/projects/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { getClient } from "@/lib/ApolloClient";
import { BlocksContent } from "@strapi/blocks-react-renderer";
import Link from "next/link";
import Image from "next/image";
import BlockRendererClient from "@/components/BlockRendererClient";
const HOST_URL = process.env.HOST_URL;

const GET_PROJECTS = gql(`
Expand Down Expand Up @@ -55,13 +54,15 @@ export default async function ProjectsPage() {
}

return (
<div className="flex flex-col items-center justify-center">
<h1 className="text-4xl font-extrabold ">Our Projects</h1>
<p className="text-sm text-muted-foreground">
Information about our various projects are shown here.
</p>
<div>
<div className="flex flex-col items-center justify-center">
<h1 className="text-4xl font-extrabold ">Our Projects</h1>
<p className="text-sm text-muted-foreground">
Information about our various projects are shown here.
</p>
</div>

<div className="mt-4 flex flex-col items-center justify-center gap-4">
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData.data.projects.data.map((project) => {
let coverImage =
project?.attributes?.coverImage?.data?.attributes?.url;
Expand All @@ -72,39 +73,47 @@ export default async function ProjectsPage() {
let content: BlocksContent =
project?.attributes?.article ?? [];

let text = "";

for (const block of content) {
if (block.type === "paragraph") {
content = [block];
const paragraphBlock = block as {
type: "paragraph";
children: { type: "text"; text: string }[];
};

text =
paragraphBlock.children[0].text.slice(0, 100) +
"...";

break;
}
}
return (
<Card className="w-1/2" key={project.id}>
<CardHeader>
<CardTitle>
<Link
className="hover:underline"
href={
"/projects/" +
project?.attributes?.slug
}
>
<Link
className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
href={"/projects/" + project?.attributes?.slug}
key={project.id}
>
<Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
<CardHeader></CardHeader>
<CardContent>
{coverImage && (
<Image
className="h-36"
src={coverImage}
alt={coverImage}
width={500}
height={0}
/>
)}
<CardTitle className="mb-2 mt-2 text-xl font-bold">
{project?.attributes?.title}
</Link>
</CardTitle>
</CardHeader>
<CardContent>
{coverImage && (
<Image
src={coverImage}
alt={coverImage}
width={500}
height={0} // Set height to 0 to maintain aspect ratio
/>
)}
<BlockRendererClient content={content} />
</CardContent>
</Card>
</CardTitle>
<p className="break-words">{text}</p>
</CardContent>
</Card>
</Link>
);
})}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/BlockRendererClient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function BlockRendererClient({

paragraph: ({ children }) => (
<>
<p className="">{children}</p>
<p className="break-words">{children}</p>
<br />
</>
),
Expand Down

0 comments on commit d8bd3d4

Please sign in to comment.