Mobile menu; Updated sizes of logos

eea · Dec 17, 2020 · 1a13d46 · 1a13d46
1 parent 2f2773e
commit 1a13d46
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -127,12 +127,11 @@
     "@eeacms/volto-blocks-form": "github:eea/volto-blocks-form#1.0.1",
     "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#1.0.2",
     "@eeacms/volto-object-widget": "github:eea/volto-object-widget#1.0.3",
+    "@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#1.0.0",
     "@eeacms/volto-widget-toggle": "github:eea/volto-widget-toggle#1.0.0",
     "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#1.0.3",
-    "@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#1.0.0",
     "@material/react-linear-progress": "^0.15.0",
     "@plone/volto": "10.4.3",
-    "volto-slate": "github:eea/volto-slate#1.0.5",
     "axios": "^0.20.0",
     "jsonp": "^0.2.1",
     "ol": "^6.4.3",
@@ -146,7 +145,8 @@
     "react-loadable": "^5.5.0",
     "react-sizeme": "^2.6.12",
     "react-tooltip": "^4.2.9",
-    "react-visibility-sensor": "^5.1.1"
+    "react-visibility-sensor": "^5.1.1",
+    "volto-slate": "github:eea/volto-slate#1.0.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

diff --git a/src/components/manage/Blocks/DiscodataComponents/Custom/View.jsx b/src/components/manage/Blocks/DiscodataComponents/Custom/View.jsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { isArray, isDate } from 'lodash';
+import { isArray } from 'lodash';
 import { Dropdown, Header } from 'semantic-ui-react';
 import { setQueryParam } from '@eeacms/volto-datablocks/actions';
 import DiscodataSqlBuilder from '@eeacms/volto-datablocks/DiscodataSqlBuilder/View';
@@ -20,11 +20,6 @@ const countryGroups = [
     value: 'All E-PRTR',
     text: 'All E-PRTR',
   },
-  {
-    key: 'EEA33',
-    value: 'EEA33',
-    text: 'EEA33',
-  },
   {
     key: 'EU27',
     value: 'EU27',

diff --git a/src/components/manage/Blocks/NavigationBlock/View.jsx b/src/components/manage/Blocks/NavigationBlock/View.jsx
@@ -12,7 +12,10 @@ import {
   getNavigationByParent,
   getBasePath,
 } from 'volto-tabsview/helpers';
-import { deleteQueryParam, setQueryParam } from '@eeacms/volto-datablocks/actions';
+import {
+  deleteQueryParam,
+  setQueryParam,
+} from '@eeacms/volto-datablocks/actions';
 import { useEffect } from 'react';
 
 const View = ({ content, ...props }) => {

diff --git a/src/components/manage/Blocks/PollutantIndex/View.jsx b/src/components/manage/Blocks/PollutantIndex/View.jsx
@@ -3,8 +3,10 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Tab, Dropdown, Table } from 'semantic-ui-react';
 import DiscodataSqlBuilder from '@eeacms/volto-datablocks/DiscodataSqlBuilder/View';
-import { setQueryParam, deleteQueryParam } from '@eeacms/volto-datablocks/actions';
-import qs from 'query-string';
+import {
+  setQueryParam,
+  deleteQueryParam,
+} from '@eeacms/volto-datablocks/actions';
 import cx from 'classnames';
 import './style.css';
 

diff --git a/src/customizations/volto/components/theme/Footer/Footer.jsx b/src/customizations/volto/components/theme/Footer/Footer.jsx
@@ -72,15 +72,15 @@ const Footer = ({ intl }) => (
                   <a href="https://ec.europa.eu/" title="European Commission">
                     <img
                       className="footerLogo"
-                      style={{ height: '50px' }}
+                      style={{ height: '53px' }}
                       src={eeaLogo}
                       alt="EEA"
                       title="EEA"
                     />
                   </a>
                   <img
                     className="footerLogo"
-                    style={{ height: '50px' }}
+                    style={{ height: '53px' }}
                     src={eclogo}
                     alt="EC"
                     title="EC"

diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from 'react';
-import { Segment, Image } from 'semantic-ui-react';
+import { Segment, Image, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
@@ -46,7 +46,7 @@ class Header extends Component {
   render() {
     return (
       <Segment basic className="header-wrapper" role="banner">
-        <div className="header-container">
+        <div className="header-container ui container">
           <div className="header">
             <div className="logo-nav-wrapper">
               <div className="logo">
@@ -56,13 +56,20 @@ class Header extends Component {
             </div>
             <div className="header-partner-section">
               <Image
+                className="ec-logo"
                 src={eclogo}
                 alt="European Comission"
                 title="European Comission"
                 height={55}
                 style={{ marginRight: '10px' }}
               />
-              <Image src={eealogo} alt="EEA" title="EEA" height={50} />
+              <Image
+                className="eea-logo"
+                src={eealogo}
+                alt="EEA"
+                title="EEA"
+                height={55}
+              />
             </div>
           </div>
         </div>

diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -9,14 +9,17 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { NavLink } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Menu } from 'semantic-ui-react';
+import { Menu, Button } from 'semantic-ui-react';
 import cx from 'classnames';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
 import { getNavigation } from '@plone/volto/actions';
 import { resetQueryParam } from '@eeacms/volto-datablocks/actions';
 
+import clearSVG from '@plone/volto/icons/clear.svg';
+
 const messages = defineMessages({
   closeMobileMenu: {
     id: 'Close menu',
@@ -126,9 +129,7 @@ class Navigation extends Component {
       <nav className="navigation">
         <div className="hamburger-wrapper mobile tablet only">
           <button
-            className={cx('hamburger hamburger--collapse', {
-              'is-active': this.state.isMobileMenuOpen,
-            })}
+            className={cx('hamburger hamburger--collapse')}
             aria-label={
               this.state.isMobileMenuOpen
                 ? this.props.intl.formatMessage(messages.closeMobileMenu, {
@@ -164,8 +165,16 @@ class Navigation extends Component {
               ? 'open'
               : 'computer large screen widescreen only'
           }
-          onClick={this.closeMobileMenu}
         >
+          <Button
+            icon
+            basic
+            title="Close menu"
+            className="close-button"
+            onClick={this.closeMobileMenu}
+          >
+            <Icon name={clearSVG} size="32px" />
+          </Button>
           {this.props.items.map(
             (item) =>
               !settings.excludeFromNavigation.includes(item.url) && (
@@ -181,6 +190,7 @@ class Navigation extends Component {
                     ) {
                       this.props.resetQueryParam();
                     }
+                    this.closeMobileMenu();
                   }}
                   exact={
                     settings.isMultilingual

diff --git a/theme/site/elements/container.overrides b/theme/site/elements/container.overrides
@@ -15,11 +15,14 @@
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-.contentWidthMedia(@width, @gutter, @offset) {
+.contentWidthMedia(@width, @headerWidth, @gutter, @offset) {
   .ui.container {
     width: @width !important;
     margin-right: @gutter !important;
     margin-left: @gutter !important;
+    &.header-container {
+      width: @headerWidth !important;
+    }
   }
 
   .drag.handle.wrapper {
@@ -33,7 +36,7 @@
 
 .contentWidth(@offset) {
   @media only screen and (max-width: @largestMobileScreen + @offset) {
-    .contentWidthMedia(@mobileWidth, @mobileGutter, -12px);
+    .contentWidthMedia(@mobileWidth, auto, @mobileGutter, -12px);
 
     [class*='mobile hidden'],
     [class*='tablet only']:not(.mobile),
@@ -45,7 +48,7 @@
     }
   }
   @media only screen and (min-width: @tabletBreakpoint + @offset) and (max-width: @largestTabletScreen + @offset) {
-    .contentWidthMedia(@tabletWidth, @tabletGutter, -30px);
+    .contentWidthMedia(@tabletWidth, @tabletWidth, @tabletGutter, -30px);
 
     [class*='mobile only']:not(.tablet),
     [class*='tablet hidden'],
@@ -57,7 +60,7 @@
     }
   }
   @media only screen and (min-width: @computerBreakpoint + @offset) and (max-width: @largestSmallMonitor + @offset) {
-    .contentWidthMedia(@computerWidth, @computerGutter, -30px);
+    .contentWidthMedia(@computerWidth, @computerWidth, @computerGutter, -30px);
 
     [class*='mobile only']:not(.computer),
     [class*='tablet only']:not(.computer),
@@ -69,7 +72,7 @@
     }
   }
   @media only screen and (min-width: @largeMonitorBreakpoint + @offset) {
-    .contentWidthMedia(@largeMonitorWidth, @largeMonitorGutter, -30px);
+    .contentWidthMedia(@largeMonitorWidth, @largeMonitorWidth, @largeMonitorGutter, -30px);
 
     [class*='mobile only']:not([class*='large screen']),
     [class*='tablet only']:not([class*='large screen']),