refactor(header): restore union dropdown after implementation

eea · Mar 18, 2022 · 7e98bab · 7e98bab
1 parent 47f19cf
commit 7e98bab
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 35 deletions.
diff --git a/src/ui/Header/Header.stories.js b/src/ui/Header/Header.stories.js
@@ -36,7 +36,6 @@ const logoProps = {
   title: 'Site',
   alt: 'European Environment Agency',
   url: 'https://eea.europa.eu',
-  id: 'logo',
   src: LogoImage,
 };
 
@@ -267,7 +266,7 @@ const Template = (args) => {
               <div className="content">
                 <p>
                   All official European Union website addresses are in the{' '}
-                  <b>europa.eu</b> domain.
+                  europa.eu domain.
                 </p>
                 <a
                   href="https://europa.eu/european-union/contact/institutions-bodies_en"

diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
@@ -74,6 +74,7 @@ textarea.fluid {
       padding: @rectangleTiny;
       font-size: 18px;
     }
+
     i.icon {
       font-size: 18px;
     }
@@ -83,9 +84,9 @@ textarea.fluid {
 @media only screen and (min-width: @computerBreakpoint) {
   .ui.fluid.icon.input.search {
     input {
+      padding: @rectangleMedium;
       border-bottom: 3px solid;
       font-size: 40px;
-      padding: @rectangleMedium;
     }
 
     i.icon {

diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -22,6 +22,7 @@
       align-items: center;
       justify-content: space-between;
       z-index: @topSectionZindex;
+      width: 100% !important; // Semantic has auto
     }
     .item {
       display: flex;
@@ -62,35 +63,12 @@
       }
     }
 
-    /* Official union dropdowns */
     .official-union {
       display: flex;
       gap: @officialUnionGap;
-    }
-    .official-union.mobile.or.lower.hidden {
-      .ui.dropdown .menu {
-        padding: @tabletOfficialUnionPadding;
-
-        .content {
-          max-width: @tabletOfficialUnionMaxWidth;
-        }
 
-        p {
-          font-size: @officialUnionMenuFontSize;
-          font-weight: @officialUnionTextFontWeight;
-          white-space: @dropdownMenuContentWhiteSpace;
-        }
-        a {
-          font-size: @officialUnionMenuFontSize;
-          font-weight: @officialUnionLinkFontWeight;
-          white-space: @dropdownMenuContentWhiteSpace;
-          color: @officialUnionLinkColor;
-        }
-      }
-    }
-    .official-union.mobile.only {
       img {
-        width: @tabletOfficialUnionImageWidth;
+        width: @mobileOfficialUnionImageWidth;
       }
 
       .ui.dropdown {
@@ -102,12 +80,17 @@
           .content {
             max-width: @mobileOfficialUnionMaxWidth;
 
-            p,
-            a {
+            p {
               font-size: @mobileDropdownMenuContentFontSize;
-              font-weight: @dropdownMenuContentFontWeight;
+              font-weight: @officialUnionTextFontWeight;
               white-space: @dropdownMenuContentWhiteSpace;
             }
+            a {
+              font-size: @mobileDropdownMenuContentFontSize;
+              font-weight: @officialUnionLinkFontWeight;
+              white-space: @dropdownMenuContentWhiteSpace; 
+              color: @officialUnionLinkColor;
+            }
 
             i.icon,
             i.icons {
@@ -195,7 +178,7 @@
         }
       }
 
-      #logo {
+      .eea-logo {
         width: @logoWidth;
         max-width: @mobileLogoMaxWidth;
         margin-top: @mobileLogoMarginTop;
@@ -317,6 +300,29 @@ Header Actions - Burger and Search Icons
         margin-top: @tabletDropdownMenuMarginTop;
       }
 
+      .official-union {
+        img {
+          width: @tabletOfficialUnionImageWidth;
+        }
+        .ui.dropdown {
+          font-size: @tabletTopSectionItemFontSize;
+          .menu {
+            padding: @tabletOfficialUnionPadding;
+
+            .content {
+              max-width: @tabletOfficialUnionMaxWidth;
+
+              p {
+                font-size: @officialUnionMenuFontSize;
+              }
+              a {
+                font-size: @officialUnionMenuFontSize;
+              }
+            }
+          }
+        }
+      }
+
       /* Language dropdown */
       #language-switcher {
         font-size: @tabletLanguageFontSize;
@@ -337,7 +343,7 @@ Header Actions - Burger and Search Icons
       .ui.container {
         height: 117px;
 
-        #logo {
+        .eea-logo {
           max-width: @tabletLogoMaxWidth;
           margin-top: @tabletLogoMarginTop;
         }
@@ -379,7 +385,7 @@ Header Actions - Burger and Search Icons
       .ui.container {
         height: 160px;
 
-        #logo {
+        .eea-logo {
           max-width: @computerLogoMaxWidth;
           margin-top: @computerLogoMarginTop;
         }

diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
@@ -43,6 +43,7 @@
 @dropdownMenuContentWhiteSpace        : pre-wrap;
 @dropdownMenuContentFontWeight        : @normal;
 @mobileDropdownMenuContentFontSize    : @headerSmallFontSize;
+@desktopDropdownMenuContentFontSize   : @headerSmallFontSize;
 @dropdownMenuItemColorHover           : @white;
 @dropdownMenuItemBackgroundColorHover : @japaneseIndigo;
 // Official Union
@@ -55,8 +56,9 @@
 @tabletOfficialUnionPadding           : 0.75rem;
 @mobileOfficialUnionMaxWidth          : 110px;
 @tabletOfficialUnionMaxWidth          : 373px;
-@mobileOfficialUnionImageWidth        : 11px;
-@tabletOfficialUnionImageWidth        : 17px;
+//@mobileOfficialUnionImageWidth        : 11px;
+@mobileOfficialUnionImageWidth        : 16px;
+@tabletOfficialUnionImageWidth        : 33px;
 
 // Theme Sites
 @themeSitesMenuWidth                  : 210px;