Skip to content

Commit

Permalink
refactor(Footer): replace with subcomponents
Browse files Browse the repository at this point in the history
  • Loading branch information
ITML committed Feb 10, 2022
1 parent 029e850 commit 378c652
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 108 deletions.
148 changes: 84 additions & 64 deletions src/customizations/components/theme/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,29 @@ class Footer extends Component {
{ link: '/#', src: Logo10, alt: 'WISE marine' },
];

const social = [
{ name: 'twitter', link: '/#' },
{ name: 'facebook', link: '/#' },
{ name: 'linkedin', link: '/#' },
{ name: 'youtube', link: '/#' },
{ name: 'rss', link: '/#' },
];

const contacts = {
header: 'Contact Us',
contacts: [
{ icon: 'comment outline', text: 'Ask your question' },
{ icon: 'envelope outline', text: 'Sign up to our newsletter' },
],
address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
};

return (
<footer>
<div className="visual">
<Container>
<div className="theme-sites">
<p className="header">The EEA also contributes to</p>
<Footer.Header>The EEA also contributes to</Footer.Header>
<Footer.Sites sites={sites}></Footer.Sites>
</div>
<div className="subfooter">
Expand Down Expand Up @@ -91,36 +108,9 @@ class Footer extends Component {
</Grid.Column>
<Grid.Column mobile={6} tablet={5} 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="contact">
<Icon name="envelope outline" size="big"></Icon>
Sign up to our newsletter
</div>
<p className="address">
Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00
</p>

<div className="social">
<a href="/#" aria-label="twitter link">
<Icon name="twitter"></Icon>
</a>
<a href="/#" aria-label="facebook link">
<Icon name="facebook"></Icon>
</a>
<a href="/#" aria-label="linkedin link">
<Icon name="linkedin"></Icon>
</a>
<a href="/#" aria-label="youtube link">
<Icon name="youtube"></Icon>
</a>
<a href="/#" aria-label="rss link">
<Icon name="rss"></Icon>
</a>
</div>
<Footer.Contact contacts={contacts}></Footer.Contact>

<Footer.Social social={social}></Footer.Social>
</div>
</Grid.Column>
</Grid>
Expand All @@ -135,40 +125,70 @@ class Footer extends Component {
}
}

Footer.Actions = class Actions extends Component {
render() {
return (
<div className="menu">
{this.props.actions &&
this.props.actions.map((action) => (
<a href={action.link}>
{action.copy && <>&copy;</>}
{action.title}
</a>
))}
</div>
);
}
};
const Actions = (props) => (
<div className="menu">
{props.actions &&
props.actions.map((action) => (
<a href={action.link}>
{action.copy && <>&copy;</>}
{action.title}
</a>
))}
</div>
);

Footer.Sites = class Sites extends Component {
render() {
return (
<div className="logos">
<Grid columns={5}>
{this.props.sites &&
this.props.sites.map((site) => (
<Grid.Column className="logo">
<Link to={site.link}>
<Image src={site.src} alt={site.alt}></Image>
</Link>
</Grid.Column>
))}
</Grid>
</div>
);
}
};
Footer.Actions = Actions;

const Sites = (props) => (
<div className="logos">
<Grid columns={5}>
{props.sites &&
props.sites.map((site) => (
<Grid.Column className="logo">
<Link to={site.link}>
<Image src={site.src} alt={site.alt}></Image>
</Link>
</Grid.Column>
))}
</Grid>
</div>
);

Footer.Sites = Sites;

const Header = (props) => <p className="header">{props.children}</p>;

Footer.Header = Header;

const Social = (props) => (
<div className="social">
{props.social.map((item) => (
<a href={item.link} aria-label={`${item.name} link`}>
<Icon name={item.name}></Icon>
</a>
))}
</div>
);

Footer.Social = Social;

const Contact = (props) => (
<>
<p className="header">{props.contacts.header}</p>
{props.contacts.contacts.length > 0 &&
props.contacts.contacts.map((contact) => (
<div className="contact">
<Icon name={contact.icon} size="big"></Icon>
{contact.text}
</div>
))}
{props.contacts.address && (
<p className="address">{props.contacts.address}</p>
)}
</>
);

Footer.Contact = Contact;

/**
* Property types.
Expand Down
72 changes: 36 additions & 36 deletions src/customizations/components/theme/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
*/

import React, { Component } from 'react';
import { Container, Image, Menu, Grid } from 'semantic-ui-react';
import { Container, Dropdown, Image, Menu, Grid } from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
//import eeaFlag from '../../../../../theme/themes/eea/assets/images/Header/eea.png';
import eeaFlag from '../../../../../theme/themes/eea/assets/images/Header/eea.png';
import searchIcon from '../../../../../theme/themes/eea/assets/images/Header/search.png';
//import globeIcon from '../../../../../theme/themes/eea/assets/images/Header/globeIcon.png';
import globeIcon from '../../../../../theme/themes/eea/assets/images/Header/globeIcon.png';
import HeaderSearchPopUp from './HeaderSearchPopUp';
import HeaderMenuPopUp from './HeaderMenuPopUp';
import Logo from '../Logo/Logo';
Expand Down Expand Up @@ -151,41 +151,41 @@ class Header extends Component {
},
];

// const languagesList = [
// { name: 'Albanian', code: 'sq' },
// { name: 'Български', code: 'bg' },
// { name: 'Bosnian', code: 'bs' },
// { name: 'čeština', code: 'cs' },
// { name: 'Hrvatski', code: 'hr' },
// { name: 'dansk', code: 'da' },
// { name: 'Nederlands', code: 'nl' },
// { name: 'ελληνικά', code: 'el' },
// { name: 'English', code: 'en' },
// { name: 'eesti', code: 'et' },
// { name: 'Suomi', code: 'fi' },
// { name: 'Français', code: 'fr' },
// { name: 'Deutsch', code: 'de' },
// { name: 'magyar', code: 'hu' },
// { name: 'Íslenska', code: 'is' },
// { name: 'italiano', code: 'it' },
// { name: 'Latviešu', code: 'lv' },
// { name: 'lietuvių', code: 'lt' },
// { name: 'Macedonian', code: 'mk' },
// { name: 'Malti', code: 'mt' },
// { name: 'Norsk', code: 'no' },
// { name: 'polski', code: 'pl' },
// { name: 'Português', code: 'pt' },
// { name: 'Română', code: 'ro' },
// { name: 'slovenčina', code: 'sk' },
// { name: 'Slovenščina', code: 'sl' },
// { name: 'Español', code: 'es' },
// { name: 'Svenska', code: 'sv' },
// { name: 'Türkçe', code: 'tr' },
// ];
const languagesList = [
{ name: 'Albanian', code: 'sq' },
{ name: 'Български', code: 'bg' },
{ name: 'Bosnian', code: 'bs' },
{ name: 'čeština', code: 'cs' },
{ name: 'Hrvatski', code: 'hr' },
{ name: 'dansk', code: 'da' },
{ name: 'Nederlands', code: 'nl' },
{ name: 'ελληνικά', code: 'el' },
{ name: 'English', code: 'en' },
{ name: 'eesti', code: 'et' },
{ name: 'Suomi', code: 'fi' },
{ name: 'Français', code: 'fr' },
{ name: 'Deutsch', code: 'de' },
{ name: 'magyar', code: 'hu' },
{ name: 'Íslenska', code: 'is' },
{ name: 'italiano', code: 'it' },
{ name: 'Latviešu', code: 'lv' },
{ name: 'lietuvių', code: 'lt' },
{ name: 'Macedonian', code: 'mk' },
{ name: 'Malti', code: 'mt' },
{ name: 'Norsk', code: 'no' },
{ name: 'polski', code: 'pl' },
{ name: 'Português', code: 'pt' },
{ name: 'Română', code: 'ro' },
{ name: 'slovenčina', code: 'sk' },
{ name: 'Slovenščina', code: 'sl' },
{ name: 'Español', code: 'es' },
{ name: 'Svenska', code: 'sv' },
{ name: 'Türkçe', code: 'tr' },
];

return (
<div className="eea-header">
{/* <div className="eea-top-header">
<div className="eea-top-header">
<Container>
<div id="eea-official-union" className="eea-top-header-item">
<Image src={eeaFlag} alt="eea flag"></Image>
Expand Down Expand Up @@ -360,7 +360,7 @@ class Header extends Component {
</Dropdown.Menu>
</Dropdown>
</Container>
</div> */}
</div>

<div className="eea-main-header">
<Container>
Expand Down
16 changes: 8 additions & 8 deletions theme/themes/eea/globals/site.overrides
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ img#eea-logo {
font-size: 12px;
}

@media only screen and (min-width: @mobileBreakpoint + 1) {
@media only screen and (min-width: @tabletBreakpoint) {
#eea-search-box {
height: calc(100vh - 140px);
}
Expand Down Expand Up @@ -496,7 +496,7 @@ img#eea-logo {
}
}

@media only screen and (min-width: @tabletBreakpoint + 1) {
@media only screen and (min-width: @computerBreakpoint) {
#eea-search-box {
height: calc(100vh - 192px);
}
Expand Down Expand Up @@ -691,7 +691,7 @@ a.menu-link:hover {
.mega-menu--multiLevel {
flex-direction: column;
}
@media only screen and (min-width: @mobileBreakpoint) {
@media only screen and (min-width: @tabletBreakpoint) {
nav.eea-nav {
margin-top: 200px;
background: transparent;
Expand Down Expand Up @@ -816,7 +816,7 @@ a.menu-link:hover {
display: none;
}
}
@media only screen and (max-width: @mobileBreakpoint) {
@media only screen and (max-width: @largestMobileScreen) {
#eea-mega-menu-wrap {
height: calc(100vh - 140px);
}
Expand Down Expand Up @@ -983,7 +983,7 @@ a.menu-link:hover {
visibility: hidden;
}
}
@media only screen and (max-width: @mobileBreakpoint) and (hover: none) {
@media only screen and (max-width: @largestMobileScreen) and (hover: none) {
.eea-mobile-menu-trigger:hover ~ ul {
left: 0;
}
Expand Down Expand Up @@ -1046,7 +1046,7 @@ a.menu-link:hover {
}
}

@media only screen and (min-width: @mobileBreakpoint + 1) and (max-width: @tabletBreakpoint) {
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
li {
font-size: 20px;

Expand All @@ -1061,7 +1061,7 @@ a.menu-link:hover {
}
}

@media only screen and (max-width: @mobileBreakpoint) {
@media only screen and (max-width: @largestMobileScreen) {
li {
font-size: 18px;

Expand All @@ -1070,7 +1070,7 @@ a.menu-link:hover {
}
}
}
@media only screen and (min-width: @tabletBreakpoint + 1) {
@media only screen and (min-width: @computerBreakpoint) {
.menu-link.mega-menu-link.mega-menu-first-level {
padding: 30px 25px;
font-size: 48px;
Expand Down

0 comments on commit 378c652

Please sign in to comment.