implemented advanced search link in mobile menu

eea · Jan 29, 2021 · 0f6dc14 · 0f6dc14
1 parent 9762919
commit 0f6dc14
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 11 deletions.
diff --git a/src/customizations/components/theme/Navigation/Navigation.jsx b/src/customizations/components/theme/Navigation/Navigation.jsx
@@ -255,11 +255,7 @@ class Navigation extends Component {
           stackable
           pointing
           secondary
-          className={
-            this.state.isMobileMenuOpen
-              ? 'open'
-              : 'large screen widescreen only'
-          }
+          className={this.state.isMobileMenuOpen ? 'open' : 'large screen only'}
         >
           <div className="navigation-links">
             {this.props.items.map((item) => (
@@ -281,7 +277,6 @@ class Navigation extends Component {
           </div>
 
           <div className="tools-wrapper">
-            {/* <LanguagesWidget></LanguagesWidget> */}
             <Popup
               on="click"
               className="large screen only custom-search-pop"
@@ -348,15 +343,17 @@ class Navigation extends Component {
             </div>
 
             <div className="tools-search-wrapper">
+              <div className="search">
+                <SearchWidget pathname={this.props.pathname} />
+              </div>
+
               {!this.props.token && (
                 <div className="tools">
                   <Anontools handleClick={this.closeMobileMenu} />
                 </div>
               )}
-              <div className="search">
-                <SearchWidget pathname={this.props.pathname} />
-              </div>
             </div>
+
             <div>
               <a
                 href="https://europa.eu/european-union/about-eu_en"

diff --git a/src/customizations/components/theme/SearchWidget/SearchWidget.jsx b/src/customizations/components/theme/SearchWidget/SearchWidget.jsx
@@ -18,7 +18,7 @@ import {
   Icon,
   Input,
   List,
-  Popup,
+  Popup
 } from 'semantic-ui-react';
 
 const messages = defineMessages({
@@ -288,6 +288,24 @@ class SearchWidget extends Component {
               </button>
             </Form.Field>
           </Form>
+
+          <div
+            className="eea-search-links mobile tablet computer only clearfix"
+            style={{ color: 'white' }}
+          >
+            <a href="http://search.apps.eea.europa.eu" className="pull-left">
+              <span>Advanced search</span>
+            </a>
+            <a
+              className="pull-right"
+              href="https://www.eea.europa.eu/help/glossary"
+              onClick={(evt) =>
+                this.onLinkClick(evt, 'https://www.eea.europa.eu/help/glossary')
+              }
+            >
+              A-Z Glossary
+            </a>
+          </div>
         </div>
       </>
     );

diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides
@@ -91,7 +91,7 @@
 
     .navigation-links {
       display: block !important;
-      margin-top: 4em;
+      margin-top: 6em;
     }
 
     .navigation-links a.item {

diff --git a/theme/site/elements/input.overrides b/theme/site/elements/input.overrides
@@ -69,6 +69,16 @@
 	}
 }
 
+@media only screen and (max-width: @mobileWidth) {
+  .header-wrapper .ui.pointing.secondary.stackable.open.menu {
+		.eea-search-links {
+			a {
+				color: @white;
+			}
+		}
+	}
+}
+
 .clearfix:after {
   display: table;
   clear: both;
@@ -86,6 +96,19 @@
   padding-left: 0.5em !important;
 }
 
+.searchbox {
+	.ui.accordion .title:not(.ui) {
+		padding: 0;
+	}
+	.ui.accordion:not(.styled) .title ~ .content.active {
+		position: absolute;
+		background: white;
+		width: 100%;
+		left: 0;
+		padding: 6px;
+	}
+}
+
 .ui.list > .item a.suggested-item {
 	font-size: 16px;
 	color: black;