Skip to content
Snippets Groups Projects
Commit e7e4fe03 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

Build components used for CompendiumData/Reports

parent c6d4fa9b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 224 additions and 50 deletions
webapp/src/components/CollapsibleBox.tsx
+ 17
− 8
View file @ e7e4fe03
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
interface CollapsibleBoxProps { interface CollapsibleBoxProps {
title: string; title: string;
...@@ -9,16 +10,24 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => { ...@@ -9,16 +10,24 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
const [isCollapsed, setIsCollapsed] = useState(false); const [isCollapsed, setIsCollapsed] = useState(false);
return ( 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} {children}
</div> || </div>}
<h1 className="geant-header">{title}</h1>}
<button style={{ marginLeft: 'auto' }} onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? 'Expand' : 'Collapse'}
</button>
</div> </div>
); );
}; };
......
webapp/src/components/global/Banner.tsx 0 → 100644
+ 44
− 0
View file @ e7e4fe03
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;
webapp/src/components/global/PageHeader.tsx 0 → 100644
+ 34
− 0
View file @ e7e4fe03
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
webapp/src/components/global/SectionLink.tsx 0 → 100644
+ 18
− 0
View file @ e7e4fe03
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
webapp/src/pages/CompendiumData.tsx
+ 70
− 40
View file @ e7e4fe03
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import SectionDataLogo from "../images/section_data_large.png";
import CollapsibleBox from "../components/CollapsibleBox"; 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 { function CompendiumData(): ReactElement {
return ( return (
<Container className="grey-container"> <main style={{ backgroundColor: "white" }}>
<Row> <PageHeader type={'data'} header={'Compendium Data'}>
<div> <SectionLink section={"Reports"} />
<h1 className="geant-header">Compendium Data</h1> </PageHeader>
<h1 className="geant-header">Compendium<br />Reports</h1> <Banner type={'data'}>
</div> <p>
</Row>
<Row>
<img src={SectionDataLogo} style={{ maxWidth: '5%' }} />
<p className="wordwrap">
What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc 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 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 tetur adi piscing elit, sed do eiusmod tempor inc
</p> </p>
</Row> </Banner>
<Row> <Container className="geant-container">
<div className="center"> <Row>
<div className="center">
<CollapsibleBox title="ORGANISATION"> <CollapsibleBox title="ORGANISATION">
<Col align="left"> <div className="collapsible-column">
<Row> <Row>
<span>Length of NREN dark fibres leased by NRENs</span> <Link to="/analysis" state={{ graph: 'budget' }}>
</Row> <span>Length of NREN dark fibres leased by NRENs</span>
</Link>
</Row>
<Row> <Row>
<span>Length of dark fibres operated by NRENs outside their own countries</span> <span>Length of dark fibres operated by NRENs outside their own countries</span>
</Row> </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> <Row>
<span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span> <CollapsibleBox title="STANDARDS AND POLICES">
</Row>
<Row> </CollapsibleBox>
<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>
</Row> </Row>
<Row> <Row>
<span>Length of dark fibres operated by NRENs outside their own countries</span> <CollapsibleBox title="CONNECTED USERS">
</CollapsibleBox>
</Row> </Row>
<Row> <Row>
<span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span> <CollapsibleBox title="NETWORK">
</CollapsibleBox>
</Row> </Row>
<Row> <Row>
<span>Length of of dark fibre cables laid by the NREN in their network</span> <CollapsibleBox title="SERVICES">
</CollapsibleBox>
</Row> </Row>
</Col>
</CollapsibleBox> </div>
</div>
</Row>
</Row> </Container>
</Container> </main>
); );
} }
......
webapp/src/scss/base/_text.scss
+ 4
− 0
View file @ e7e4fe03
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
text-transform: uppercase; text-transform: uppercase;
} }
.dark-teal {
color: $dark-teal
}
.geant-header { .geant-header {
@extend .bold-caps-20pt; @extend .bold-caps-20pt;
color: $dark-teal; color: $dark-teal;
......
webapp/src/scss/layout/_components.scss
+ 37
− 2
View file @ e7e4fe03
...@@ -5,13 +5,17 @@ ...@@ -5,13 +5,17 @@
border: 1px solid $light-ash-grey border: 1px solid $light-ash-grey
} }
.grey-container { .geant-container {
background-color: $light-off-white;
max-width: 100vw; max-width: 100vw;
height: 100vh; height: 100vh;
padding: 2% 0; padding: 2% 0;
} }
.grey-container {
@extend .geant-container;
background-color: $light-off-white;
}
.wordwrap { .wordwrap {
max-width: 30vw; max-width: 30vw;
word-wrap: break-word; word-wrap: break-word;
...@@ -21,6 +25,7 @@ ...@@ -21,6 +25,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
} }
.center-text { .center-text {
...@@ -30,4 +35,34 @@ ...@@ -30,4 +35,34 @@
padding-bottom: 2%; padding-bottom: 2%;
max-width: 100vw; max-width: 100vw;
flex-direction: column; 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment