refactor(header): adjust to volto in progress

eea · Feb 17, 2022 · 760beca · 760beca
1 parent 105bd6c
commit 760beca
Show file tree

Hide file tree

Showing 10 changed files with 1,243 additions and 1,177 deletions.
diff --git a/src/semantic.less b/src/semantic.less
@@ -220,6 +220,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/footer';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/header';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx
@@ -14,8 +14,6 @@ import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import Logo from '../Logo/Logo';
 
-import { Col } from '../Grid/Col';
-
 //import { Logo, Navigation } from '@plone/volto/components';
 
 /**
@@ -186,7 +184,7 @@ class Header extends Component {
     return (
       <div className="eea-header">
         <Header.TopHeader>
-          <Header.TopItem id="eea-official-union">
+          <Header.TopItem className="official-union mobile or lower hidden">
             <Image src={eeaFlag} alt="eea flag"></Image>
 
             <Dropdown
@@ -214,7 +212,7 @@ class Header extends Component {
             </Dropdown>
           </Header.TopItem>
 
-          <Header.TopItem id="eea-official-union-mobile">
+          <Header.TopItem className="official-union mobile only">
             <Image src={eeaFlag} alt="eea flag"></Image>
 
             <Dropdown
@@ -223,7 +221,6 @@ class Header extends Component {
               aria-label="dropdown"
             >
               <Dropdown.Menu
-                id="eea-official-union-dropdown-mobile"
                 role="group"
               >
                 <div role="option" aria-selected="false">
@@ -245,15 +242,16 @@ class Header extends Component {
 
           <Header.TopItem>
             <Dropdown
-              id="eea-top-header-theme-sites"
+              id="theme-sites"
+              className="tablet or lower hidden"
               text="Environmental information systems"
               icon="chevron down"
               aria-label="dropdown"
             >
-              <Dropdown.Menu id="eea-theme-sites-dropdown" role="group">
-                <div id="eea-theme-sites-list">
+              <Dropdown.Menu role="group">
+                <div className="list">
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -262,7 +260,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -271,7 +269,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -281,7 +279,7 @@ class Header extends Component {
                     <br />
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -290,7 +288,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -299,7 +297,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -308,7 +306,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -317,7 +315,7 @@ class Header extends Component {
                     </a>
                   </div>
                   <div
-                    className="eea-theme-site-item"
+                    className="site"
                     role="option"
                     aria-selected="false"
                   >
@@ -360,12 +358,11 @@ class Header extends Component {
 
         <Header.Main>
           <Container>
-            <Grid.Row>
-              <Col desktop="4" tablet="5" mobile="3">
-                {/* <Image src={logo} id="eea-logo" alt="eea logo"></Image> */}
-                <Logo id="eea-logo"></Logo>
-              </Col>
-              <Col desktop="8" tablet="3" mobile="1">
+            <Grid>
+              <Grid.Column mobile={8} tablet={8} computer={4}>
+                <Logo id="logo"></Logo>
+              </Grid.Column>
+              <Grid.Column mobile={4} tablet={4} computer={8}>
                 <div className="eea-main-header-menu">
                   {!this.state.activeSearch && !this.state.activeMenu && (
                     <Menu className="eea-main-menu" text>
@@ -424,8 +421,8 @@ class Header extends Component {
                     <span></span>
                   </div>
                 </div>
-              </Col>
-            </Grid.Row>
+              </Grid.Column>
+            </Grid>
           </Container>
           {this.state.activeSearch && <HeaderSearchPopUp></HeaderSearchPopUp>}
           {this.state.activeMenu && <HeaderMenuPopUp></HeaderMenuPopUp>}
@@ -444,7 +441,7 @@ const TopHeader = (props) => (
 Header.TopHeader = TopHeader;
 
 const TopItem = (props) => (
-  <div className="eea-top-header-item" id={props.id}>
+  <div className={`eea-top-header-item ${props.className}`} id={props.id}>
     {props.children}
   </div>
 );

diff --git a/src/ui/Header/HeaderSearchPopUp.js b/src/ui/Header/HeaderSearchPopUp.js
@@ -3,17 +3,17 @@ import { Container, Input, Button, Icon } from 'semantic-ui-react';
 
 function HeaderSearchPopUp() {
   return (
-    <div id="eea-search-box">
+    <div id="search-box">
       <Container>
-        <div className="eea-search-body">
+        <div className="wrapper">
           <Input
-            id="eea-search-input"
+            className="search"
             icon="search"
             placeholder="Search..."
             fluid
           />
           <div className="eea-advanced-search-button">
-            <Button icon labelPosition="left">
+            <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>

diff --git a/theme/theme.config b/theme/theme.config
@@ -82,6 +82,7 @@
 @banner      : 'eea';
 @timeline    : 'eea';
 @footer      : 'eea';
+@header      : 'eea';
 @inpageNavigation : 'eea';
 
 /*******************************

diff --git a/theme/themes/eea/elements/button.overrides b/theme/themes/eea/elements/button.overrides
@@ -39,7 +39,7 @@
 .ui.button.secondary,
 .ui.buttons.secondary {
   border: @buttonBorder @primaryButtonColor;
-  background-color: @secondaryButtonBackrgound;
+  background-color: @secondaryButtonBackground;
   .text-color(@white);
 
   &:hover,
@@ -114,6 +114,32 @@ p.ui.button {
   }
 }
 
+/* Advanced Search Button */
+.ui.button.search {
+  box-sizing: border-box;
+  border: @buttonBorder @white;
+  background: @searchButtonBackground;
+  border-radius: @searchButtonBorderRadius;
+  color: @searchButtonColor;
+  font-size: @searchButtonFontSize;
+
+  &:active,
+  &:visited,
+  &:focus,
+  &:hover {
+    border: @buttonBorder @white;
+    background: @searchButtonBackground;
+    color: @searchButtonColor;
+  }
+}
+.ui.labeled.icon.button.search > .icon {
+    font-size: @searchButtonFontSize;
+    left: @searchButtonIconLeft;
+    background: @searchButtonBackground;
+    opacity: @searchButtonIconOpacity;
+}
+
+
 .searchbox.field > .ui.action.input > .icon.button {
   padding-top: 0;
   padding-right: 0;

diff --git a/theme/themes/eea/elements/button.variables b/theme/themes/eea/elements/button.variables
@@ -16,7 +16,7 @@
 @primaryButtonColorHover: @darkMidnightBlue;
 
 /* Secondary Button */
-@secondaryButtonBackrgound: transparent;
+@secondaryButtonBackground: transparent;
 @secondaryButtonColor: @white;
 @secondaryButtonColorHover : @darkMidnightBlue;
 @secondaryBorder: @buttonBorder @primaryColor;
@@ -29,6 +29,14 @@
 /* Text Button */
 @textButtonBackground: transparent;
 
+/* Search Button */
+@searchButtonBackground: transparent;
+@searchButtonColor: @white;
+@searchButtonFontSize: 1.125rem;
+@searchButtonBorderRadius: 0.625rem;
+@searchButtonIconLeft: 1.25rem;
+@searchButtonIconOpacity: 0.625rem;
+
 @verticalMargin: 0em;
 @horizontalMargin: 0.25em;
 @backgroundColor: @silverGray;

diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
@@ -39,6 +39,38 @@ textarea {
   }
 }
 
+
+/* Search Input */
+.ui.fluid.icon.input.search {
+  input {
+    padding: 18.5px;
+    border: none !important;
+    border-bottom: 2px solid !important;
+    background: transparent;
+    color: @white;
+    font-size: 18px;
+  }
+
+  i.icon {
+    color: @white;
+    font-size: 18px;
+    opacity: 1;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.fluid.icon.input.search {
+    input {
+      border-bottom: 3px solid !important;
+      font-size: 48px;
+    }
+    i.icon {
+      font-size: 48px;
+    }
+  }
+}
+
+/*****************************************************************/
 .inline.field {
   .wrapper {
     display: flex;