From af6c0cca663903ac4964f6f10cc6aad246feb193 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Thu, 25 May 2023 11:34:57 +0200
Subject: [PATCH] Center the Compendium Data header title
---
webapp/src/components/DataPage.tsx | 10 +---------
webapp/src/components/global/PageHeader.tsx | 18 ++++++++++++------
webapp/src/pages/CompendiumData.tsx | 9 +--------
3 files changed, 14 insertions(+), 23 deletions(-)
diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx
index 166c6710..c4a17996 100644
--- a/webapp/src/components/DataPage.tsx
+++ b/webapp/src/components/DataPage.tsx
@@ -1,10 +1,8 @@
import React, { ReactElement } from "react";
import { Container, Row } from "react-bootstrap";
-import { Link } from "react-router-dom";
import OrganizationSidebar from "./OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
-import SectionLink from "../components/global/SectionLink";
import SectionNavigation from "./SectionNavigation";
import { Sections } from "../helpers/constants";
import PolicySidebar from "./PolicySidebar";
@@ -28,13 +26,7 @@ function DataPage({ title, description, filter, children, category }: inputProps
<>
{category === Sections.Organisation && <OrganizationSidebar />}
{category === Sections.Policy && <PolicySidebar />}
- <PageHeader type={'data'} header={<h1 className={'bold-caps-30pt'}>
- <Link to="/data" style={{ textDecoration: 'none', color: 'white' }}>
- <span>Compendium Data</span>
- </Link>
- </h1>}>
- <SectionLink section={"Reports"} />
- </PageHeader>
+ <PageHeader type={'data'} />
<SectionNavigation activeCategory={category} />
<Container className="grow">
<Row>
diff --git a/webapp/src/components/global/PageHeader.tsx b/webapp/src/components/global/PageHeader.tsx
index 368b3d92..8d4b8126 100644
--- a/webapp/src/components/global/PageHeader.tsx
+++ b/webapp/src/components/global/PageHeader.tsx
@@ -1,13 +1,15 @@
import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+import SectionLink from "./SectionLink";
+
interface inputProps {
- type: string,
- header: ReactElement,
- children: ReactElement
+ type: string
}
-function CompendiumHeader({ type, header, children }: inputProps): ReactElement {
+function CompendiumHeader({ type }: inputProps): ReactElement {
let className = ''
if (type == 'data') {
className += ' compendium-data-header'
@@ -20,10 +22,14 @@ function CompendiumHeader({ type, header, children }: inputProps): ReactElement
<Container>
<Row>
<Col sm={8}>
- {header}
+ <h1 className={'bold-caps-30pt'} style={{'marginTop': '0.5rem'}}>
+ <Link to={type === 'data' ? "/data" : "/"} style={{ textDecoration: 'none', color: 'white' }}>
+ <span>Compendium {type === 'data' ? 'Data' : 'Reports'}</span>
+ </Link>
+ </h1>
</Col>
<Col sm={4}>
- {children}
+ <SectionLink section={"Reports"} />
</Col>
</Row>
</Container>
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
index 0ec005d6..4563fb1b 100644
--- a/webapp/src/pages/CompendiumData.tsx
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
import { Container, Row } from "react-bootstrap";
import CollapsibleBox from "../components/CollapsibleBox";
import PageHeader from "../components/global/PageHeader"
-import SectionLink from "../components/global/SectionLink";
import Banner from "../components/global/Banner";
import { Link } from "react-router-dom";
import { Sections } from "../helpers/constants";
@@ -10,13 +9,7 @@ import { Sections } from "../helpers/constants";
function CompendiumData(): ReactElement {
return (
<main className="content" style={{ backgroundColor: "white" }}>
- <PageHeader type={'data'} header={<h1 className={'bold-caps-30pt'}>
- <Link to="/data" style={{ textDecoration: 'none', color: 'white' }}>
- <span>Compendium Data</span>
- </Link>
- </h1>}>
- <SectionLink section={"Reports"} />
- </PageHeader>
+ <PageHeader type={'data'}/>
<Banner type={'data'}>
<p className="wordwrap">
The GÉANT Compendium provides an authoritative reference source for anyone with an
--
GitLab