From 1a13d46612ae966c08745d4df34190b76437503b Mon Sep 17 00:00:00 2001
From: razvanMiu <miu.razvan28@gmail.com>
Date: Thu, 17 Dec 2020 16:33:43 +0200
Subject: [PATCH] Mobile menu; Updated sizes of logos

---
 package.json                                  |   6 +-
 .../DiscodataComponents/Custom/View.jsx       |   7 +-
 .../manage/Blocks/NavigationBlock/View.jsx    |   5 +-
 .../manage/Blocks/PollutantIndex/View.jsx     |   6 +-
 .../volto/components/theme/Footer/Footer.jsx  |   4 +-
 .../volto/components/theme/Header/Header.jsx  |  13 +-
 .../theme/Navigation/Navigation.jsx           |  20 ++-
 theme/site/elements/container.overrides       |  13 +-
 theme/site/elements/header.overrides          | 142 ++++++++----------
 9 files changed, 106 insertions(+), 110 deletions(-)

diff --git a/package.json b/package.json
index 37a38d5b..3221ac4d 100644
--- 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
index d948895f..22471bc1 100644
--- 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
index 3bbf5a5a..9737b0b7 100644
--- 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
index 0caf63b1..a91887a4 100644
--- 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
index 30d9b98d..cc07bceb 100644
--- a/src/customizations/volto/components/theme/Footer/Footer.jsx
+++ b/src/customizations/volto/components/theme/Footer/Footer.jsx
@@ -72,7 +72,7 @@ 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"
@@ -80,7 +80,7 @@ const Footer = ({ intl }) => (
                   </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
index 0e3a3b13..8257b81c 100644
--- 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
index 59602361..af39fe80 100644
--- 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
index 44fc2972..4aaca857 100644
--- 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']),
diff --git a/theme/site/elements/header.overrides b/theme/site/elements/header.overrides
index d04f71be..c517a0fa 100644
--- a/theme/site/elements/header.overrides
+++ b/theme/site/elements/header.overrides
@@ -4,42 +4,53 @@
 .ui.basic.segment.header-wrapper {
   margin-bottom: 0;
   background-color: @primaryColor;
+  padding: 1em 0;
 }
 
 .ui.basic.segment.header-wrapper .header {
   display: flex;
-  // flex-wrap: wrap;
-  justify-content: space-between;
   flex-flow: row;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+
+  @media only screen and (max-width: 450px) {
+    flex-flow: column;
+    align-items: flex-start;
+    .logo-nav-wrapper {
+      width: 100%;
+      justify-content: space-between !important;
+    }
+  }
+
+  .logo-nav-wrapper {
+    flex: 1;
+  }
 
   .header-partner-section {
     display: flex;
-    @media only screen and (min-width: @largestTabletScreen) { 
-      align-items: center;
+    .eea-logo {
+      margin-top: 2px;
     }
   }
 
   .logo-nav-wrapper {
     display: flex;
-    flex-grow: 2;
     align-items: center;
-    @media only screen and (max-width: @largestTabletScreen) {
-      align-items: initial;
-      justify-content: start;
-      flex-direction: row-reverse;
-      flex-grow: 0;
-    }
+    justify-content: flex-start;
 
     .logo {
-      flex: 0 0 auto;
-      @media only screen and (max-width: @largestTabletScreen) {
-        margin-left: 2rem;
-      }
+      margin-top: -8px;
+      margin-left: -4px
     }
 
     .navigation {
+      margin-top: 8px;
+      margin-left: 8px;
+      .hamburger {
+        display: flex;
+        align-items: center;
+        padding: 0;
+      }
       .hamburger-inner {
         background: white;
 
@@ -48,77 +59,42 @@
           background: white;
         }
       }
-      // -ms-overflow-style: none; /* IE 10+ */
-      // overflow-x: auto;
-      &::-webkit-scrollbar {
-        height: 0;
-        /* remove scrollbar space */
-        background: transparent;
-        /* optional: just make scrollbar invisible */
-      }
-      /* optional: show position indicator in red */
-      &::-webkit-scrollbar-thumb {
-        background: #f00;
-      }
-      @media only screen and (max-width: @largestTabletScreen) {
-        overflow-x: initial;
-      }
-    }
-  }
-  @media only screen and (max-width: @largestTabletScreen) {
-    //flex-direction: initial;
-    align-items: initial;
-    flex-flow: row-reverse;
-  }
 
-  @media only screen and (max-width: 550px) {
-    flex-flow: column !important;
-    .logo-nav-wrapper {
-      flex-direction: row;
-      margin-bottom: 1rem;
-      .logo {
-        margin-left: 0 !important;
+      .menu {
+        .close-button {
+          display: none;
+        }
       }
-    }
-  }
-
-  .tools-search-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 2;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-end;
-    margin-left: @huge;
-    width: 20%;
-    /* @media only screen and (max-width: 560px){
-
-    } */
-    @media only screen and (max-width: @largestTabletScreen) {
-      width: 20%;
-      height: 20%;
-      justify-content: end;
-    }
-
-    & > * {
-      display: flex;
-    }
 
-    .search {
-      form {
-        @media only screen and (min-width: @largestTabletScreen) {
-          padding: 1.7em 0 @relativeBig;
+      .open.menu {
+        flex-grow: 0;
+        position: absolute;
+        background: white;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: 2em;
+        margin-left: 0;
+        flex-flow: column;
+        align-items: flex-start;
+        z-index: 9999;
+        min-width: 320px;
+        .close-button {
+          display: inline-block;
+          position: absolute;
+          right: 0;
+          top: 2.65em;
+          margin-right: 1em;
+          z-index: 1;
+        }
+        .item {
+          color: #000;
+          align-self: flex-start;
+          padding: 0.5em 1em;
+          margin: 0.5em 0;
         }
       }
     }
   }
 }
-
-.header-container {
-  width: 80%;
-  margin: 0 auto;
-  //max-width: 1600px;
-  @media only screen and (max-width: 982px) {
-    width: auto;
-  }
-}