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

Merge branch 'feature/COMP-107-gui-loose-ends' into 'develop' 

Add some polish to various pages and update header / add a footer

See merge request !3
parents 2d98296b 7a6ff51b
No related branches found
No related tags found
1 merge request!3Add some polish to various pages and update header / add a footer
Hide whitespace changes
Inline Side-by-side
Showing
with 222 additions and 198 deletions
webapp/src/App.tsx
+ 4
− 3
View file @ 7f4a14fb
...@@ -2,7 +2,7 @@ import React, { ReactElement } from "react"; ...@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Landing from "./pages/Landing"; import Landing from "./pages/Landing";
import ExternalPageNavBar from "./components/global/ExternalPageNavBar"; import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
import About from "./pages/About"; import GeantFooter from "./components/global/GeantFooter";
import DataAnalysis from "./pages/DataAnalysis"; import DataAnalysis from "./pages/DataAnalysis";
import AnnualReport from "./pages/AnnualReport"; import AnnualReport from "./pages/AnnualReport";
import CompendiumData from "./pages/CompendiumData"; import CompendiumData from "./pages/CompendiumData";
...@@ -12,19 +12,20 @@ import ChargingStructurePage from "./pages/ChargingStructure"; ...@@ -12,19 +12,20 @@ import ChargingStructurePage from "./pages/ChargingStructure";
function App(): ReactElement { function App(): ReactElement {
return ( return (
<div> <div className="app">
<Router> <Router>
<ExternalPageNavBar /> <ExternalPageNavBar />
<Routes> <Routes>
<Route path="/data" element={<CompendiumData />} /> <Route path="/data" element={<CompendiumData />} />
<Route path="/about" element={<About />} />
<Route path="/analysis" element={<DataAnalysis />} /> <Route path="/analysis" element={<DataAnalysis />} />
<Route path="/report" element={<AnnualReport />} /> <Route path="/report" element={<AnnualReport />} />
<Route path="/funding" element={<FundingSourcePage />} /> <Route path="/funding" element={<FundingSourcePage />} />
<Route path="/charging" element={<ChargingStructurePage />} /> <Route path="/charging" element={<ChargingStructurePage />} />
<Route path="*" element={<Landing />} /> <Route path="*" element={<Landing />} />
</Routes> </Routes>
<GeantFooter/>
</Router> </Router>
</div> </div>
); );
} }
......
webapp/src/Navigation.tsx deleted 100644 → 0
+ 0
− 37
View file @ 2d98296b
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 @ 2d98296b
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 @ 7f4a14fb
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 GeantLogo from "../../images/geant_logo_f2020_new.svg"; import GeantLogo from "../../images/geant_logo_f2020_new.svg";
/** /**
...@@ -14,22 +14,23 @@ function ExternalPageNavBar(): ReactElement { ...@@ -14,22 +14,23 @@ function ExternalPageNavBar(): ReactElement {
<Container> <Container>
<Row> <Row>
<Col> <nav>
<img src={GeantLogo}/> <a href="/"><img src={GeantLogo} /></a>
<ul> <ul>
<li><a href="https://network.geant.org/">NETWORK</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://geant.org/services/">SERVICES</a></li>
<li><a href="https://community.geant.org/">COMMUNITY</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://tnc23.geant.org/">TNC</a></li>
<li><a href="https://geant.org/projects/">PROJECTS</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://connect.geant.org/">CONNECT</a></li>
<li><a href="https://impact.geant.org/">IMPACT</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://careers.geant.org/">CAREERS</a></li>
<li><a href="https://about.geant.org/">ABOUT</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://connect.geant.org/community-news">NEWS</a></li>
<li><a href="https://resources.geant.org/">RESOURCES</a></li> <li><a href="https://resources.geant.org/">RESOURCES</a></li>
</ul> </ul>
</Col> </nav>
</Row> </Row>
</Container> </Container>
</div> </div>
......
webapp/src/components/global/GeantFooter.tsx 0 → 100644
+ 50
− 0
View file @ 7f4a14fb
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 @ 7f4a14fb
webapp/src/images/eu_logo.png

8.88 KiB

webapp/src/images/geant_logo_colored.svg 0 → 100644
+ 40
− 0
View file @ 7f4a14fb
<?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 @ 7f4a14fb
@import 'scss/base/text'; @import 'scss/base/text';
@import 'scss/layout/components'; @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 { .external-page-nav-bar {
background-color: #003753; background-color: #003753;
color: #b0cde1; color: #b0cde1;
padding-top: 10px; height: 60px;
display: flex;
-webkit-box-align: center;
align-items: center;
img { img {
float: left; float: left;
margin-right: 15px;
} }
ul { ul {
line-height: 1.3;
text-transform: uppercase;
list-style: none; list-style: none;
float: left;
margin-bottom: 0;
li { li {
float: left; float: left;
padding: 10px;
a { a {
border-radius: 2px;
float: left;
font-family: "Open Sans"; font-family: "Open Sans";
font-size: 14px; font-size: 0.9rem;
font-weight: 400; font-weight: 600;
text-decoration: none; text-decoration: none;
color: #b0cde1; 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 @ 2d98296b
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 @ 7f4a14fb
...@@ -8,39 +8,39 @@ import { Link } from "react-router-dom"; ...@@ -8,39 +8,39 @@ import { Link } from "react-router-dom";
function CompendiumData(): ReactElement { function CompendiumData(): ReactElement {
return ( return (
<main style={{ backgroundColor: "white" }}> <main className="content" style={{ backgroundColor: "white" }}>
<PageHeader type={'data'} header={'Compendium Data'}> <PageHeader type={'data'} header={'Compendium Data'}>
<SectionLink section={"Reports"} /> <SectionLink section={"Reports"} />
</PageHeader> </PageHeader>
<Banner type={'data'}> <Banner type={'data'}>
<p className="wordwrap"> <p className="wordwrap">
The GÉANT Compendium provides an authoritative reference source for anyone with an 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. 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, Published since 2001, the Compendium provides information on key areas such as users,
services, traffic, budget and staffing. services, traffic, budget and staffing.
</p> </p>
</Banner> </Banner>
<Container className="geant-container"> <Container className="geant-container">
<Row> <Row>
<div className="center"> <div className="center">
<CollapsibleBox title="ORGANISATION"> <CollapsibleBox title="ORGANISATION">
<div className="collapsible-column"> <div className="collapsible-column">
<Row> <Row>
<Link to="/analysis" state={{ graph: 'budget' }}> <Link to="/analysis" className="link-text-underline" target="_blank">
<span>Budget of NRENs per Year</span> <span>Budget of NRENs per Year</span>
</Link> </Link>
</Row> </Row>
<Row> <Row>
<Link to="/funding" state={{ graph: 'fundingsources' }}> <Link to="/funding" className="link-text-underline" target="_blank">
<span>Income Source of NRENs per Year</span> <span>Income Source of NRENs per Year</span>
</Link> </Link>
</Row> </Row>
<Row> <Row>
<Link to="/charging" state={{ graph: 'charging_structure' }}> <Link to="/charging" className="link-text-underline" target="_blank">
<span>Charging Mechanism of NRENs per Year</span> <span>Charging Mechanism of NRENs per Year</span>
</Link> </Link>
</Row> </Row>
......
webapp/src/pages/Landing.tsx
+ 24
− 21
View file @ 7f4a14fb
...@@ -11,16 +11,19 @@ function Landing(): ReactElement { ...@@ -11,16 +11,19 @@ function Landing(): ReactElement {
<div className="center-text max-width-100vw"> <div className="center-text max-width-100vw">
<h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1> <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
<br /> <br />
<p className="wordwrap"> <div className="wordwrap">
The GÉANT Compendium provides an authoritative reference source for anyone with an <p>
interest in the development of research and education networking in Europe and beyond. The GÉANT Compendium provides an authoritative reference source for anyone with an
Published since 2001, the Compendium provides information on key areas such as users, interest in the development of research and education networking in Europe and beyond.
services, traffic, budget and staffing. Published since 2001, the Compendium provides information on key areas such as users,
</p> services, traffic, budget and staffing.
<p className="wordwrap"> </p>
This site captures the responses from the National Research and Education Networks <p>
themselves. This site captures the responses from the National Research and Education Networks
</p> themselves.
</p>
</div>
</div> </div>
</Row> </Row>
<Row> <Row>
...@@ -33,7 +36,7 @@ function Landing(): ReactElement { ...@@ -33,7 +36,7 @@ function Landing(): ReactElement {
<Col align={"center"}> <Col align={"center"}>
<Card border='light' style={{ width: "18rem" }}> <Card border='light' style={{ width: "18rem" }}>
<Link to="/data" style={{textDecoration:"none"}}> <Link to="/data" className="link-text" >
<Card.Img src={SectionDataLogo} /> <Card.Img src={SectionDataLogo} />
<Card.Body> <Card.Body>
<Card.Title>Compendium Data</Card.Title> <Card.Title>Compendium Data</Card.Title>
...@@ -48,16 +51,16 @@ function Landing(): ReactElement { ...@@ -48,16 +51,16 @@ function Landing(): ReactElement {
</Col> </Col>
<Col align={"center"}> <Col align={"center"}>
<Card border='light' style={{ width: "18rem" }}> <Card border='light' style={{ width: "18rem" }}>
<a href="https://resources.geant.org/geant-compendia/" style={{textDecoration:"none"}}> <a href="https://resources.geant.org/geant-compendia/" className="link-text" target="_blank">
<Card.Img src={SectionReportsLogo} /> <Card.Img src={SectionReportsLogo} />
<Card.Body> <Card.Body>
<Card.Title>Compendium Reports</Card.Title> <Card.Title>Compendium Reports</Card.Title>
<Card.Text> <Card.Text>
A GÉANT Compendium Report is published annually, drawing A GÉANT Compendium Report is published annually, drawing
on data from the Compendium Survey lled in by NRENs, on data from the Compendium Survey lled in by NRENs,
complemented by information from other surveys complemented by information from other surveys
</Card.Text> </Card.Text>
</Card.Body> </Card.Body>
</a> </a>
</Card> </Card>
</Col> </Col>
......
webapp/src/scss/layout/_components.scss
+ 47
− 2
View file @ 7f4a14fb
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
.geant-container { .geant-container {
max-width: 100vw; max-width: 100vw;
height: 100vh; min-height: 95%;
height: auto;
padding: 2% 0; padding: 2% 0;
} }
...@@ -17,10 +19,23 @@ ...@@ -17,10 +19,23 @@
} }
.wordwrap { .wordwrap {
max-width: 30vw; max-width: 40vw;
word-wrap: break-word; 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 { .center {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -68,4 +83,34 @@ ...@@ -68,4 +83,34 @@
.collapsible-column { .collapsible-column {
flex-basis: 100%; flex-basis: 100%;
padding: 1rem; 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