Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CED-2010: improve desktop search bar #7

Merged
merged 12 commits into from
Dec 4, 2024
Merged

CED-2010: improve desktop search bar #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f69a878
feat: redesign desktop nav search bar
hroth1994 Dec 3, 2024
f497b42
feat: center search bar
hroth1994 Dec 4, 2024
32430fb
feat: remove search icon when desktop search bar open
hroth1994 Dec 4, 2024
1b5781e
chore: remove unnecessary style
hroth1994 Dec 4, 2024
3254f7a
feat: remove bottom padding
hroth1994 Dec 4, 2024
f0402d8
feat: add border to nav links to prevent layout shift
hroth1994 Dec 4, 2024
97c2adb
Merge branch 'main' into ced-2010-improve-desktop-search-bar
hroth1994 Dec 4, 2024
682bfc1
fix: resolve warnings
hroth1994 Dec 4, 2024
7a84b97
feat: update docs
hroth1994 Dec 4, 2024
0e05393
chore: add eslint-disable
hroth1994 Dec 4, 2024
8dde8a5
feat: hide search bar on overlay click
hroth1994 Dec 4, 2024
41b0f70
fix: remove nested b-container
hroth1994 Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions es-bs-base/scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,7 @@ $nav-hover-delay: 300ms;
color: variables.$blue-900;
text-decoration: none;
background: variables.$gray-50;
border: variables.$btn-border-width solid transparent;
@include border-radius.border-radius(8px);
}

Expand Down
61 changes: 34 additions & 27 deletions es-design-system/pages/molecules/es-search-bar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,47 @@
<h2>
Basic example
</h2>
<es-search-bar
id="searchBar1"
class="my-500" />
<b-row class="mb-100 justify-content-center">
<b-col lg="10">
<es-search-bar
id="searchBar1"
class="my-500" />
</b-col>
</b-row>
<h2>
Example with open/close functionality
</h2>
<es-search-bar
v-if="showSearchBar"
id="searchBar2"
class="my-500">
<template #close>
<b-row class="mb-100 justify-content-center">
<b-col lg="10">
<es-search-bar
v-if="showSearchBar"
id="searchBar2"
class="my-500">
<template #close>
<es-button
class="nav-button order-2 ml-50"
aria-label="Close search bar"
variant="link"
@click="toggleSearchBar()">
<icon-x
width="30px"
height="30px" />
</es-button>
</template>
</es-search-bar>
<es-button
class="position-absolute nav-button mb-3"
aria-label="Close search bar"
style="right: 0"
v-else
variant="link"
aria-label="Open search bar"
class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
@click="toggleSearchBar()">
<icon-x
width="30px"
height="30px" />
<icon-search
class="align-self-center search-icon"
width="20px"
height="20px" />
</es-button>
</template>
</es-search-bar>
<es-button
v-else
variant="link"
aria-label="Open search bar"
class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
@click="toggleSearchBar()">
<icon-search
class="align-self-center search-icon"
width="20px"
height="20px" />
</es-button>
</b-col>
</b-row>

<div class="my-500">
<h2>
Expand Down
58 changes: 28 additions & 30 deletions es-vue-base/src/lib-components/EsNavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,24 +111,38 @@
:main-menu-text="globalContent.mainMenuText"
:name="topLevelMenu.name"
:sub-heading="topLevelMenu.subHeading"
:topics="topLevelMenu.topics">
:topics="topLevelMenu.topics"
class="top-level-menus">
<template #logo>
<slot name="logo" />
</template>
</es-nav-bar-top-level-menu>
<!-- desktop search bar -->
<div
class="w-100 nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
style="display: none">
<es-search-bar id="searchBarDesktop">
<template #close>
<es-button
class="order-2 nav-button nav-search-close-desktop ml-50"
aria-label="Close search bar"
variant="link">
<icon-x />
</es-button>
</template>
</es-search-bar>
</div>
<!-- desktop search icon -->
<div
id="navBarSearchIcon"
class="nav-item d-none pt-100"
:class="{
'd-lg-block': showSearch,
}">
class="search-icon-desktop nav-item pt-100"
:style="{ display: showSearch ? 'flex' : 'none' }">
<es-button
variant="link"
aria-label="Open search bar"
class="nav-button nav-link search-toggle-desktop d-none d-lg-flex flex-nowrap py-100">
<icon-search
class="align-self-center search-icon-desktop"
class="align-self-center"
width="20px !important"
height="20px !important" />
</es-button>
Expand All @@ -139,24 +153,6 @@
class="d-none d-lg-block pt-100"
:logged-out="accountContent.loggedOut" />
</b-container>
<!-- desktop search bar -->
<b-container
class="nav-search-bar-desktop"
style="display: none">
<div class="row w-100">
<es-search-bar id="searchBarDesktop">
<template #close>
<es-button
class="position-absolute nav-button mb-100 nav-search-close-desktop"
aria-label="Close search bar"
style="right: 0"
variant="link">
<icon-x />
</es-button>
</template>
</es-search-bar>
</div>
</b-container>
<!-- mobile+desktop product menus -->
<b-container
class="flex-lg-nowrap justify-content-lg-end product-menu">
Expand Down Expand Up @@ -337,13 +333,14 @@ export default {
// Search bar elements for hiding/showing
const searchIconMobile = document.querySelector('.search-icon-mobile');
const searchIconDesktop = document.querySelector('.search-icon-desktop');
const productMenu = document.querySelector('.product-menu');

const navSearchBarMobile = document.querySelector('.nav-search-bar-mobile');
const navSearchBarDesktop = document.querySelector('.nav-search-bar-desktop');
const searchBarMobile = document.getElementById('searchBarMobile');
const searchBarDesktop = document.getElementById('searchBarDesktop');

const topLevelMenus = document.querySelectorAll('.top-level-menus');

// Function to show/hide search bar
function toggle_search_bar_mobile(show_search_bar) {
navSearchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
Expand All @@ -358,14 +355,15 @@ export default {

// Function to show/hide search bar
function toggle_search_bar_desktop(show_search_bar) {
topLevelMenus.forEach((menu) => {
// eslint-disable-next-line no-param-reassign
menu.style.display = show_search_bar ? 'none' : 'flex';
});
searchIconDesktop.style.display = show_search_bar ? 'none' : 'flex';
navSearchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
productMenu.style.display = show_search_bar ? 'none' : 'flex';

if (show_search_bar) {
searchIconDesktop.classList.add('search-open');
searchBarDesktop.focus();
} else {
searchIconDesktop.classList.remove('search-open');
}
}
// Function to show/hide overlay
Expand Down Expand Up @@ -406,6 +404,7 @@ export default {

// Collapse all open menus on overlay click
overlay.addEventListener('click', () => {
toggle_search_bar_desktop(false);
collapse_mobile_menus();
});

Expand All @@ -417,7 +416,6 @@ export default {
.forEach((element) => {
element.addEventListener('mouseover', () => {
show_overlay(true);
toggle_search_bar_desktop(false);
});
element.addEventListener('mouseout', () => {
// Hide overlay on mouseout on desktop not mobile
Expand Down
8 changes: 3 additions & 5 deletions es-vue-base/src/lib-components/EsSearchBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div class="align-items-center w-100 d-flex flex-column flex-lg-row justify-content-center position-relative">
<!-- d-flex flex-column -->
<form
action="/search/"
class="d-flex align-items-center mx-auto justify-content-center order-2 order-lg-1 w-100"
Expand All @@ -9,11 +8,12 @@
:id="id"
v-model="searchText"
aria-label="Search bar"
class="w-50"
class="w-50 flex-grow-1 mb-lg-0"
label-sr-only
name="query"
:placeholder="placeholder"
:value="searchText"
v-bind="$attrs"
@keydown.enter="checkSearchText">
<template #label>
Search bar
Expand All @@ -23,20 +23,18 @@
</template>
</es-form-input>
<es-button
class="ml-50 mb-100"
class="ml-50 mb-100 mb-lg-0"
:disabled="!searchText"
type="submit"
:value="buttonText">
{{ buttonText }}
<!-- <input enterkeyhint="search" /> -->
</es-button>
</form>
<slot name="close" />
</div>
</template>

<script lang="js">
// import axios from 'axios';
import EsButton from './EsButton.vue';
import EsFormInput from './EsFormInput.vue';

Expand Down
Loading