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

slightly improve the income source legend

parent 282cc76c
No related branches found
No related tags found
1 merge request!39Feature/comp 199 income source page tweaks
Source diff could not be displayed: it is too large. Options to address this: view the blob.
......@@ -2,7 +2,7 @@ import React from "react";
function ColorBadge({ index: index, active=true }) {
return (
<div className="d-inline-block" key={index}>
<div className="d-inline-block m-2" key={index}>
{active ? (
<div
className={`color-of-badge-${index % 5}`}
......
@import 'scss/fonts';
@import 'scss/base/text';
@import 'scss/layout/components';
@import 'scss/pages/FundingSources';
.external-page-nav-bar {
background-color: #003753;
......
......@@ -115,26 +115,25 @@ let yearSelectionForAxes: number[] = [];
function FundingSourceLegend() {
return (
<Container className="border rounded-3 border-1 funding-chart-Legend">
<Row fluid='true' className="justify-content-center "
style={{ paddingLeft: '7vw' }}>
<div className="d-flex justify-content-center bold-grey-12pt">
<Row xs="auto" className="border rounded-3 border-1 my-5 justify-content-center">
<Col className="d-flex align-items-center">
<ColorBadge key={0} index={0} />
<span className='bold-14pt'>Client Institutions</span></Col>
<Col className="d-flex align-items-center" >
<ColorBadge key={1} index={1} />
<span className='bold-14pt'>Commercial</span></Col>
<Col className="d-flex align-items-center" >
<ColorBadge key={2} index={2} />
<span className='bold-14pt'>European Funding</span></Col>
<Col className="d-flex align-items-center" >
<ColorBadge key={3} index={3} />
<span className='bold-14pt'>Gov/Public Bodies</span></Col>
<Col className="d-flex align-items-center" >
<ColorBadge key={4} index={4} />
<span className='bold-14pt'>Other</span></Col>
<ColorBadge key={0} index={0} />Client Institutions
</Col>
<Col className="d-flex align-items-center">
<ColorBadge key={1} index={1} />Commercial
</Col>
<Col className="d-flex align-items-center">
<ColorBadge key={2} index={2} />European Funding
</Col>
<Col className="d-flex align-items-center">
<ColorBadge key={3} index={3} />Gov/Public Bodies
</Col>
<Col className="d-flex align-items-center">
<ColorBadge key={4} index={4} />Other
</Col>
</Row>
</Container>
</div>
);
}
......
......@@ -51,7 +51,7 @@ function Landing(): ReactElement {
</Col>
<Col align={"center"}>
<Card border='light' style={{ width: "18rem" }}>
<a href="https://resources.geant.org/geant-compendia/" className="link-text" target="_blank">
<a href="https://resources.geant.org/geant-compendia/" className="link-text" target="_blank" rel="noreferrer">
<Card.Img src={SectionReportsLogo} />
<Card.Body>
<Card.Title>Compendium Reports</Card.Title>
......
......@@ -49,8 +49,9 @@
color: $dark-teal;
}
.bold-14pt {
.bold-grey-12pt {
font-family: "Open Sans", sans-serif;
font-size: 14pt;
font-size: 12pt;
font-weight: bold;
color: #666666;
}
\ No newline at end of file
.funding-chart-Legend{
margin-top: 2vw;
margin-bottom: 2vw;
padding: 1vw;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment