Skip to content

Commit

Permalink
refactor(footer) adjust to volto theming update
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-stamatis
g-stamatis committed Feb 8, 2022
1 parent dd6b55c commit a59f1c3
Show file tree
Hide file tree
Showing 4 changed files with 451 additions and 47 deletions.
85 changes: 43 additions & 42 deletions src/customizations/components/theme/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import ThemeSites from './theme-sites.js';
import EIONETLogo from '../../../../../theme/themes/eea/assets/images/Footer/EIONETLogo.png';
import EEALogo from '../../../../../theme/themes/eea/assets/images/Footer/EEA-Logo-white.svg';

import { Col } from '../Grid/Col';

/**
* Component to display the footer.
* @function Footer
Expand All @@ -25,24 +23,27 @@ import { Col } from '../Grid/Col';
class Footer extends Component {
render() {
return (
<div className="eea-footer">
<div className="eea-footer-visual">
<div className="eea-footer-container">
<p className="eea-footer-header">The EEA also contributes to</p>

<ThemeSites />
<footer>
<div className="visual">
<Container>
<div className="theme-sites">
<p className="header">The EEA also contributes to</p>
<ThemeSites />
</div>
<div className="subfooter">
<Grid>
<Grid.Column mobile={6} tablet={8} computer={8}>
<div className="item">
<div className="site logo">
<Image src={EEALogo} alt="EEA Logo"></Image>
<p className="description">
An agency of the European Union
</p>
</div>

<Container className="eea-subfooter">
<Grid.Row>
<Col desktop="8" tablet="5" mobile="2">
<div className="eea-footer-logos eea-subfooter-item">
<Image src={EEALogo} alt="EEA Logo"></Image>
<p className="eea-footer-logo-description">
An agency of the European Union
</p>
<div className="ionet-logo">
<div className="ionet logo">
<Image src={EIONETLogo} alt="IONET Logo"></Image>
<p>
<p className="description">
European Environment
<br />
Information and
Expand All @@ -51,54 +52,54 @@ class Footer extends Component {
</p>
</div>
</div>
</Col>
<Col desktop="4" tablet="3" mobile="2">
<div className="eea-subfooter-item">
<p className="eea-subfooter-item-header">Contact us</p>
<div className="eea-footer-contact-item">
</Grid.Column>
<Grid.Column mobile={6} tablet={4} computer={4}>
<div className="item">
<p className="header">Contact us</p>
<div className="contact">
<Icon name="comment outline" size="big"></Icon>
Ask your question
</div>
<div className="eea-footer-contact-item">
<div className="contact">
<Icon name="envelope outline" size="big"></Icon>
Sign up to our newsletter
</div>
<p className="eea-footer-contact-address">
<p className="address">
Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00
</p>

<div className="eea-footer-contact-social">
<a href="/#">
<Icon size="big" name="twitter"></Icon>
<div className="social">
<a href="/#" aria-label="twitter link">
<Icon name="twitter"></Icon>
</a>
<a href="/#">
<Icon size="big" name="facebook"></Icon>
<a href="/#" aria-label="facebook link">
<Icon name="facebook"></Icon>
</a>
<a href="/#">
<Icon size="big" name="linkedin"></Icon>
<a href="/#" aria-label="linkedin link">
<Icon name="linkedin"></Icon>
</a>
<a href="/#">
<Icon size="big" name="youtube"></Icon>
<a href="/#" aria-label="youtube link">
<Icon name="youtube"></Icon>
</a>
<a href="/#">
<Icon size="big" name="rss"></Icon>
<a href="/#" aria-label="rss link">
<Icon name="rss"></Icon>
</a>
</div>
</div>
</Col>
</Grid.Row>
</Grid.Column>
</Grid>
<Grid.Row>
<div className="eea-footer-links">
<div className="menu">
<a href="/#">CMS Login</a>
<a href="/#">Sitemap</a>
<a href="/#">Privacy</a>
<a href="/#"> &copy; Copyright</a>
</div>
</Grid.Row>
</Container>
</div>
</div>
</Container>
</div>
</div>
</footer>
);
}
}
Expand Down
46 changes: 41 additions & 5 deletions src/customizations/components/theme/Footer/theme-sites.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Container, Grid, Image } from 'semantic-ui-react';
import { Grid, Image } from 'semantic-ui-react';

import Logo1 from '../../../../../theme/themes/eea/assets/images/Footer/Extras/Group.svg';
import Logo2 from '../../../../../theme/themes/eea/assets/images/Footer/Extras/Group-3.svg';
Expand All @@ -14,8 +14,8 @@ import Logo10 from '../../../../../theme/themes/eea/assets/images/Footer/Extras/

function ThemeSites() {
return (
<Container>
<div className="eea-theme-sites">
<div className="logos">
{/* <div className="eea-theme-sites">
<Grid.Row className="footer-logo-row">
<div className="col-md-5ths col-sm-5ths eea-theme-site-logo">
<Image src={Logo1} alt="Biodiversity"></Image>
Expand Down Expand Up @@ -57,8 +57,44 @@ function ThemeSites() {
<Image src={Logo10} alt="WISE marine"></Image>
</div>
</Grid.Row>
</div>
</Container>
</div> */}

<Grid columns={5}>
<Grid.Column className="logo">
<Image src={Logo1} alt="Biodiversity"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo2} alt="Climate and energy in the EU"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo3} alt="Copernicus in situ"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image
src={Logo4}
alt="Information platform for chemical monitoring"
></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo5} alt="WISE freshwater"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo6} alt="Forest information system for europe"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo7} alt="Climate adapt"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo8} alt="Copernicus land monitoring service"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo9} alt="European industrial emissions portal"></Image>
</Grid.Column>
<Grid.Column className="logo">
<Image src={Logo10} alt="WISE marine"></Image>
</Grid.Column>
</Grid>
</div>
);
}

Expand Down

0 comments on commit a59f1c3

Please sign in to comment.