205 projects individual mobile responsiveness (#272)

* style(frontend): 💄 Style project page, change the view from flex to grid * style(frontend): 💄 style the grid in project page to make it more responsive * refactor(frontend): ⚰️ remove unecessary stylings * style(frontend): 💄 add tailwind typography styling to cardtitle and preview text * style(frontend): 💄 Add responsivness on blocksrenderer
NTNU-SmallSatLab · Apr 14, 2024 · 1273218 · 1273218
1 parent 0d072ae
commit 1273218
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -85,9 +85,7 @@ export default async function Page({
 
     return (
         <div className="flex flex-col items-center gap-4">
-            <div className="w-1/2">
-                <BlockRendererClient content={content} />
-            </div>
+            <BlockRendererClient content={content} />
             <div className="flex w-1/2 flex-row items-center gap-1">
                 <div className="flex flex-1 justify-start gap-1">
                     {avatarURL && (

diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -74,9 +74,7 @@ export default async function Page({
     }
     return (
         <div className="flex flex-col items-center gap-4">
-            <div className="w-1/2">
-                <BlockRendererClient content={content} />
-            </div>
+            <BlockRendererClient content={content} />
             {graphqlData.data.projects?.data[0].attributes?.satellites?.data
                 .length != 0 && (
                 <h1 className="mb-2 mt-2 text-xl font-bold">

diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
@@ -70,7 +70,7 @@ export default async function ProjectsPage() {
                 </PageHeaderAndSubtitle>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-4 md:justify-start">
+            <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) => {
                     let previewImage =
                         project?.attributes?.previewImage?.data?.attributes
@@ -81,14 +81,14 @@ export default async function ProjectsPage() {
                     }
                     return (
                         <Link
-                            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+                            className="h-full transition-transform duration-200 ease-in-out hover:scale-105 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">
+                            <Card className="h-full w-full">
                                 <CardHeader></CardHeader>
                                 <CardContent>
-                                    <div className="h-64">
+                                    <div className="w-full">
                                         {previewImage ? (
                                             <Image
                                                 className="max-h-full max-w-full object-contain"
@@ -103,14 +103,17 @@ export default async function ProjectsPage() {
                                             </div>
                                         )}
                                     </div>
-                                    <CardTitle className="mb-2 mt-2 text-xl font-bold">
-                                        {project?.attributes?.title}
-                                    </CardTitle>
-                                    <p className="break-words">
-                                        {SlicePreviewText(
-                                            project?.attributes?.content ?? [],
-                                        )}
-                                    </p>
+                                    <div className="prose prose-invert">
+                                        <CardTitle className="mb-2 mt-6">
+                                            {project?.attributes?.title}
+                                        </CardTitle>
+                                        <p className="break-words">
+                                            {SlicePreviewText(
+                                                project?.attributes?.content ??
+                                                    [],
+                                            )}
+                                        </p>
+                                    </div>
                                 </CardContent>
                             </Card>
                         </Link>