Skip to content
Snippets Groups Projects
Commit a40d30f2 authored by Saket Agrahari's avatar Saket Agrahari
Browse files

COMP-113: clean up page

parent eaee03c5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
webapp/package-lock.json
+ 15
− 0
View file @ a40d30f2
......@@ -20,6 +20,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
"react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"devDependencies": {
......@@ -12475,6 +12476,14 @@
"react": "^18.2.0"
}
},
"node_modules/react-icons": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
"integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......@@ -23726,6 +23735,12 @@
"scheduler": "^0.23.0"
}
},
"react-icons": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
"integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
......
webapp/package.json
+ 1
− 0
View file @ a40d30f2
......@@ -53,6 +53,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
"react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"description": "## development environment",
......
webapp/src/components/CollapsibleBox.tsx
+ 4
− 3
View file @ a40d30f2
import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
import { GrAdd, GrSubtract } from 'react-icons/gr';
interface CollapsibleBoxProps {
title: string;
......@@ -16,9 +17,9 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
<h1 className="bold-caps-16pt dark-teal">{title}</h1>
</Col>
<Col align="right">
<button onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? 'Expand' : 'Collapse'}
</button>
<button className="expand-collapse-btn" onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? <GrAdd/> : <GrSubtract />}
</button>
</Col>
</Row>
......
webapp/src/pages/CompendiumData.tsx
+ 10
− 59
View file @ a40d30f2
......@@ -13,82 +13,33 @@ function CompendiumData(): ReactElement {
<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>
<p className="wordwrap">
The GÉANT Compendium provides an authoritative reference source for anyone with an
interest in the development of research and education networking in Europe and beyond.
Published since 2001, the Compendium provides information on key areas such as users,
services, traffic, budget and staffing.
</p>
</Banner>
<Container className="geant-container">
<Row>
<div className="center">
<CollapsibleBox title="ORGANISATION">
<div className="collapsible-column">
<Row>
<Link to="/analysis" state={{ graph: 'budget' }}>
<span>Length of NREN dark fibres leased by NRENs</span>
<span>Budget of NRENs per Year</span>
</Link>
</Row>
<Row>
<Link to="/funding" state={{ graph: 'fundingsources' }}>
<span>Length of dark fibres operated by NRENs outside their own countries</span>
<span>Income Source of NRENs per Year</span>
</Link>
</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>
<CollapsibleBox title="STANDARDS AND POLICES">
</CollapsibleBox>
</Row>
<Row>
<CollapsibleBox title="CONNECTED USERS">
</CollapsibleBox>
</Row>
<Row>
<CollapsibleBox title="NETWORK">
</CollapsibleBox>
</Row>
<Row>
<CollapsibleBox title="SERVICES">
</CollapsibleBox>
</Row>
</div>
</Row>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment