From c3aa528f0ff95f2e01e969a70ad1239bb6a6253a Mon Sep 17 00:00:00 2001 From: Nicholas Blumberg <41446765+nick-next@users.noreply.github.com> Date: Wed, 13 Nov 2024 19:17:00 -0800 Subject: [PATCH] Improvements to header (#4709) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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: Screenshot 2024-11-04 at 8 01 06 PM --------- Co-authored-by: Pablo Noel --- server/webdriver/shared_tests/ranking_test.py | 6 +- server/webdriver/tests/homepage_test.py | 9 ++- static/css/base.scss | 75 ++++++++++--------- static/css/core.scss | 49 +++++++++--- .../base/components/header_bar/header_bar.tsx | 2 +- .../components/header_bar/header_logo.tsx | 1 + 6 files changed, 90 insertions(+), 52 deletions(-) diff --git a/server/webdriver/shared_tests/ranking_test.py b/server/webdriver/shared_tests/ranking_test.py index 7e3f95a74c..deae7c5d76 100644 --- 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 index b1fc7a74bc..3f7b8bda0e 100644 --- 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 index e20b0cba61..49e2f673ba 100644 --- 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 index 2877041f8d..5f402e71c1 100644 --- 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 index fcd00e0294..9b72c7bf37 100644 --- 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 (
-