291 redesign pages to use a black transparent background instead of c…

…ards (#295) * feat(frontend): 🎨 Change all sites to use new padding and colored background * strapi types probably forgotten from a previous merge
NTNU-SmallSatLab · Apr 14, 2024 · 235ff0f · 235ff0f
1 parent 167c747
commit 235ff0f
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 292 deletions.
diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts
@@ -362,205 +362,6 @@ export interface AdminTransferTokenPermission extends Schema.CollectionType {
   };
 }
 
-export interface ApiArticleArticle extends Schema.CollectionType {
-  collectionName: 'articles';
-  info: {
-    singularName: 'article';
-    pluralName: 'articles';
-    displayName: 'Article';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    previewTitle: Attribute.String & Attribute.Required & Attribute.Unique;
-    slug: Attribute.UID<'api::article.article', 'previewTitle'> &
-      Attribute.Required;
-    datePublished: Attribute.Date & Attribute.Required;
-    coverImage: Attribute.Media;
-    body: Attribute.Blocks & Attribute.Required;
-    author: Attribute.Relation<
-      'api::article.article',
-      'manyToOne',
-      'api::author.author'
-    >;
-    Tag: Attribute.Enumeration<['Featured', 'News', 'Updates']>;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::article.article',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::article.article',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiAuthorAuthor extends Schema.CollectionType {
-  collectionName: 'authors';
-  info: {
-    singularName: 'author';
-    pluralName: 'authors';
-    displayName: 'Author';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    name: Attribute.String & Attribute.Required;
-    avatar: Attribute.Media;
-    articles: Attribute.Relation<
-      'api::author.author',
-      'oneToMany',
-      'api::article.article'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::author.author',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::author.author',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiMostRecentImageMostRecentImage
-  extends Schema.CollectionType {
-  collectionName: 'most_recent_images';
-  info: {
-    singularName: 'most-recent-image';
-    pluralName: 'most-recent-images';
-    displayName: 'Most Recent Image';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    mostRecentImage: Attribute.Media & Attribute.Required;
-    satellite: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'manyToOne',
-      'api::satellite.satellite'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::most-recent-image.most-recent-image',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiProjectProject extends Schema.CollectionType {
-  collectionName: 'projects';
-  info: {
-    singularName: 'project';
-    pluralName: 'projects';
-    displayName: 'Project';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    title: Attribute.String & Attribute.Required & Attribute.Unique;
-    content: Attribute.Blocks;
-    slug: Attribute.UID<'api::project.project', 'title'> & Attribute.Required;
-    previewImage: Attribute.Media;
-    satellites: Attribute.Relation<
-      'api::project.project',
-      'manyToMany',
-      'api::satellite.satellite'
-    >;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::project.project',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::project.project',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
-export interface ApiSatelliteSatellite extends Schema.CollectionType {
-  collectionName: 'satellites';
-  info: {
-    singularName: 'satellite';
-    pluralName: 'satellites';
-    displayName: 'Satellite';
-    description: '';
-  };
-  options: {
-    draftAndPublish: true;
-  };
-  attributes: {
-    name: Attribute.String & Attribute.Required & Attribute.Unique;
-    celestrakURL: Attribute.String & Attribute.Unique;
-    catalogNumberNORAD: Attribute.String & Attribute.Unique;
-    content: Attribute.Blocks;
-    previewImage: Attribute.Media;
-    projects: Attribute.Relation<
-      'api::satellite.satellite',
-      'manyToMany',
-      'api::project.project'
-    >;
-    most_recent_images: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToMany',
-      'api::most-recent-image.most-recent-image'
-    >;
-    missionStatus: Attribute.String;
-    createdAt: Attribute.DateTime;
-    updatedAt: Attribute.DateTime;
-    publishedAt: Attribute.DateTime;
-    createdBy: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-    updatedBy: Attribute.Relation<
-      'api::satellite.satellite',
-      'oneToOne',
-      'admin::user'
-    > &
-      Attribute.Private;
-  };
-}
-
 export interface PluginUploadFile extends Schema.CollectionType {
   collectionName: 'files';
   info: {
@@ -1222,11 +1023,6 @@ declare module '@strapi/types' {
       'admin::api-token-permission': AdminApiTokenPermission;
       'admin::transfer-token': AdminTransferToken;
       'admin::transfer-token-permission': AdminTransferTokenPermission;
-      'api::article.article': ApiArticleArticle;
-      'api::author.author': ApiAuthorAuthor;
-      'api::most-recent-image.most-recent-image': ApiMostRecentImageMostRecentImage;
-      'api::project.project': ApiProjectProject;
-      'api::satellite.satellite': ApiSatelliteSatellite;
       'plugin::upload.file': PluginUploadFile;
       'plugin::upload.folder': PluginUploadFolder;
       'plugin::content-releases.release': PluginContentReleasesRelease;

diff --git a/frontend/src/app/blog/[articleSlug]/layout.tsx b/frontend/src/app/blog/[articleSlug]/layout.tsx
@@ -0,0 +1,5 @@
+import { PageColoredBackground } from "@/components/PageLayout";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PageColoredBackground>{children}</PageColoredBackground>;
+}
diff --git a/frontend/src/app/blog/layout.tsx b/frontend/src/app/blog/layout.tsx
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
@@ -9,6 +9,9 @@ import {
     PageHeader,
 } from "@/components/PageHeader";
 
+import { PagePadding } from "@/components/PageLayout";
+import React from "react";
+
 export interface BlogPost {
     key: string | null | undefined;
     firstArticle?: boolean | null | undefined;
@@ -47,18 +50,20 @@ export default async function BlogPage({
 
     return (
         <>
-            <PageHeaderAndSubtitle>
-                <PageHeader>Blog</PageHeader>
-                <PageSubtitle>
-                    Welcome to the blog! Here you can find all of the articles
-                    we have written.
-                </PageSubtitle>
-            </PageHeaderAndSubtitle>
-            <div className="flex flex-col justify-center">
-                {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
-                <BlogDataCards articles={articleList} />
-                <BlogPaginator totalArticles={totalArticles} />
-            </div>
+            <PagePadding>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Blog</PageHeader>
+                    <PageSubtitle>
+                        Welcome to the blog! Here you can find all of the
+                        articles we have written.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
+                <div className="flex flex-col justify-center">
+                    {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
+                    <BlogDataCards articles={articleList} />
+                    <BlogPaginator totalArticles={totalArticles} />
+                </div>
+            </PagePadding>
         </>
     );
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
                 <ApolloWrapper>
                     <Navbar />
                     <ErrorBoundaryNavigation>
-                        <main className="flex-grow">
+                        <main className="flex grow flex-col">
                             <Starfield />
                             {children}
                         </main>

diff --git a/frontend/src/app/projects/layout.tsx b/frontend/src/app/projects/layout.tsx
@@ -1,5 +1,5 @@
-import { PagePadding } from "@/components/PagePadding";
+import { PageColoredBackground } from "@/components/PageLayout";
 import React from "react";
 export default function Layout({ children }: { children: React.ReactNode }) {
-    return <PagePadding>{children}</PagePadding>;
+    return <PageColoredBackground>{children}</PageColoredBackground>;
 }
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -32,60 +32,58 @@ export default async function SatelliteInfoPage({
     if (!satelliteInfo) return <div>Loading...</div>;
 
     return (
-        <div className="my-12 flex min-h-screen items-center justify-center">
-            <div className="flex w-2/3 flex-col">
-                <div className="flex w-full flex-col items-center border-2 border-gray-600 bg-black p-4">
-                    {/* Container for satname, stats and sat image */}
-                    <div className="flex w-full flex-col bg-gray-600 p-0.5 xl:flex-row">
-                        {/* Stats Container */}
-                        <div className="z-10 flex w-full flex-col">
-                            <div className="bg-black p-5">
-                                <h1 className="text-xl font-bold tracking-wide">
-                                    {satelliteInfo.name}
-                                </h1>
-                            </div>
-                            <div className="mt-0.5">
-                                <SatelliteDataHome />
-                            </div>
+        <>
+            <div className="flex w-full flex-col items-center ">
+                {/* Container for satname, stats and sat image */}
+                <div className="flex w-full flex-col bg-gray-600 p-0.5 xl:flex-row">
+                    {/* Stats Container */}
+                    <div className="z-10 flex w-full flex-col">
+                        <div className="bg-black p-5">
+                            <h1 className="text-xl font-bold tracking-wide">
+                                {satelliteInfo.name}
+                            </h1>
                         </div>
-
-                        {/* Image container */}
-                        <div className="z-0 ml-0.5 w-full">
-                            <div className="flex h-full w-full items-center justify-center bg-black">
-                                <h1>Satellite Image</h1>
-                            </div>
+                        <div className="mt-0.5">
+                            <SatelliteDataHome />
                         </div>
                     </div>
 
-                    {/* Container for map */}
-                    <div className="mt-6 w-full">
-                        <Map2d satName={satelliteInfo.name} />
+                    {/* Image container */}
+                    <div className="z-0 ml-0.5 w-full">
+                        <div className="flex h-full w-full items-center justify-center bg-black">
+                            <h1>Satellite Image</h1>
+                        </div>
                     </div>
+                </div>
 
-                    {/* Container for body content */}
-                    <div className="mt-6">
-                        <BlockRendererClient content={satelliteInfo.content} />
-                    </div>
+                {/* Container for map */}
+                <div className="mt-6 w-full">
+                    <Map2d satName={satelliteInfo.name} />
                 </div>
 
-                {/* Related projects */}
-                <div className="mt-8 flex w-full flex-col items-center border-2 border-gray-600 bg-black p-4">
-                    {satelliteInfo.relatedProjects?.length != 0 ? (
-                        <h1 className="text-xl font-bold">Related Projects</h1>
-                    ) : null}
+                {/* Container for body content */}
+                <div className="mt-6">
+                    <BlockRendererClient content={satelliteInfo.content} />
+                </div>
+            </div>
 
-                    <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>
+            {/* Related projects */}
+            <div className="mt-8 flex w-full flex-col items-center">
+                {satelliteInfo.relatedProjects?.length != 0 ? (
+                    <h1 className="text-xl font-bold">Related Projects</h1>
+                ) : null}
+
+                <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>
-        </div>
+        </>
     );
 }