Header, footer and general styling

eea · Mar 6, 2020 · 56d98a3 · 56d98a3
1 parent fb10373
commit 56d98a3
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 53 deletions.
diff --git a/src/customizations/volto/components/theme/Anontools/Anontools.jsx b/src/customizations/volto/components/theme/Anontools/Anontools.jsx
@@ -7,22 +7,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
-
+import { Icon } from '@plone/volto/components';
+import { getBaseUrl } from '@plone/volto/helpers';
 import { settings } from '~/config';
+import user from '@plone/volto/icons/user.svg';
+
 
 /**
  * Anontools container class.
  * @class Anontools
  * @extends Component
  */
 class Anontools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
   static propTypes = {
     token: PropTypes.string,
     content: PropTypes.shape({
@@ -50,34 +47,31 @@ class Anontools extends Component {
   render() {
     return (
       !this.props.token && (
-        <Menu pointing secondary floated="right">
-          <Menu.Item>
-            <Link
-              aria-label="login"
-              to={`/login${
-                this.props.content
-                  ? `?return_url=${this.props.content['@id'].replace(
-                      settings.apiPath,
-                      '',
-                    )}`
-                  : ''
-              }`}
-            >
-              <FormattedMessage id="Log in" defaultMessage="Log in" />
-            </Link>
-          </Menu.Item>
-          <Menu.Item>
-            <Link aria-label="register" to="/register">
-              <FormattedMessage id="Register" defaultMessage="Register" />
-            </Link>
-          </Menu.Item>
-        </Menu>
+        <li className="item footer-login">
+          <span style={{ marginRight: '.5rem' }}> | </span>
+          <Icon name={user} size="15px" />
+          <Link
+            style={{ margin: '0 .5rem' }}
+            to={`/login${
+              this.props.content
+                ? `?return_url=${getBaseUrl(this.props.content['@id'])
+                    .replace(settings.apiPath, '')
+                    .replace(settings.internalApiPath, '')}`
+                : ''
+            }`}
+          >
+            <FormattedMessage id="Log in" defaultMessage="Log in" />
+          </Link>
+        </li>
       )
     );
   }
 }
 
-export default connect(state => ({
-  token: state.userSession.token,
-  content: state.content.data,
-}))(Anontools);
+export default connect((state, props) => {
+  const path = state.router.location?.pathname;
+  return {
+    token: state.userSession.token,
+    content: state.prefetch?.[path] || state.content.data,
+  };
+})(Anontools);
diff --git a/src/customizations/volto/components/theme/Footer/Footer.jsx b/src/customizations/volto/components/theme/Footer/Footer.jsx
@@ -39,7 +39,7 @@ const Footer = ({ intl }) => (
         <Grid>
           <Grid.Row>
             <Grid.Column floated='left' width={7}>
-              <ul className="footer-nav">
+              <ul className="footer-nav" id="footer_links">
                 <li>
                   <Link className="item" to="/">
                     <FormattedMessage
@@ -86,9 +86,13 @@ const Footer = ({ intl }) => (
         <Grid.Row>
           <Grid.Column width={6}>
             <div>
-              <p>
-                The Biodiversity information system for Europe is a partnership between the European Commission and the European Environment Agency.{' '}
-              </p>
+              <p class="site-info">
+                The Biodiversity information system for Europe is a partnership
+                between the <a href="https://ec.europa.eu/" target="_blank">
+                European Commission</a> and
+                the <a href="https://www.eea.europa.eu/" target="_blank">
+                European Environment Agency.</a>
+              </p>.{' '}
             </div>
             <div>
               <a href="https://ec.europa.eu/" title="European Commission">

diff --git a/src/customizations/volto/components/theme/Footer/wise.png b/src/customizations/volto/components/theme/Footer/wise.png
diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx
@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Portal } from 'react-portal';
 
 import {
   Anontools,
@@ -54,13 +55,13 @@ class Header extends Component {
               <div className="logo">
                 <Logo />
               </div>
-              <Navigation pathname={this.props.pathname} />
             </div>
             <div className="tools-search-wrapper">
+              <Navigation pathname={this.props.pathname} />
               {!this.props.token && (
-                <div className="tools">
+                <Portal node={__CLIENT__ && document.querySelector('#footer_links')}>
                   <Anontools />
-                </div>
+                </Portal>
               )}
               <div className="search">
                 <SearchWidget pathname={this.props.pathname} />

diff --git a/src/customizations/volto/components/theme/Login/Login.jsx b/src/customizations/volto/components/theme/Login/Login.jsx
@@ -118,10 +118,20 @@ class Login extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.token) {
-      this.props.history.push(this.props.returnUrl || '/');
+      const returnUrl =
+        this.props.returnUrl !== '/logout' ? this.props.returnUrl || '/' : '/';
+      this.props.history.push(returnUrl, {
+        isFromLogin: true,
+      });
       if (toast.isActive('loginFailed')) {
         toast.dismiss('loginFailed');
       }
+    } else {
+      if (this.props.location.pathname === '/logout') {
+        this.props.history.push('/', {
+          isFromLogin: true,
+        });
+      }
     }
     if (nextProps.error) {
       if (!toast.isActive('loginFailed')) {
@@ -320,9 +330,7 @@ export default compose(
       token: state.userSession.token,
       returnUrl:
         qs.parse(props.location.search).return_url ||
-        props.location.pathname
-          .replace(/\/login$/, '')
-          .replace(/\/logout$/, '') ||
+        props.location.pathname.replace('/login', '') ||
         '/',
     }),
     { login },

diff --git a/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx b/src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx
@@ -20,7 +20,7 @@ const messages = defineMessages({
   },
   searchSite: {
     id: 'Search Site',
-    defaultMessage: 'Search Site',
+    defaultMessage: 'Search',
   },
 });
 

diff --git a/theme/themes/bise/collections/menu.overrides b/theme/themes/bise/collections/menu.overrides
@@ -116,7 +116,11 @@
     .item {
       padding-top: @relativeBig;
       margin: 0;
-      text-transform: uppercase;
+      /* text-transform: uppercase; */
+      color: @lightGreenColor;
+      font-weight: 700;
+      font-size: 18px;
+      font-family: @headerFont;
 
       @media only screen and (min-width: @largestTabletScreen) {
         padding: 1.7em 0 @relativeBig;
@@ -143,16 +147,23 @@
   }
 }
 
+.ui.secondary.pointing.menu {
+  .active.item {
+    color: @darkGreenColor;
+    border-color: transparent;
+  }
+}
+
 .ui.secondary.attached.pointing.menu {
   .item {
     padding: 1.4em 1em;
     color: @blue;
     font-size: @large;
+    border: none;
   }
 
   .active.item {
-    border-color: @teal;
-    color: @black;
+    /* border-color: @teal; */
   }
 }
 

diff --git a/theme/themes/bise/globals/site.overrides b/theme/themes/bise/globals/site.overrides
@@ -1,7 +1,32 @@
 /*******************************
         Global Overrides
 *******************************/
+body {
+  color: #000;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: @headerFont;
+  font-weight: 700;
+}
+
+a {
+  color: @lightGreenColor;
+}
+a:hover {
+  color: @darkGreenColor;
+}
+
+/*-------------------
+        Header
+--------------------*/
+.tools-search-wrapper .ui.input input {
+  width: 70px !important;
+}
 
+.tools-search-wrapper svg.icon {
+  color: @lightGreenColor;
+}
 
 /*-------------------
         Footer
@@ -22,15 +47,31 @@
 }
 
 .footer-nav .item {
-  color: @lightGreenColor;
+  /* color: @lightGreenColor; */
+  font-weight: 600;
 }
 
 .footerLogos {
-  margin-top: 1.5em;
+  margin-top: 1.8em;
 }
 
 .footerLogo {
   height: 40px;
   width: auto;
   margin: .5rem 1rem;
 }
+
+.footer-login a,
+.footer-login svg.icon,
+.footer-login span {
+  color: #000;
+}
+
+.footer-login svg.icon {
+  position: relative;
+  top: 3px;
+}
+
+.site-info a {
+  font-weight: 700;
+}
diff --git a/theme/themes/bise/globals/site.variables b/theme/themes/bise/globals/site.variables
@@ -6,9 +6,25 @@
        Fonts
 --------------------*/
 
-@fontName          : 'Poppins';
+@fontName          : 'Open Sans';
+@headerFontName    : 'Raleway';
 
-@googleFontSizes   : '300,400,500,700,400italic,700italic';
+// @googleFontSizes   : '300,400,500,700,400italic,700italic';
+
+@headerFont        : 'Raleway', sans-serif;
+@pageFont          : 'Open Sans', sans-serif;
+
+@googleFontName    : @fontName;
+@importGoogleFonts : true;
+@googleFontSizes   : '300,400,500,600,700,400italic,700italic';
+@googleSubset      : 'latin';
+
+@googleProtocol    : 'https://';
+@googleFontRequest : '@{googleFontName}:@{googleFontSizes}|@{headerFontName}:@{googleFontSizes}';
+
+
+@bold              : bold;
+@normal            : normal;
 
 
 /*-------------------
@@ -26,7 +42,7 @@
 
 /*---  Theme colors  ---*/
 
-@lightGreenColor     : #468900;
+@lightGreenColor     : #3c8000;
 @darkGreenColor      : #003300;
 
 /*-------------------