diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 982fe704e4014a40accc847abcd335d97ebd116f..52c45e478bf8ee7eb1ec1b542e65150d94ba29ce 100644
--- a/webapp/src/components/CollapsibleBox.tsx
+++ b/webapp/src/components/CollapsibleBox.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { Col, Row } from 'react-bootstrap';
interface CollapsibleBoxProps {
title: string;
@@ -9,16 +10,24 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
const [isCollapsed, setIsCollapsed] = useState(false);
return (
- <div style={{ border: '3px solid #003F5F', display: 'flex', maxWidth: '50vw' }}>
+ <div className='collapsible-box'>
+ <Row>
+ <Col>
+ <h1 className="bold-caps-16pt dark-teal">{title}</h1>
+ </Col>
+ <Col align="right">
+ <button onClick={() => setIsCollapsed(!isCollapsed)}>
+ {isCollapsed ? 'Expand' : 'Collapse'}
+ </button>
+ </Col>
+ </Row>
- {!isCollapsed && <div>
- <h1 className="geant-header">{title}</h1>
+
+
+ {!isCollapsed && <div className='collapsible-content'>
{children}
- </div> ||
- <h1 className="geant-header">{title}</h1>}
- <button style={{ marginLeft: 'auto' }} onClick={() => setIsCollapsed(!isCollapsed)}>
- {isCollapsed ? 'Expand' : 'Collapse'}
- </button>
+ </div>}
+
</div>
);
};
diff --git a/webapp/src/components/global/Banner.tsx b/webapp/src/components/global/Banner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..75c3e63e220c24914a4fd6f93b14700a9605f689
--- /dev/null
+++ b/webapp/src/components/global/Banner.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import SectionDataLogo from "../../images/section_data_large.png";
+
+
+interface inputProps {
+ type: string,
+ children: ReactElement
+}
+
+function Banner({ children, type }: inputProps): ReactElement {
+ let className = ''
+ if (type == 'data') {
+ className += ' compendium-data-banner'
+ } else if (type == 'reports') {
+ className = ' compendium-reports-banner'
+ }
+ return (
+ <div className={className}>
+
+ <Container>
+ <Row>
+ <Col sm={8}>
+ <Row>
+ <Col sm={2}>
+ <img src={SectionDataLogo} style={{ maxWidth: '80%' }} />
+ </Col>
+
+ <Col sm={8}>
+ <div className="center-text">
+ {children}
+ </div>
+
+ </Col>
+ </Row>
+ </Col>
+
+ </Row>
+ </Container>
+ </div>
+ );
+}
+
+export default Banner;
diff --git a/webapp/src/components/global/PageHeader.tsx b/webapp/src/components/global/PageHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a47561710c6f022f605a7dcd86bf62005cdba865
--- /dev/null
+++ b/webapp/src/components/global/PageHeader.tsx
@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+
+interface inputProps {
+ type: string,
+ header: string,
+ children: ReactElement
+}
+
+function CompendiumHeader({ type, header, children }: inputProps): ReactElement {
+ let className = ''
+ if (type == 'data') {
+ className += ' compendium-data-header'
+ } else if (type == 'reports') {
+ className = ' compendium-reports-header'
+ }
+ return (
+ <div className={className}>
+
+ <Container>
+ <Row>
+ <Col sm={8}>
+ <h1 className={'bold-caps-30pt '}>{header}</h1>
+ </Col>
+ <Col sm={4}>
+ {children}
+ </Col>
+ </Row>
+ </Container>
+ </div>
+ );
+}
+
+export default CompendiumHeader;
\ No newline at end of file
diff --git a/webapp/src/components/global/SectionLink.tsx b/webapp/src/components/global/SectionLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7bcba6ce3b34362f1ccb309b3823deadfae60f57
--- /dev/null
+++ b/webapp/src/components/global/SectionLink.tsx
@@ -0,0 +1,18 @@
+
+
+import React, { ReactElement } from "react";
+
+interface inputProps {
+ section: string
+}
+
+function SectionLink({ section }: inputProps): ReactElement {
+ return (
+ <div style={{ float: "right" }} className={'bold-caps-20pt'}>
+ <span>Compendium</span><br />
+ <span style={{ float: "right" }}>{section}</span>
+ </div>
+ );
+}
+
+export default SectionLink;
\ No newline at end of file
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
index 375f02f61bd54d28dae5baea4fc779ac96d96cb2..901f25a00503caa6aa77f37d0a41dbdee429cde1 100644
--- a/webapp/src/pages/CompendiumData.tsx
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -1,67 +1,97 @@
import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
-import SectionDataLogo from "../images/section_data_large.png";
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";
function CompendiumData(): ReactElement {
return (
- <Container className="grey-container">
- <Row>
- <div>
- <h1 className="geant-header">Compendium Data</h1>
- <h1 className="geant-header">Compendium<br />Reports</h1>
- </div>
- </Row>
- <Row>
- <img src={SectionDataLogo} style={{ maxWidth: '5%' }} />
- <p className="wordwrap">
+ <main style={{ backgroundColor: "white" }}>
+ <PageHeader type={'data'} header={'Compendium Data'}>
+ <SectionLink section={"Reports"} />
+ </PageHeader>
+ <Banner type={'data'}>
+ <p>
What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc
Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
tetur adi piscing elit, sed do eiusmod tempor inc
</p>
- </Row>
- <Row>
- <div className="center">
+ </Banner>
+ <Container className="geant-container">
+ <Row>
+ <div className="center">
- <CollapsibleBox title="ORGANISATION">
+ <CollapsibleBox title="ORGANISATION">
- <Col align="left">
- <Row>
- <span>Length of NREN dark fibres leased by NRENs</span>
- </Row>
+ <div className="collapsible-column">
+ <Row>
+ <Link to="/analysis" state={{ graph: 'budget' }}>
+ <span>Length of NREN dark fibres leased by NRENs</span>
+ </Link>
+ </Row>
- <Row>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
- </Row>
+ <Row>
+ <span>Length of dark fibres operated by NRENs outside their own countries</span>
+ </Row>
+ <Row>
+ <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+ </Row>
+ <Row>
+ <span>Length of of dark fibre cables laid by the NREN in their network</span>
+ </Row>
+ </div>
+ <div className="collapsible-column">
+ <Row>
+ <span>Length of NREN dark fibres leased by NRENs</span>
+ </Row>
+
+ <Row>
+ <span>Length of dark fibres operated by NRENs outside their own countries</span>
+ </Row>
+
+ <Row>
+ <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+ </Row>
+ <Row>
+ <span>Length of of dark fibre cables laid by the NREN in their network</span>
+ </Row>
+ </div>
+ </CollapsibleBox>
<Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
- </Row>
- <Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
- </Row>
- </Col>
- <Col align="right">
- <Row>
- <span>Length of NREN dark fibres leased by NRENs</span>
+ <CollapsibleBox title="STANDARDS AND POLICES">
+
+ </CollapsibleBox>
</Row>
+
<Row>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
+ <CollapsibleBox title="CONNECTED USERS">
+
+ </CollapsibleBox>
</Row>
+
<Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+ <CollapsibleBox title="NETWORK">
+
+ </CollapsibleBox>
</Row>
+
+
<Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
+ <CollapsibleBox title="SERVICES">
+
+ </CollapsibleBox>
</Row>
- </Col>
- </CollapsibleBox>
- </div>
-
- </Row>
- </Container>
+
+ </div>
+
+ </Row>
+ </Container>
+ </main>
);
}
diff --git a/webapp/src/scss/base/_text.scss b/webapp/src/scss/base/_text.scss
index 30970f41fcefa0311aa7cd360decef296d6ee1a1..85e57c5a42a2ef02ceb2a7f297149dcea67d1f40 100644
--- a/webapp/src/scss/base/_text.scss
+++ b/webapp/src/scss/base/_text.scss
@@ -40,6 +40,10 @@
text-transform: uppercase;
}
+.dark-teal {
+ color: $dark-teal
+}
+
.geant-header {
@extend .bold-caps-20pt;
color: $dark-teal;
diff --git a/webapp/src/scss/layout/_components.scss b/webapp/src/scss/layout/_components.scss
index 7b562dfb986a67b1424da9a0373d02eddce6ef6a..06a091b95221d62301e54ab81335cdebdf4a42d5 100644
--- a/webapp/src/scss/layout/_components.scss
+++ b/webapp/src/scss/layout/_components.scss
@@ -5,13 +5,17 @@
border: 1px solid $light-ash-grey
}
-.grey-container {
- background-color: $light-off-white;
+.geant-container {
max-width: 100vw;
height: 100vh;
padding: 2% 0;
}
+.grey-container {
+ @extend .geant-container;
+ background-color: $light-off-white;
+}
+
.wordwrap {
max-width: 30vw;
word-wrap: break-word;
@@ -21,6 +25,7 @@
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
}
.center-text {
@@ -30,4 +35,34 @@
padding-bottom: 2%;
max-width: 100vw;
flex-direction: column;
+}
+
+.compendium-data-header {
+ background-color: $yellow;
+ color: white;
+ padding: 10px;
+}
+
+.compendium-data-banner {
+ background-color: $light-beige;
+ color: $dark-teal;
+ padding: 5px;
+ padding-top: 25px;
+}
+
+.collapsible-box {
+ margin: 1rem;
+ border: 2px solid $yellow;
+ padding: 10px;
+ width: 80rem;
+ max-width: 50vw;
+}
+
+.collapsible-content {
+ display: flex;
+}
+
+.collapsible-column {
+ flex-basis: 100%;
+ padding: 1rem;
}
\ No newline at end of file