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

remove unused SCSS definitions and update app with a footer

parent 2d98296b
Branches
Tags
1 merge request!3Add some polish to various pages and update header / add a footer
......@@ -2,7 +2,7 @@ import React, { ReactElement } 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";
......@@ -12,19 +12,20 @@ import ChargingStructurePage from "./pages/ChargingStructure";
function App(): ReactElement {
return (
<div>
<div className="app">
<Router>
<ExternalPageNavBar />
<Routes>
<Route path="/data" element={<CompendiumData />} />
<Route path="/about" element={<About />} />
<Route path="/analysis" element={<DataAnalysis />} />
<Route path="/report" element={<AnnualReport />} />
<Route path="/funding" element={<FundingSourcePage />} />
<Route path="/charging" element={<ChargingStructurePage />} />
<Route path="*" element={<Landing />} />
</Routes>
<GeantFooter/>
</Router>
</div>
);
}
......
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
@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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment