From e7e4fe0311ec5d45aaabd0e02b1c985984620cb9 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Tue, 21 Feb 2023 14:31:08 +0100
Subject: [PATCH] Build components used for CompendiumData/Reports
---
webapp/src/components/CollapsibleBox.tsx | 25 +++--
webapp/src/components/global/Banner.tsx | 44 ++++++++
webapp/src/components/global/PageHeader.tsx | 34 ++++++
webapp/src/components/global/SectionLink.tsx | 18 +++
webapp/src/pages/CompendiumData.tsx | 110 ++++++++++++-------
webapp/src/scss/base/_text.scss | 4 +
webapp/src/scss/layout/_components.scss | 39 ++++++-
7 files changed, 224 insertions(+), 50 deletions(-)
create mode 100644 webapp/src/components/global/Banner.tsx
create mode 100644 webapp/src/components/global/PageHeader.tsx
create mode 100644 webapp/src/components/global/SectionLink.tsx
diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 982fe704..52c45e47 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 00000000..75c3e63e
--- /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 00000000..a4756171
--- /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 00000000..7bcba6ce
--- /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 375f02f6..901f25a0 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 30970f41..85e57c5a 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 7b562dfb..06a091b9 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
--
GitLab