Improvements to header (datacommonsorg#4709)

## Description This PR follows up from previous changes to the autocomplete, in order to fix the margins around the box in some views. The header search bar now displays in the correct place in all views, including with the autocomplete. Some additional refactoring of the styles was done, including the beginning of a more complete separation of the new home page styles from the template custom styles. As an example of one of the adjustments: Before: ![before](https://github.com/user-attachments/assets/c79367a7-dd81-4031-8ab8-a08a43d1e191) After: <img width="560" alt="Screenshot 2024-11-04 at 8 01 06 PM" src="https://github.com/user-attachments/assets/0057a7e3-a083-4525-9b07-2ce23acefa9c"> --------- Co-authored-by: Pablo Noel <[email protected]>
hqpho · Nov 14, 2024 · c3aa528 · c3aa528
1 parent 2adf62c
commit c3aa528
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 52 deletions.
diff --git a/server/webdriver/shared_tests/ranking_test.py b/server/webdriver/shared_tests/ranking_test.py
@@ -61,7 +61,8 @@ def test_energy_consumption_bottom_ranking_hi(self):
     )
 
     title_present = EC.text_to_be_present_in_element(
-        (By.CSS_SELECTOR, '#main-nav .navbar-brand'), self.dc_title_string)
+        (By.CSS_SELECTOR, '#main-navbar-container .navbar-brand'),
+        self.dc_title_string)
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(title_present)
 
     subtitle_present = EC.text_to_be_present_in_element(
@@ -108,7 +109,8 @@ def test_energy_consumption_top_ranking_ko(self):
     )
 
     title_present = EC.text_to_be_present_in_element(
-        (By.CSS_SELECTOR, '#main-nav .navbar-brand'), self.dc_title_string)
+        (By.CSS_SELECTOR, '#main-navbar-container .navbar-brand'),
+        self.dc_title_string)
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(title_present)
 
     subtitle_present = EC.text_to_be_present_in_element(

diff --git a/server/webdriver/tests/homepage_test.py b/server/webdriver/tests/homepage_test.py
@@ -29,7 +29,8 @@ def test_homepage_en_by_css(self):
     self.driver.get(self.url_ + '/')
 
     title_present = EC.text_to_be_present_in_element(
-        (By.CSS_SELECTOR, '#main-nav .navbar-brand'), self.dc_title_string)
+        (By.CSS_SELECTOR, '#main-navbar-container .navbar-brand'),
+        self.dc_title_string)
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(title_present)
 
     hero_msg = self.driver.find_elements(By.ID, 'hero')[0]
@@ -43,7 +44,8 @@ def test_homepage_it(self):
     self.driver.get(self.url_ + '/?hl=it')
 
     title_present = EC.text_to_be_present_in_element(
-        (By.CSS_SELECTOR, '#main-nav .navbar-brand'), self.dc_title_string)
+        (By.CSS_SELECTOR, '#main-navbar-container .navbar-brand'),
+        self.dc_title_string)
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(title_present)
 
     hero_msg = self.driver.find_elements(By.ID, 'hero')[0]
@@ -99,7 +101,8 @@ def test_homepage_autocomplete(self):
     self.driver.get(self.url_ + '/?ac_on=true')
 
     title_present = EC.text_to_be_present_in_element(
-        (By.CSS_SELECTOR, '#main-nav .navbar-brand'), self.dc_title_string)
+        (By.CSS_SELECTOR, '#main-navbar-container .navbar-brand'),
+        self.dc_title_string)
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(title_present)
 
     search_box_input = self.driver.find_element(By.ID, 'query-search-input')

diff --git a/static/css/base.scss b/static/css/base.scss
@@ -65,6 +65,10 @@ $headings-font-family: $font-family-sans-serif;
 
 @import "node_modules/bootstrap/scss/bootstrap";
 
+.main-content {
+  margin: 3rem auto 6rem;
+}
+
 :root {
   --font-family: "Roboto", "Helvetica Neue", Arial, sans-serif !important;
   --breakpoint-xl: 1040px;
@@ -79,38 +83,44 @@ $headings-font-family: $font-family-sans-serif;
   color: transparent !important;
 }
 
-#main-nav .nav-item a {
-  color: var(--gm-3-ref-neutral-neutral-40);
-
-  &:hover {
-    text-decoration: none;
+#main-nav {
+  .navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    a {
+      color: #000;
+      font-size: 22px;
+      font-style: normal;
+      font-weight: 400;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+    span,
+    span a {
+      font-weight: 200;
+    }
+    .main-header-logo {
+      img {
+        max-height: 35px;
+      }
+    }
   }
-}
-
-#main-nav .navbar-brand a {
-  color: #000;
-  font-size: 22px;
-  font-style: normal;
-  font-weight: 400;
-  &:hover {
-    text-decoration: none;
+  .nav-item a {
+    color: var(--gm-3-ref-neutral-neutral-40);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  .sep {
+    color: var(--gm-3-ref-neutral-neutral-40);
+    display: inline-block;
+    margin: 0 0.5rem;
   }
 }
 
-#main-nav .navbar-brand span,
-#main-nav .navbar-brand span a {
-  font-weight: 200;
-}
-
-#main-nav .navbar-brand .sep {
-  color: var(--gm-3-ref-neutral-neutral-40);
-  display: inline-block;
-  margin: 0 0.5rem;
-}
-
-.main-content {
-  margin: 3rem auto 6rem;
-}
 
 /** CSE **/
 #main-header #___gcse_0 {
@@ -161,15 +171,6 @@ $headings-font-family: $font-family-sans-serif;
   background: var(--gm-3-white);
 }
 
-#main-header .main-header-logo {
-  display: flex;
-  align-items: center;
-  img {
-    height: 28px;
-    margin-right: 12px;
-  }
-}
-
 #main-header .nav-item.dropdown {
   margin-right: 1rem;
 }

diff --git a/static/css/core.scss b/static/css/core.scss
@@ -20,7 +20,7 @@
 @import "base";
 
 $header-desktop-height: 96px;
-$header-mobile-height: 152px;
+$header-mobile-height: 142px;
 $header-mobile-height-xs: 128px;
 $header-max-width: 1728px;
 
@@ -83,7 +83,7 @@ section {
   box-shadow: 0 1px 2px rgb(94, 94, 94, 0.1);
 }
 
-#main-nav {
+#main-navbar-container {
   position: relative;
   width: 100vw;
   height: fit-content;
@@ -110,9 +110,23 @@ section {
       display: flex;
       flex-shrink: 0;
       align-items: center;
-      white-space: nowrap;
-      a {
-        font-size: 1rem !important;
+      gap: calc(#{var.$spacing} * 2);
+      .main-header-logo {
+        img {
+          display: block;
+          margin: 0;
+          padding: 0;
+          max-width: 35px;
+        }
+      }
+      .main-header-name {
+        margin: 0;
+        padding: 0;
+        color: #000;
+        font-size: 1rem;
+        &:hover {
+          text-decoration: none;
+        }
       }
     }
 
@@ -346,9 +360,23 @@ section {
       display: flex;
       flex-shrink: 0;
       align-items: center;
-      white-space: nowrap;
-      a {
-        font-size: 1rem !important;
+      gap: calc(#{var.$spacing} * 2);
+      .main-header-logo {
+        img {
+          display: block;
+          margin: 0;
+          padding: 0;
+          max-width: 35px;
+        }
+      }
+      .main-header-name {
+        margin: 0;
+        padding: 0;
+        color: #000;
+        font-size: 1rem;
+        &:hover {
+          text-decoration: none;
+        }
       }
     }
 
@@ -565,7 +593,7 @@ section {
 .header-search-section {
   display: flex;
   flex-direction: column;
-  margin: 24px 0;
+  padding-top: 22px;
   flex-shrink: 0;
   flex-grow: 2;
   @include media-breakpoint-up(xl) {
@@ -577,6 +605,9 @@ section {
   @include media-breakpoint-down(sm) {
     padding-right: 0;
   }
+  @media (max-width: 620px) {
+    padding-top: 0;
+  }
 
   .search-bar {
     align-items: center;

diff --git a/static/js/apps/base/components/header_bar/header_bar.tsx b/static/js/apps/base/components/header_bar/header_bar.tsx
@@ -57,7 +57,7 @@ const HeaderBar = ({
 
   return (
     <div id="main-header-container">
-      <nav id="main-nav">
+      <nav id="main-navbar-container">
         <div className="navbar-menu-large">
           <HeaderLogo
             name={name}

diff --git a/static/js/apps/base/components/header_bar/header_logo.tsx b/static/js/apps/base/components/header_bar/header_logo.tsx
@@ -80,6 +80,7 @@ const HeaderLogo = ({
           });
           return true;
         }}
+        className="main-header-name"
       >
         {name}
       </a>
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,6 +80,7 @@ const HeaderLogo = ({ @@
               });
               return true;
             }}
+            className="main-header-name"
           >
             {name}
           </a>
@@ Expand Down @@