diff --git a/src/app/downloads/page.tsx b/src/app/downloads/page.tsx index 5e78b63..89302a6 100644 --- 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 ( - + - - + Go Home + + + + ); }; diff --git a/src/app/page.tsx b/src/app/page.tsx index 336c170..d5fe2fa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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 ( - + - - - - - - + + + + + + + + + ); }; diff --git a/src/app/peptide/[id]/page.tsx b/src/app/peptide/[id]/page.tsx index 9d9bad1..e7a6e01 100644 --- 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 ( - + - + ); }; diff --git a/src/app/search/export/[type]/[id]/page.tsx b/src/app/search/export/[type]/[id]/page.tsx index d31ec53..d1e7c86 100644 --- 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 ( - + + + ); } return ( - + + + ); } if (!result.success) { return ( - + + + ); } return ( - + + + ); }; diff --git a/src/app/search/multi-query/page.tsx b/src/app/search/multi-query/page.tsx index d04de6a..8c18d8e 100644 --- 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 ( - + + + ); } if (!result.success) { return ( - + + + ); } @@ -85,7 +90,7 @@ const MultiQuerySearchPage = async ({ searchParams }: Props) => { return ( - + { - + ); }; diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 33044cf..b82a67f 100644 --- 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 ( - + + + ); }; diff --git a/src/app/search/single-query/page.tsx b/src/app/search/single-query/page.tsx index b6a085c..3657a58 100644 --- a/src/app/search/single-query/page.tsx +++ b/src/app/search/single-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 { SingleQueryPeptideResultTable } from '@components/search/peptideSearchR 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 SingleQuerySearchPage = async ({ searchParams }: Props) => { if (result.loading) { return ( - + + + ); } if (!result.success) { return ( - + + + ); } @@ -84,7 +89,7 @@ const SingleQuerySearchPage = async ({ searchParams }: Props) => { }; return ( - + { - + ); }; diff --git a/src/app/search/text-query/page.tsx b/src/app/search/text-query/page.tsx index 5a4183c..932efe0 100644 --- a/src/app/search/text-query/page.tsx +++ b/src/app/search/text-query/page.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { SearchParam } from '@lib/next/types'; import { createPageMetadata } from '@lib/next/metadata'; import { getBooleanSearchParam, getNumberSearchParam, getStringArraySearchParam, getStringSearchParam } from '@lib/next/searchParams'; @@ -8,6 +8,7 @@ import { PeptideSearchHeading } from 'src/components/search/peptideSearchHeading import { TextQueryPeptideResultTable } from '@components/search/peptideSearchResult'; import { Pagination } from 'src/components/common/pagination'; import { RouteDefs } from '@lib/constants/routes'; +import { PageContainer } from '@components/common/pageContainer'; interface Params { searchParams: { @@ -58,7 +59,9 @@ const TextQuerySearchPage: React.FC = async ({ searchParams }) => { if (!results || !exportData) { return ( - + + + ); } @@ -72,12 +75,12 @@ const TextQuerySearchPage: React.FC = async ({ searchParams }) => { }; return ( - + - + ); }; diff --git a/src/app/statistics/features/page.tsx b/src/app/statistics/features/page.tsx index ed805fc..9a13fb3 100644 --- a/src/app/statistics/features/page.tsx +++ b/src/app/statistics/features/page.tsx @@ -1,9 +1,10 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { createPageMetadata } from '@lib/next/metadata'; import { RouteDefs } from '@lib/constants/routes'; import { StatisticsTabs } from '@components/statistics/statisticsTabs'; import { AttributeHistogramDynamicChart } from '@components/statistics/dynamicCharts/attributeHistogramDynamicChart'; import { AttributeScatterDynamicChart } from '@components/statistics/dynamicCharts/attributeScatterDynamicChart'; +import { PageContainer } from '@components/common/pageContainer'; export const generateMetadata = () => { return createPageMetadata(RouteDefs.statisticsFeatures, { @@ -15,13 +16,13 @@ const FeaturesStatisticsPage = () => { const graphHeight = 400; return ( - + - + ); }; diff --git a/src/app/statistics/general-information/page.tsx b/src/app/statistics/general-information/page.tsx index 41f8c52..d4b6b4d 100644 --- a/src/app/statistics/general-information/page.tsx +++ b/src/app/statistics/general-information/page.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { createPageMetadata } from '@lib/next/metadata'; import { RouteDefs } from '@lib/constants/routes'; import { getDatabaseDistribution, getDatabaseHeatmap, getFunctionDistribution, getPeptideCount, getUnusualPeptideCount } from '@lib/services/api/endpoints/statistics'; @@ -8,6 +8,7 @@ import { StatisticsTable } from '@components/statistics/statisticsTable'; import { WithExportableTitledBox } from '@components/common/withTitledBox'; import { HeatMap } from '@components/statistics/charts'; import { AminoAcidDistributionDynamicChart } from '@components/statistics/dynamicCharts/aminoAcidDistributionDynamicChart'; +import { PageContainer } from '@components/common/pageContainer'; export const generateMetadata = () => { return createPageMetadata(RouteDefs.statisticsGeneralInformation, { @@ -25,7 +26,7 @@ const GeneralInformationStatisticsPage = async () => { const graphHeight = 400; return ( - + {
- + ); }; diff --git a/src/app/statistics/metadata/page.tsx b/src/app/statistics/metadata/page.tsx index 245bb88..4e4790a 100644 --- a/src/app/statistics/metadata/page.tsx +++ b/src/app/statistics/metadata/page.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import { createPageMetadata } from '@lib/next/metadata'; @@ -13,6 +13,7 @@ import { import { StatisticsTabs } from '@components/statistics/statisticsTabs'; import { WithExportableTitledBox } from '@components/common/withTitledBox'; import { BarChart } from '@components/statistics/charts'; +import { PageContainer } from '@components/common/pageContainer'; export const generateMetadata = () => { return createPageMetadata(RouteDefs.statisticsMetadata, { @@ -32,7 +33,7 @@ const MetadataStatisticsPage = async () => { const graphHeight = 400; return ( - + { - + ); }; diff --git a/src/components/cms/common/imageGallery/ImageGallery.tsx b/src/components/cms/common/imageGallery/ImageGallery.tsx index 3dce22e..82d2347 100644 --- a/src/components/cms/common/imageGallery/ImageGallery.tsx +++ b/src/components/cms/common/imageGallery/ImageGallery.tsx @@ -44,9 +44,9 @@ export const ImageGallery: React.FC = ({ className, imageClassName, featu height: featured ? `${maxImageHeight}px` : undefined }} draggable - autoplay={false} + autoplay autoplaySpeed={5000} - pauseOnHover + pauseOnHover={false} dots arrows={false} lazyLoad="progressive" diff --git a/src/components/common/pageContainer/PageContainer.tsx b/src/components/common/pageContainer/PageContainer.tsx new file mode 100644 index 0000000..a626bdd --- /dev/null +++ b/src/components/common/pageContainer/PageContainer.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Container from 'react-bootstrap/Container'; +import clsx from 'clsx'; + + +interface Props { + children?: React.ReactNode; + className?: string; + main?: boolean; + fluid?: boolean; +} + +export const PageContainer = ({ children, className, main, fluid }: Props) => { + return ( + + {children} + + ); +}; diff --git a/src/components/common/pageContainer/index.ts b/src/components/common/pageContainer/index.ts new file mode 100644 index 0000000..bfab6ed --- /dev/null +++ b/src/components/common/pageContainer/index.ts @@ -0,0 +1 @@ +export { PageContainer } from './PageContainer';