diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 47484aa34e3e06488dea7ace6f274c5dd2616f95..1aec573e911a4336b48ea2648e1bf9b8c01b35da 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -6,6 +6,7 @@ import ExternalPageNavBar from "./components/global/ExternalPageNavBar"; import About from "./pages/About"; import DataAnalysis from "./pages/DataAnalysis"; import AnnualReport from "./pages/AnnualReport"; +import CompendiumData from "./pages/CompendiumData"; function App(): ReactElement { return ( @@ -15,6 +16,7 @@ function App(): ReactElement { <Landing /> */} <Navigation /> <Routes> + <Route path="/data" element={<CompendiumData />} /> <Route path="/about" element={<About />} /> <Route path="/analysis" element={<DataAnalysis />} /> <Route path="/report" element={<AnnualReport />} /> diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx new file mode 100644 index 0000000000000000000000000000000000000000..982fe704e4014a40accc847abcd335d97ebd116f --- /dev/null +++ b/webapp/src/components/CollapsibleBox.tsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; + +interface CollapsibleBoxProps { + title: string; + children: React.ReactNode; +} + +const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => { + const [isCollapsed, setIsCollapsed] = useState(false); + + return ( + <div style={{ border: '3px solid #003F5F', display: 'flex', maxWidth: '50vw' }}> + + {!isCollapsed && <div> + <h1 className="geant-header">{title}</h1> + {children} + </div> || + <h1 className="geant-header">{title}</h1>} + <button style={{ marginLeft: 'auto' }} onClick={() => setIsCollapsed(!isCollapsed)}> + {isCollapsed ? 'Expand' : 'Collapse'} + </button> + </div> + ); +}; + +export default CollapsibleBox; diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx index 1247c5f9a120460cf663a830a48a70d678c25a51..1be857a35126b31a590be82a50dde1c37e34609c 100644 --- a/webapp/src/index.tsx +++ b/webapp/src/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import App from "./App"; -import './styles.scss'; import 'bootstrap/dist/css/bootstrap.min.css'; +import './main.scss'; const container = document.getElementById('root') as HTMLElement; const root = createRoot(container); diff --git a/webapp/src/styles.scss b/webapp/src/main.scss similarity index 95% rename from webapp/src/styles.scss rename to webapp/src/main.scss index 76aced2f548085f402320042f9fa75f2a1bbb7c5..344351c4ba49a87d297fc380804c9df851e99674 100644 --- a/webapp/src/styles.scss +++ b/webapp/src/main.scss @@ -1,3 +1,6 @@ +@import 'scss/base/text'; +@import 'scss/layout/components'; + table { min-width: 650px; } diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx new file mode 100644 index 0000000000000000000000000000000000000000..375f02f61bd54d28dae5baea4fc779ac96d96cb2 --- /dev/null +++ b/webapp/src/pages/CompendiumData.tsx @@ -0,0 +1,68 @@ +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"; + +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"> + 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"> + + <CollapsibleBox title="ORGANISATION"> + + <Col align="left"> + <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> + </Col> + <Col align="right"> + <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> + </Col> + </CollapsibleBox> + </div> + + </Row> + </Container> + ); +} + +export default CompendiumData; diff --git a/webapp/src/pages/Landing.tsx b/webapp/src/pages/Landing.tsx index 873733b1801a54d262becc0a9d258718239b82a1..718ce21f3fcd1e163baae406fe0c740313ecf1f8 100644 --- a/webapp/src/pages/Landing.tsx +++ b/webapp/src/pages/Landing.tsx @@ -1,48 +1,54 @@ -import React, {ReactElement} from "react"; -import {Card, Container, Row, Col} from "react-bootstrap"; +import React, { ReactElement } from "react"; +import { Card, Container, Row, Col } from "react-bootstrap"; import SectionDataLogo from "../images/section_data_large.png"; import SectionReportsLogo from "../images/section_reports_large.png"; function Landing(): ReactElement { return ( - <Container> - <Row className="justify-content-md-center"> - <Col align={'center'}> - THE GÉANT COMPENDIUM OF NRENS - <br/> - <p> - What the Compendium is, the history of it, the aim, what you can nd 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 + <Container className="grey-container"> + <Row> + <div className="center-text"> + <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1> + <br /> + <p className="wordwrap"> + 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> - </Col> + </div> </Row> <Row> <Col> - <Container> + <Container + style={{ backgroundColor: "white" }} + className="rounded-border" + > <Row className="justify-content-md-center"> - <Col align={'center'}> - <Card style={{ width: '18rem' }}> + <Col align={"center"}> + <Card style={{ width: "18rem" }}> <Card.Img src={SectionDataLogo}></Card.Img> <Card.Body> <Card.Title>Compendium Data</Card.Title> - <Card.Text>The results of the Compendium Surveys - lled in annually by NRENs. Questions cover - many topics: Network, Connected Users, - Services, Standards & Policies</Card.Text> + <Card.Text> + The results of the Compendium Surveys lled in annually by + NRENs. Questions cover many topics: Network, Connected + Users, Services, Standards & Policies + </Card.Text> </Card.Body> </Card> </Col> - <Col align={'center'}> - <Card style={{ width: '18rem' }}> + <Col align={"center"}> + <Card style={{ width: "18rem" }}> <Card.Img src={SectionReportsLogo}></Card.Img> <Card.Body> <Card.Title>Compendium Reports</Card.Title> - <Card.Text>A GÉANT Compendium Report is published - annually, drawing on data from the Compendium - Survey lled in by NRENs, complemented by - information from other surveys</Card.Text> + <Card.Text> + A GÉANT Compendium Report is published annually, drawing + on data from the Compendium Survey lled in by NRENs, + complemented by information from other surveys + </Card.Text> </Card.Body> </Card> </Col> @@ -54,4 +60,4 @@ function Landing(): ReactElement { ); } -export default Landing; \ No newline at end of file +export default Landing; diff --git a/webapp/src/scss/abstracts/_variables.scss b/webapp/src/scss/abstracts/_variables.scss new file mode 100644 index 0000000000000000000000000000000000000000..fbde7c7d93bddc6293aac46a9d182b79c3d06260 --- /dev/null +++ b/webapp/src/scss/abstracts/_variables.scss @@ -0,0 +1,10 @@ +$ash-grey: rgb(109, 110, 112); // #6D6E70 +$light-ash-grey: rgb(185, 190, 197); // #B9BEC5 +$light-off-white: rgb(234, 237, 243);// #EAEDF3 +$teal-green: rgb(42, 166, 156); // #2AA69C +$teal-blue: rgb(83, 187, 180); // #53BBB4 +$turquoise-blue: rgb(167, 220, 216); // #A7DCD8 +$yellow-orange: rgb(247, 158, 59); // #F79E3B +$yellow: rgb(250, 190, 102); // #FABE66 +$light-beige: rgb(252, 231, 201); // #FCE7C9 +$dark-teal: rgb(0, 63, 95); // #003F5F \ No newline at end of file diff --git a/webapp/src/scss/base/_text.scss b/webapp/src/scss/base/_text.scss new file mode 100644 index 0000000000000000000000000000000000000000..30970f41fcefa0311aa7cd360decef296d6ee1a1 --- /dev/null +++ b/webapp/src/scss/base/_text.scss @@ -0,0 +1,46 @@ +@import '../abstracts/variables'; + +.regular-17pt { + font-family: "Open Sans", sans-serif; + font-size: 17pt; + font-weight: normal; +} + +.bold-20pt { + font-family: "Open Sans", sans-serif; + font-size: 20pt; + font-weight: bold; +} + +.bold-caps-16pt { + font-family: "Open Sans", sans-serif; + font-size: 16pt; + font-weight: bold; + text-transform: uppercase; +} + +.bold-caps-17pt { + font-family: "Open Sans", sans-serif; + font-size: 17pt; + font-weight: bold; + text-transform: uppercase; +} + +.bold-caps-20pt { + font-family: "Open Sans", sans-serif; + font-size: 20pt; + font-weight: bold; + text-transform: uppercase; +} + +.bold-caps-30pt { + font-family: "Open Sans", sans-serif; + font-size: 30pt; + font-weight: bold; + text-transform: uppercase; +} + +.geant-header { + @extend .bold-caps-20pt; + color: $dark-teal; +} \ No newline at end of file diff --git a/webapp/src/scss/layout/_components.scss b/webapp/src/scss/layout/_components.scss new file mode 100644 index 0000000000000000000000000000000000000000..7b562dfb986a67b1424da9a0373d02eddce6ef6a --- /dev/null +++ b/webapp/src/scss/layout/_components.scss @@ -0,0 +1,33 @@ +@import '../abstracts/variables'; + +.rounded-border { + border-radius: 25px; + border: 1px solid $light-ash-grey +} + +.grey-container { + background-color: $light-off-white; + max-width: 100vw; + height: 100vh; + padding: 2% 0; +} + +.wordwrap { + max-width: 30vw; + word-wrap: break-word; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.center-text { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 2%; + max-width: 100vw; + flex-direction: column; +} \ No newline at end of file