ImageGallery can now take up whole screen height.

starpep-web · Jan 16, 2025 · 2a75206 · 2a75206
1 parent 7aee383
commit 2a75206
Show file tree

Hide file tree

Showing 17 changed files with 181 additions and 120 deletions.
diff --git a/src/app/downloads/page.tsx b/src/app/downloads/page.tsx
@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { createPageMetadata } from '@lib/next/metadata';
 import { RouteDefs } from '@lib/constants/routes';
 import { DownloadsCard } from '@components/downloads/downloadsCard';
+import { PageContainer } from '@components/common/pageContainer';
 import {
   DOWNLOADS_DB_ARCHIVES,
   DOWNLOADS_FASTA_BY_DB,
@@ -22,7 +23,7 @@ export const generateMetadata = () => {
 
 const DownloadsPage = () => {
   return (
-    <Fragment>
+    <PageContainer main>
       <DownloadsCard className="mb-4" title="Peptide Archives">
         <Button variant="primary" as="a" href={DOWNLOADS_PDB_ARCHIVE} target="_blank">
           Complete PDB Archive (.zip)
@@ -92,7 +93,7 @@ const DownloadsPage = () => {
           ))
         }
       </DownloadsCard>
-    </Fragment>
+    </PageContainer>
   );
 };
 

diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
@@ -3,6 +3,7 @@ import { createPageMetadata } from '@lib/next/metadata';
 import { RouteDefs } from '@lib/constants/routes';
 import { getFaqPage } from '@lib/services/strapi/graphql/queries/faqPage';
 import { FaqAccordion } from 'src/components/cms/common/faqAccordion';
+import { PageContainer } from '@components/common/pageContainer';
 
 export const generateMetadata = () => {
   return createPageMetadata(RouteDefs.faq, {
@@ -14,10 +15,12 @@ const FaqPage = async () => {
   const { faqPage } = await getFaqPage();
 
   return (
-    <FaqAccordion
-      className="mb-4"
-      items={faqPage?.data?.attributes?.faqs}
-    />
+    <PageContainer main>
+      <FaqAccordion
+        className="mb-4"
+        items={faqPage?.data?.attributes?.faqs}
+      />
+    </PageContainer>
   );
 };
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Container from 'react-bootstrap/Container';
 import { CONTENT_LANG } from '@lib/constants/app';
 import { Navbar } from '@components/common/navbar';
 import { Footer } from '@components/common/footer';
@@ -16,9 +15,7 @@ const RootLayout: React.FC<Props> = ({ children }) => {
     <html lang={CONTENT_LANG} data-bs-theme="light">
       <body>
         <Navbar />
-        <Container as="main" className="mt-4 mb-4 px-2 px-md-0">
-          {children}
-        </Container>
+        {children}
         <Footer />
       </body>
     </html>

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -8,6 +8,7 @@ import Button from 'react-bootstrap/Button';
 import CircleQuestionIcon from '@assets/svg/icons/circle-question-solid.svg';
 import HouseIcon from '@assets/svg/icons/house-solid.svg';
 import { RouteDefs } from '@lib/constants/routes';
+import { PageContainer } from '@components/common/pageContainer';
 
 export const generateMetadata = () => {
   return createPageMetadata('', {
@@ -17,27 +18,29 @@ export const generateMetadata = () => {
 
 const NotFoundPage = () => {
   return (
-    <Card className="mx-auto p-4" style={{ maxWidth: '600px', marginTop: '10svh', marginBottom: '10svh' }}>
-      <CardTitle className="d-flex align-items-center">
-        <CircleQuestionIcon className="d-inline me-3" height="2.5rem" style={{ fill: 'var(--bs-primary)' }} />
+    <PageContainer main>
+      <Card className="mx-auto p-4" style={{ maxWidth: '600px', marginTop: '10svh', marginBottom: '10svh' }}>
+        <CardTitle className="d-flex align-items-center">
+          <CircleQuestionIcon className="d-inline me-3" height="2.5rem" style={{ fill: 'var(--bs-primary)' }} />
 
-        <h1 className="mb-0">
-          Page Not Found
-        </h1>
-      </CardTitle>
+          <h1 className="mb-0">
+            Page Not Found
+          </h1>
+        </CardTitle>
 
-      <CardBody>
-        The page you were looking for was not found. Please check that the URL you inserted is correct.
-      </CardBody>
+        <CardBody>
+          The page you were looking for was not found. Please check that the URL you inserted is correct.
+        </CardBody>
 
-      <div className="d-flex justify-content-center">
-        <Button as={Link as unknown as 'a'} href={RouteDefs.home} variant="primary" className="w-100-sm d-inline-flex align-items-center justify-content-center">
-          <HouseIcon className="d-inline me-3" height={20} style={{ fill: '#fff' }} />
+        <div className="d-flex justify-content-center">
+          <Button as={Link as unknown as 'a'} href={RouteDefs.home} variant="primary" className="w-100-sm d-inline-flex align-items-center justify-content-center">
+            <HouseIcon className="d-inline me-3" height={20} style={{ fill: '#fff' }} />
 
-          Go Home
-        </Button>
-      </div>
-    </Card>
+            Go Home
+          </Button>
+        </div>
+      </Card>
+    </PageContainer>
   );
 };
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,12 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { createPageMetadata } from '@lib/next/metadata';
 import { RouteDefs } from '@lib/constants/routes';
 import { getHomePage } from '@lib/services/strapi/graphql/queries/homePage';
 import { ImageGallery } from 'src/components/cms/common/imageGallery';
 import { TextCard } from 'src/components/cms/common/textCard';
 import { TextImageColumn } from 'src/components/cms/common/textImageColumn';
 import { TeamMemberCardGroup } from '@components/cms/team/teamMemberCardGroup';
+import { PageContainer } from '@components/common/pageContainer';
 
 export const generateMetadata = () => {
   return createPageMetadata(RouteDefs.home, {
@@ -17,44 +18,47 @@ const HomePage = async () => {
   const { homePage } = await getHomePage();
 
   return (
-    <Fragment>
+    <PageContainer main fluid>
       <ImageGallery
         className="mb-4"
         images={homePage?.data?.attributes?.imageGallery.images}
         featured
       />
-      <TextCard
-        className="mb-5"
-        color={homePage?.data?.attributes?.heroText.color}
-        text={homePage?.data?.attributes?.heroText.text}
-      />
-      <TextImageColumn
-        id="about"
-        className="mb-5"
-        text={homePage?.data?.attributes?.about.text}
-        image={homePage?.data?.attributes?.about.image}
-        flip={homePage?.data?.attributes?.about.flip}
-      />
-      <TeamMemberCardGroup
-        id="contact"
-        className="mb-4"
-        title={homePage?.data?.attributes?.projectLeaders.title}
-        type={homePage?.data?.attributes?.projectLeaders.type}
-        members={homePage?.data?.attributes?.projectLeaders.members}
-      />
-      <TeamMemberCardGroup
-        className="mb-4"
-        title={homePage?.data?.attributes?.collaborators.title}
-        type={homePage?.data?.attributes?.collaborators.type}
-        members={homePage?.data?.attributes?.collaborators.members}
-      />
-      <TeamMemberCardGroup
-        className="mb-4"
-        title={homePage?.data?.attributes?.developers.title}
-        type={homePage?.data?.attributes?.developers.type}
-        members={homePage?.data?.attributes?.developers.members}
-      />
-    </Fragment>
+
+      <PageContainer>
+        <TextCard
+          className="mb-5"
+          color={homePage?.data?.attributes?.heroText.color}
+          text={homePage?.data?.attributes?.heroText.text}
+        />
+        <TextImageColumn
+          id="about"
+          className="mb-5"
+          text={homePage?.data?.attributes?.about.text}
+          image={homePage?.data?.attributes?.about.image}
+          flip={homePage?.data?.attributes?.about.flip}
+        />
+        <TeamMemberCardGroup
+          id="contact"
+          className="mb-4"
+          title={homePage?.data?.attributes?.projectLeaders.title}
+          type={homePage?.data?.attributes?.projectLeaders.type}
+          members={homePage?.data?.attributes?.projectLeaders.members}
+        />
+        <TeamMemberCardGroup
+          className="mb-4"
+          title={homePage?.data?.attributes?.collaborators.title}
+          type={homePage?.data?.attributes?.collaborators.type}
+          members={homePage?.data?.attributes?.collaborators.members}
+        />
+        <TeamMemberCardGroup
+          className="mb-4"
+          title={homePage?.data?.attributes?.developers.title}
+          type={homePage?.data?.attributes?.developers.type}
+          members={homePage?.data?.attributes?.developers.members}
+        />
+      </PageContainer>
+    </PageContainer>
   );
 };
 

diff --git a/src/app/peptide/[id]/page.tsx b/src/app/peptide/[id]/page.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { getPeptideById } from '@lib/services/api/endpoints/peptides';
 import { notFound } from 'next/navigation';
 import { createPageMetadata } from '@lib/next/metadata';
@@ -11,6 +11,7 @@ import { PeptideInfo } from '@components/peptide/peptideInfo';
 import { PeptideAttributes } from '@components/peptide/peptideAttributes';
 import { PeptideMetadata } from '@components/peptide/peptideMetadata';
 import { PeptideDownloads } from '@components/peptide/peptideDownloads';
+import { PageContainer } from '@components/common/pageContainer';
 
 interface Params {
   params: {
@@ -45,14 +46,14 @@ const PeptidePage = async ({ params }: Props) => {
   const pdbString = await getPeptidePdbContent(peptide.id);
 
   return (
-    <Fragment>
+    <PageContainer main>
       <PeptideTitle sequence={peptide.sequence} />
       <PeptideVisualization peptide={peptide} pdbString={pdbString} />
       <PeptideInfo {...peptide} />
       <PeptideAttributes attributes={peptide.attributes} />
       <PeptideMetadata metadata={peptide.metadata} />
       <PeptideDownloads id={peptide.id} />
-    </Fragment>
+    </PageContainer>
   );
 };
 

diff --git a/src/app/search/export/[type]/[id]/page.tsx b/src/app/search/export/[type]/[id]/page.tsx
@@ -8,6 +8,7 @@ import { safeAsync } from '@lib/utils/async';
 import { SearchExportLoadingNoProgress, SearchExportLoadingWithProgress } from '@components/searchExport/searchExportLoading';
 import { SearchExportError } from '@components/searchExport/searchExportError';
 import { SearchExportComplete } from '@components/searchExport/searchExportComplete';
+import { PageContainer } from '@components/common/pageContainer';
 
 const getSearchExportResult = (type: ExportPayloadType, taskId: string) => {
   switch (type) {
@@ -70,28 +71,36 @@ const ExportPage = async ({ params }: Props) => {
   if (result.loading) {
     if (result.data) {
       return (
-        <SearchExportLoadingWithProgress done={result.data.done} form={result.data.form} />
+        <PageContainer main>
+          <SearchExportLoadingWithProgress done={result.data.done} form={result.data.form} />
+        </PageContainer>
       );
     }
 
     return (
-      <SearchExportLoadingNoProgress style={{ marginTop: '30svh', marginBottom: '30svh' }} />
+      <PageContainer main>
+        <SearchExportLoadingNoProgress style={{ marginTop: '30svh', marginBottom: '30svh' }} />
+      </PageContainer>
     );
   }
 
   if (!result.success) {
     return (
-      <SearchExportError error={result.data} />
+      <PageContainer main>
+        <SearchExportError error={result.data} />
+      </PageContainer>
     );
   }
 
   return (
-    <SearchExportComplete
-      id={result.id}
-      form={result.data.form}
-      peptideIds={result.data.peptideIds}
-      total={result.data.total}
-    />
+    <PageContainer main>
+      <SearchExportComplete
+        id={result.id}
+        form={result.data.form}
+        peptideIds={result.data.peptideIds}
+        total={result.data.total}
+      />
+    </PageContainer>
   );
 };
 

diff --git a/src/app/search/multi-query/page.tsx b/src/app/search/multi-query/page.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { notFound } from 'next/navigation';
 import { SearchParam } from '@lib/next/types';
 import { createPageMetadata } from '@lib/next/metadata';
@@ -12,6 +12,7 @@ import { MultiQueryPeptideResultTable } from '@components/search/peptideSearchRe
 import { Pagination } from '@components/common/pagination';
 import { RouteDefs } from '@lib/constants/routes';
 import { DEFAULT_AUTO_RELOAD_INTERVAL_SECONDS } from '@lib/constants/app';
+import { PageContainer } from '@components/common/pageContainer';
 
 interface Params {
   searchParams: {
@@ -58,23 +59,27 @@ const MultiQuerySearchPage = async ({ searchParams }: Props) => {
 
   if (result.loading) {
     return (
-      <RefreshLoader
-        style={{ marginTop: '30svh', marginBottom: '30svh' }}
-        title="Aligning your query..."
-        subtitle="The page will automatically refresh until the alignment is done."
-        refreshInterval={DEFAULT_AUTO_RELOAD_INTERVAL_SECONDS}
-      />
+      <PageContainer main>
+        <RefreshLoader
+          style={{ marginTop: '30svh', marginBottom: '30svh' }}
+          title="Aligning your query..."
+          subtitle="The page will automatically refresh until the alignment is done."
+          refreshInterval={DEFAULT_AUTO_RELOAD_INTERVAL_SECONDS}
+        />
+      </PageContainer>
     );
   }
 
   if (!result.success) {
     return (
-      <ErrorMessage
-        show
-        error={`Server responded with: ${result.data}`}
-        header="Could not get your multi query alignment"
-        description="Try re-running your multi query search."
-      />
+      <PageContainer main>
+        <ErrorMessage
+          show
+          error={`Server responded with: ${result.data}`}
+          header="Could not get your multi query alignment"
+          description="Try re-running your multi query search."
+        />
+      </PageContainer>
     );
   }
 
@@ -85,7 +90,7 @@ const MultiQuerySearchPage = async ({ searchParams }: Props) => {
 
 
   return (
-    <Fragment>
+    <PageContainer main>
       <PeptideSearchHeading
         title={`Found ${pagination.total} results (Page: ${page})`}
         totalCount={pagination.total}
@@ -95,7 +100,7 @@ const MultiQuerySearchPage = async ({ searchParams }: Props) => {
 
       <MultiQueryPeptideResultTable peptides={peptides} firstIndex={pagination.currentIndex} />
       <Pagination paginatedUrlBuilder={paginatedUrlBuilder} {...pagination} />
-    </Fragment>
+    </PageContainer>
   );
 };
 

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { createPageMetadata } from '@lib/next/metadata';
 import { RouteDefs } from '@lib/constants/routes';
 import { PeptideSearchBox } from '@components/search/peptideSearchBox';
+import { PageContainer } from '@components/common/pageContainer';
 
 export const generateMetadata = () => {
   return createPageMetadata(RouteDefs.search, {
@@ -11,7 +12,9 @@ export const generateMetadata = () => {
 
 const SearchPage = () => {
   return (
-    <PeptideSearchBox />
+    <PageContainer main>
+      <PeptideSearchBox />
+    </PageContainer>
   );
 };