Improved Header & Footer

eea · Oct 15, 2021 · cdbedcf · cdbedcf
1 parent c31ef7e
commit cdbedcf
Show file tree

Hide file tree

Showing 24 changed files with 945 additions and 5 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1 @@
+User-agent: *
diff --git a/razzle.extend.js b/razzle.extend.js
@@ -12,4 +12,4 @@ const modify = (config, { target, dev }, webpack) => {
 module.exports = {
   plugins,
   modify,
-};
+};
diff --git a/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -0,0 +1,5 @@
+const BreadCrumbs = () => {
+  return '';
+};
+
+export default BreadCrumbs;
diff --git a/src/customizations/volto/components/theme/Footer/Footer.jsx b/src/customizations/volto/components/theme/Footer/Footer.jsx
@@ -0,0 +1,163 @@
+/**
+ * Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import { Container, Grid, Segment, List } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { UniversalLink } from '@plone/volto/components';
+import eeaLogo from '@eeacms/volto-industry-theme/theme/site/assets/icons/eea.png';
+import eclogo from '@eeacms/volto-industry-theme/theme/site/assets/icons/ec.png';
+
+/**
+ * Component to display the footer.
+ * @function Footer
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component
+ */
+const Footer = () => (
+  <Segment
+    vertical
+    inverted
+    id="footer"
+    className="footer-wrapper"
+    role="contentinfo"
+    color="primary"
+    padded="very"
+  >
+    <Container>
+      <Grid>
+        <Grid.Column mobile={12} tablet={3} computer={3}>
+          <List>
+            <List.Item>
+              <UniversalLink className="item" href="/">
+                <FormattedMessage id="home" defaultMessage="Home" />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/explore">
+                <FormattedMessage id="explore" defaultMessage="Explore" />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/analyse">
+                <FormattedMessage id="analyse" defaultMessage="Analyse" />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/download">
+                <FormattedMessage id="download" defaultMessage="Download" />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/pollutants">
+                <FormattedMessage id="pollutants" defaultMessage="Pollutants" />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/about">
+                <FormattedMessage id="about" defaultMessage="About" />
+              </UniversalLink>
+            </List.Item>
+          </List>
+        </Grid.Column>
+        <Grid.Column mobile={12} tablet={9} computer={6}>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column mobile={12} tablet={6} computer={5}>
+                <div className="logo">
+                  <UniversalLink
+                    href="https://ec.europa.eu/"
+                    title="European Commission"
+                    style={{ display: 'block' }}
+                  >
+                    <img
+                      className="footerLogo"
+                      style={{ height: '53px' }}
+                      src={eeaLogo}
+                      alt="EEA"
+                      title="EEA"
+                    />
+                  </UniversalLink>
+                  <img
+                    className="footerLogo"
+                    style={{ height: '53px' }}
+                    src={eclogo}
+                    alt="EC"
+                    title="EC"
+                  />
+                </div>
+              </Grid.Column>
+              <Grid.Column mobile={12} tablet={6} computer={7}>
+                <p>
+                  European Environment Agency (EEA)
+                  <br />
+                  Kongens Nytrov 6
+                  <br />
+                  1050 Copenhagen K
+                  <br />
+                  Denmark
+                  <br />
+                  <a
+                    className="item"
+                    rel="noreferrer"
+                    href="mailto:industry.helpdesk@eea.europa.eu"
+                    target="_blank"
+                  >
+                    Contact us
+                  </a>
+                </p>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Grid.Column>
+        <Grid.Column mobile={12} tablet={12} computer={3}>
+          <p>
+            The European Environment Agency (EEA) is an agency of the European
+            Union.
+          </p>
+          <List>
+            <List.Item>
+              <UniversalLink className="item" href="/legal_notice">
+                <FormattedMessage
+                  id="legal_notice"
+                  defaultMessage="Legal notice"
+                />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink className="item" href="/privacy-statement">
+                <FormattedMessage
+                  id="privacy_statement"
+                  defaultMessage="Privacy statement"
+                />
+              </UniversalLink>
+            </List.Item>
+            <List.Item>
+              <UniversalLink
+                className="item"
+                href="https://status.eea.europa.eu"
+              >
+                EEA systems status
+              </UniversalLink>
+            </List.Item>
+          </List>
+        </Grid.Column>
+      </Grid>
+    </Container>
+  </Segment>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Footer.propTypes = {
+  /**
+   * i18n object
+   */
+};
+
+export default injectIntl(Footer);
diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx
@@ -0,0 +1,72 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React, { Component } from 'react';
+import { Container, Segment } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Logo, Navigation } from '@plone/volto/components';
+import Parteners from '../Logo/Parteners';
+
+/**
+ * Header component class.
+ * @class Header
+ * @extends Component
+ */
+class Header extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    token: PropTypes.string,
+    pathname: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    token: null,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <Segment
+        basic
+        inverted
+        className="header-wrapper"
+        role="banner"
+        color="primary"
+      >
+        <Container>
+          <div className="header">
+            <div className="logo-nav-wrapper">
+              <div className="logo">
+                <Logo />
+                <Parteners className="mobile tablet only" />
+              </div>
+              <Navigation pathname={this.props.pathname} />
+            </div>
+            <Parteners className="computer large screen widescreen only" />
+          </div>
+        </Container>
+      </Segment>
+    );
+  }
+}
+
+export default connect((state) => ({
+  token: state.userSession.token,
+}))(Header);
diff --git a/src/customizations/volto/components/theme/Logo/Logo.jsx b/src/customizations/volto/components/theme/Logo/Logo.jsx
@@ -0,0 +1,58 @@
+/**
+ * Logo component.
+ * @module components/theme/Logo/Logo
+ */
+
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Image } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
+import config from '@plone/volto/registry';
+import { UniversalLink } from '@plone/volto/components';
+
+import logo from '@eeacms/volto-industry-theme/theme/site/assets/icons/logo-white.png';
+
+const messages = defineMessages({
+  site: {
+    id: 'Site',
+    defaultMessage: 'Site',
+  },
+  plonesite: {
+    id: 'Plone Site',
+    defaultMessage: 'Plone Site',
+  },
+  industrialEmissions: {
+    id: 'Industrial Emissions',
+    defaultMessage: 'Industrial Emissions Portal',
+  },
+});
+
+/**
+ * Logo component class.
+ * @function Logo
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component.
+ */
+const Logo = () => {
+  const lang = useSelector((state) => state.intl.locale);
+  const intl = useIntl();
+
+  return (
+    <div className="logo">
+      <UniversalLink
+        href={config.settings.isMultilingual ? `/${lang}` : '/'}
+        title={intl.formatMessage(messages.site)}
+        style={{ display: 'inline-block' }}
+      >
+        <Image
+          src={logo}
+          alt={intl.formatMessage(messages.industrialEmissions)}
+          title={intl.formatMessage(messages.industrialEmissions)}
+          height={70}
+        />
+      </UniversalLink>
+    </div>
+  );
+};
+
+export default Logo;
diff --git a/src/customizations/volto/components/theme/Logo/Parteners.jsx b/src/customizations/volto/components/theme/Logo/Parteners.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import cx from 'classnames';
+import { Image } from 'semantic-ui-react';
+
+import eclogo from '@eeacms/volto-industry-theme/theme/site/assets/icons/ec.png';
+import eealogo from '@eeacms/volto-industry-theme/theme/site/assets/icons/eea.png';
+
+const Parteners = ({ className }) => {
+  return (
+    <div className={cx('header-partner-section', className)}>
+      <Image
+        className="ec-logo"
+        src={eclogo}
+        alt="European Comission"
+        title="European Comission"
+        height={55}
+        style={{ marginRight: '10px' }}
+      />
+      <Image
+        className="eea-logo"
+        src={eealogo}
+        alt="EEA"
+        title="EEA"
+        height={55}
+      />
+    </div>
+  );
+};
+
+export default Parteners;