Skip to content
Snippets Groups Projects
Commit bebe7c43 authored by Remco Tukker's avatar Remco Tukker
Browse files

merge develop into branch

parents 7f6a97c9 7f4a14fb
No related branches found
No related tags found
1 merge request!2Feature/comp 116 initial filter mechanism
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 223 additions and 199 deletions
compendium_v2/static/bundle.js
+ 1
− 1
View file @ bebe7c43
This diff is collapsed.
webapp/src/App.tsx
+ 4
− 3
View file @ bebe7c43
......@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Landing from "./pages/Landing";
import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
import About from "./pages/About";
import GeantFooter from "./components/global/GeantFooter";
import DataAnalysis from "./pages/DataAnalysis";
import AnnualReport from "./pages/AnnualReport";
import CompendiumData from "./pages/CompendiumData";
......@@ -16,12 +16,11 @@ function App(): ReactElement {
const [filterSelection, setFilterSelection] = useState<FilterSelection>({ selectedYears: [], selectedNrens: [] });
return (
<div>
<div className="app">
<Router>
<ExternalPageNavBar />
<Routes>
<Route path="/data" element={<CompendiumData />} />
<Route path="/about" element={<About />} />
<Route path="/analysis" element={<DataAnalysis
filterSelection={filterSelection}
setFilterSelection={setFilterSelection}/>}
......@@ -34,7 +33,9 @@ function App(): ReactElement {
<Route path="/charging" element={<ChargingStructurePage />} />
<Route path="*" element={<Landing />} />
</Routes>
<GeantFooter/>
</Router>
</div>
);
}
......
webapp/src/Navigation.tsx deleted 100644 → 0
+ 0
− 37
View file @ 7f6a97c9
import React, {ReactElement} from 'react';
import {Link} from 'react-router-dom'
// const api_url = window.location.origin+'/';
// console.log(api_url)
function Navigation(): ReactElement {
const navStyle ={
color: 'white'
}
return (
<nav className='header-naviagtion'>
<ul className='nav-links'>
<li>
<Link style={navStyle} to="/about">
About
</Link>
</li>
<li>
<Link style={navStyle} to="/report">
Annual Report
</Link>
</li>
<li>
<Link style={navStyle} to="/analysis">
Data Analysis
</Link>
</li>
</ul>
</nav>
);
}
export default Navigation;
webapp/src/components/global/ExternalPageFooter.tsx deleted 100644 → 0
+ 0
− 9
View file @ 7f6a97c9
import React, {ReactElement} from "react";
function ExternalPageFooter(): ReactElement {
return (<div>
</div>);
}
export default ExternalPageFooter
\ No newline at end of file
webapp/src/components/global/ExternalPageNavBar.tsx
+ 17
− 16
View file @ bebe7c43
import React, {ReactElement} from "react";
import {Container, Row, Col} from "react-bootstrap";
import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import GeantLogo from "../../images/geant_logo_f2020_new.svg";
/**
......@@ -14,22 +14,23 @@ function ExternalPageNavBar(): ReactElement {
<Container>
<Row>
<Col>
<img src={GeantLogo}/>
<nav>
<a href="/"><img src={GeantLogo} /></a>
<ul>
<li><a href="https://network.geant.org/">NETWORK</a></li>
<li><a href="https://geant.org/services/">SERVICES</a></li>
<li><a href="https://community.geant.org/">COMMUNITY</a></li>
<li><a href="https://tnc23.geant.org/">TNC</a></li>
<li><a href="https://geant.org/projects/">PROJECTS</a></li>
<li><a href="https://connect.geant.org/">CONNECT</a></li>
<li><a href="https://impact.geant.org/">IMPACT</a></li>
<li><a href="https://careers.geant.org/">CAREERS</a></li>
<li><a href="https://about.geant.org/">ABOUT</a></li>
<li><a href="https://connect.geant.org/community-news">NEWS</a></li>
<li><a href="https://resources.geant.org/">RESOURCES</a></li>
<li><a href="https://network.geant.org/">NETWORK</a></li>
<li><a href="https://geant.org/services/">SERVICES</a></li>
<li><a href="https://community.geant.org/">COMMUNITY</a></li>
<li><a href="https://tnc23.geant.org/">TNC</a></li>
<li><a href="https://geant.org/projects/">PROJECTS</a></li>
<li><a href="https://connect.geant.org/">CONNECT</a></li>
<li><a href="https://impact.geant.org/">IMPACT</a></li>
<li><a href="https://careers.geant.org/">CAREERS</a></li>
<li><a href="https://about.geant.org/">ABOUT</a></li>
<li><a href="https://connect.geant.org/community-news">NEWS</a></li>
<li><a href="https://resources.geant.org/">RESOURCES</a></li>
</ul>
</Col>
</nav>
</Row>
</Container>
</div>
......
webapp/src/components/global/GeantFooter.tsx 0 → 100644
+ 50
− 0
View file @ bebe7c43
import React, { ReactElement } from "react";
import { Container, Row, Col } from "react-bootstrap";
import GeantLogo from "../../images/geant_logo_colored.svg";
import EULogo from "../../images/eu_logo.png";
function GeantFooter(): ReactElement {
return <footer className="page-footer">
<Container>
<Row>
<Col align="left">
<h5 style={{ color: "#fff" }}>GÉANT Compendium</h5>
<p style={{ color: "#f5f5f5" }}>The global reach of the GÉANT network enables scientists and academics in Europe to exchange data and collaborate with their peers across the world through links to National Research and Education Networks in 65 countries around the world.</p>
<p style={{ color: "#f5f5f5" }}>To learn more about the organisations that make up the GÉANT community, navigate the reports presented on this site.</p>
</Col>
</Row>
</Container>
<Container>
<Row>
<div>
<p style={{ color: "#f5f5f5" }}>
The project is co-funded by Europe's NRENs and the EU.
</p>
</div>
<Row>
<div>
<img src={EULogo} />
</div>
</Row>
<Row>
<div className="col s1">
<a href="https://geant.org">
<img src={GeantLogo} style={{maxWidth: "100px", paddingTop:"20px"}} />
</a>
</div>
<div className="col s10 offset-s1">
<p style={{ color: "#f5f5f5" }}>
The contents of this site are the sole responsibility
of GÉANT and can under no circumstances be regarded
as reflecting the views of the European Union</p>
</div>
</Row>
</Row>
</Container>
</footer>;
}
export default GeantFooter
\ No newline at end of file
webapp/src/images/eu_logo.png 0 → 100644
+ 0
− 0
View file @ bebe7c43
webapp/src/images/eu_logo.png

8.88 KiB

webapp/src/images/geant_logo_colored.svg 0 → 100644
+ 40
− 0
View file @ bebe7c43
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 140 61" style="enable-background:new 0 0 140 61;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#E5004B;}
</style>
<g>
<g>
<g>
<path class="st0" d="M28.9,31.6c1-0.8,1.9-1.2,2.7-1.2c1.7,0.1,2.2,1.2,2.3,1.9c-0.4,0.1-7.8,2.6-8.2,2.7
c-0.1-0.1-0.2-0.3-0.4-0.4C25.8,34.4,28.9,31.6,28.9,31.6z"/>
<path class="st0" d="M1.5,47.5c0,8.4,3.7,12.7,11,12.7c4.8,0,7.7-2.1,7.8-2.2l0.2-0.2V46.2H10.5v3.2c0,0,5,0,6,0c0,0.9,0,6,0,6.5
c-0.6,0.3-2.1,1-4.2,1c-4.3,0-6.4-3.1-6.4-9.4c0-3.6,1-8,6-8c3.3,0,4.4,1.9,4.4,3.7v0.6h4.5v-0.6c0-4.1-3.6-6.9-8.9-6.9
C5.2,36.3,1.5,40.4,1.5,47.5z"/>
<path class="st0" d="M36.4,36.7H23.2v23.1h14.1v-3.2c0,0-9,0-10,0c0-0.9,0-6.3,0-7.3c1,0,9.2,0,9.2,0v-3.2c0,0-8.2,0-9.2,0
c0-0.9,0-5.3,0-6.2c1,0,9.7,0,9.7,0v-3.2H36.4z"/>
<g>
<path class="st0" d="M95.8,36.7h-20c0,0,0,13.9,0,17.1c-1.6-2.8-9.9-17.1-9.9-17.1h-4.7v23.1h3.9c0,0,0-13.9,0-17.1
c1.6,2.8,9.9,17.1,9.9,17.1h4.7c0,0,0-18.8,0-19.9c0.9,0,5.5,0,6.4,0c0,1.1,0,19.9,0,19.9h4.1c0,0,0-18.8,0-19.9
c0.9,0,6.2,0,6.2,0v-3.2H95.8z"/>
</g>
<path class="st0" d="M51.5,36.7h-0.4h-4l-8.7,23.1h4.2c0,0,2.3-6.1,2.5-6.8c0.7,0,7.8,0,8.5,0c0.3,0.7,2.6,6.8,2.6,6.8h4.2
L51.5,36.7z M46.3,49.8c0.4-1.1,2.3-6.7,3-8.7c0.7,2,2.6,7.5,3,8.7C51.2,49.8,47.4,49.8,46.3,49.8z"/>
</g>
<g>
<path class="st0" d="M134.7,14.7c-15.2-18.8-76.9,7.8-93.4,14.8c-1.2,0.5-2.7,0.4-3.6-1.3c0.7,1.7,2,2.3,3.7,1.7
c22-8.8,75.2-27.9,88.5-10.5c6,7.9,4.3,17.6-2.3,31.3c-0.3,0.6-0.5,1-0.6,1.1c0,0,0,0.1-0.1,0.1c0,0,0,0.1-0.1,0.1
c-0.5,0.8-1.2,1.3-1.8,1.5c0.8,0,1.6-0.4,2.2-1.4c0.2-0.3,0.4-0.6,0.6-1l0,0C137.7,34.7,141.1,22.5,134.7,14.7z"/>
</g>
<g>
<path class="st1" d="M123.2,52.6c-0.2-0.2-3-2.6-5.7-5.2C103,33.8,59.4-8.4,40.3,2.7c-5.4,3.1-6.3,12.2-3,24.3c0,0,0,0,0,0.1v0
c0,0.2,0.1,0.3,0.1,0.5c0.4,1.3,1.3,2.1,2.4,2.1c-0.8-0.2-1.5-0.8-1.9-1.8c-0.1-0.1-0.1-0.3-0.1-0.4c-0.1-0.2-0.1-0.4-0.2-0.7
l0,0c0-0.1-0.1-0.3-0.1-0.4c-1.8-10.3,0.4-17,4.5-19.8c15.3-10,52,21.6,70.4,37.5c4.2,3.7,9,7.7,10.5,8.8c2.1,1.6,3.8-0.2,4.3-1
C126.6,53,124.8,54,123.2,52.6z"/>
</g>
</g>
</g>
</svg>
webapp/src/main.scss
+ 29
− 78
View file @ bebe7c43
@import 'scss/base/text';
@import 'scss/layout/components';
table {
min-width: 650px;
}
thead {
background-color: lightgray;
}
.state_true {
background-color: lightgreen;
}
.state_false {
background-color: red;
}
$border-color: #064c6e !default;
$text-color: #377592 !default;
$queue_link_hover: #ffffff !default;
.title-background {
background-image: url("images/compendium_header.png");
background-color: #064c6e;
vertical-align: center;
padding-bottom: 15px;
padding-bottom: 15px;
}
$footer-height: 75px !default;
.footer-img {
width: 55px;
height: 38px
}
.footer {
margin-top: 8px;
background-color: #064c6e;
font-size: 8px;
height: 75px;
color: black;
width: 100%;
padding: 15px;
clear: both;
}
.footer-text {
color: white;
margin-left: 30px;
}
.px {
padding-left: 55px;
}
.header-naviagtion {
display: flex;
justify-content: space-around;
align-items: center;
min-width: 10vh;
background: #064c6e;
color: white
}
.nav-links {
width: 50%;
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
.external-page-nav-bar {
background-color: #003753;
color: #b0cde1;
padding-top: 10px;
height: 60px;
display: flex;
-webkit-box-align: center;
align-items: center;
img {
float: left;
margin-right: 15px;
}
ul {
line-height: 1.3;
text-transform: uppercase;
list-style: none;
float: left;
margin-bottom: 0;
li {
float: left;
padding: 10px;
a {
border-radius: 2px;
float: left;
font-family: "Open Sans";
font-size: 14px;
font-weight: 400;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
color: #b0cde1;
padding: 10px;
}
a:hover {
color: #003753;
background-color: #b0cde1;
}
}
}
}
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
}
\ No newline at end of file
webapp/src/pages/About.tsx deleted 100644 → 0
+ 0
− 21
View file @ 7f6a97c9
import React, { ReactElement } from 'react';
// import AnnualReport from './AnnualReport';
// import DataAnalysis from './DataAnalysis';
// import Navigation from './Navigation';
// const api_url = window.location.origin+'/';
// console.log(api_url)
function About(): ReactElement {
return (
<div>
<h1>About Page</h1>
</div>
);
}
export default About;
webapp/src/pages/CompendiumData.tsx
+ 11
− 11
View file @ bebe7c43
......@@ -8,39 +8,39 @@ import { Link } from "react-router-dom";
function CompendiumData(): ReactElement {
return (
<main style={{ backgroundColor: "white" }}>
<main className="content" style={{ backgroundColor: "white" }}>
<PageHeader type={'data'} header={'Compendium Data'}>
<SectionLink section={"Reports"} />
</PageHeader>
<Banner type={'data'}>
<p className="wordwrap">
<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>
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' }}>
<Link to="/analysis" className="link-text-underline">
<span>Budget of NRENs per Year</span>
</Link>
</Row>
<Row>
<Link to="/funding" state={{ graph: 'fundingsources' }}>
<Link to="/funding" className="link-text-underline">
<span>Income Source of NRENs per Year</span>
</Link>
</Row>
<Row>
<Link to="/charging" state={{ graph: 'charging_structure' }}>
<Link to="/charging" className="link-text-underline">
<span>Charging Mechanism of NRENs per Year</span>
</Link>
</Row>
......
webapp/src/pages/Landing.tsx
+ 24
− 21
View file @ bebe7c43
......@@ -11,16 +11,19 @@ function Landing(): ReactElement {
<div className="center-text max-width-100vw">
<h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
<br />
<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>
<p className="wordwrap">
This site captures the responses from the National Research and Education Networks
themselves.
</p>
<div className="wordwrap">
<p>
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>
<p>
This site captures the responses from the National Research and Education Networks
themselves.
</p>
</div>
</div>
</Row>
<Row>
......@@ -33,7 +36,7 @@ function Landing(): ReactElement {
<Col align={"center"}>
<Card border='light' style={{ width: "18rem" }}>
<Link to="/data" style={{textDecoration:"none"}}>
<Link to="/data" className="link-text" >
<Card.Img src={SectionDataLogo} />
<Card.Body>
<Card.Title>Compendium Data</Card.Title>
......@@ -48,16 +51,16 @@ function Landing(): ReactElement {
</Col>
<Col align={"center"}>
<Card border='light' style={{ width: "18rem" }}>
<a href="https://resources.geant.org/geant-compendia/" style={{textDecoration:"none"}}>
<Card.Img src={SectionReportsLogo} />
<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.Body>
<a href="https://resources.geant.org/geant-compendia/" className="link-text" target="_blank">
<Card.Img src={SectionReportsLogo} />
<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.Body>
</a>
</Card>
</Col>
......
webapp/src/scss/layout/_components.scss
+ 47
− 2
View file @ bebe7c43
......@@ -7,7 +7,9 @@
.geant-container {
max-width: 100vw;
height: 100vh;
min-height: 95%;
height: auto;
padding: 2% 0;
}
......@@ -17,10 +19,23 @@
}
.wordwrap {
max-width: 30vw;
max-width: 40vw;
word-wrap: break-word;
}
@media screen and (max-aspect-ratio: 1/1) {
.wordwrap {
max-width: max(66vw, 66%);
}
}
@media screen and (max-width: 1920px) {
.wordwrap {
max-width: 50%;
}
}
.center {
display: flex;
align-items: center;
......@@ -68,4 +83,34 @@
.collapsible-column {
flex-basis: 100%;
padding: 1rem;
}
@mixin linkHover {
&:hover{
color: #003753
}
}
.link-text{
text-decoration: none;
color: #003753;
@include linkHover;
}
.link-text-underline {
@extend .link-text;
}
.link-text-underline:hover {
text-decoration: underline;
}
.page-footer {
min-height: 350px;
width: 100%;
bottom:0;
justify-content: center;
align-items: center;
padding-top: 20px;
background-color: #3b536b;
}
\ 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