From 2cad8418d701d04eaf9daf8c55f8f66c7d5f5e1f Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 22 Jul 2025 07:17:39 -0700 Subject: [PATCH 1/4] Coveo: Refactored CSS code --- assets/css/v2/style.css | 141 ++++++++++++++++++++-------------------- 1 file changed, 69 insertions(+), 72 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7f3bcd75..6240c5dc 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -950,7 +950,9 @@ main { /* MARK: Coveo */ -#search-v2 { + +/* Search results on content */ +atomic-search-interface#search-v2 { display: inline-block !important; width: 95vw; grid-column: 1 / -1; @@ -965,94 +967,89 @@ main { atomic-search-box { z-index: 0; } -} -atomic-search-interface { - height: fit-content; -} + atomic-search-layout { + grid-template-areas: + "atomic-section-search" + "atomic-section-status" + "atomic-section-facets" + "atomic-section-main"; -.header-search-box { - &::part(wrapper) { - border-radius: 0; - border-color: oklch(var(--color-foreground)); - } + grid-template-columns: minmax(50%, 100%) !important; - &::part(suggestions-wrapper) { - border-radius: 0; - border-color: oklch(var(--color-foreground)); - width: calc(100% + 2px); - margin-inline-start: -1px; - } + @media (min-width: 1024px) { + grid-template-areas: + "atomic-section-search atomic-section-status" + "atomic-section-facets atomic-section-main " + "atomic-section-facets . " !important; - &::part(submit-button-wrapper) { - --atomic-primary: var(--atomic-neutral-dark); - } -} + grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important; + column-gap: calc(1.5rem + 2rem) !important; + } -atomic-refine-toggle { - display: none; -} + atomic-layout-section[section="status"] { + /* Override Coveo's width to be full */ + margin: var(--atomic-layout-spacing-y) 0; + max-width: 100%; + display: block; + width: 100%; -@media (max-width: 1024px) { - atomic-refine-toggle { - display: block; - } -} + .atomic-full-summary-and-sort { + display: flex; + flex-direction: column; + align-items: start; + gap: 1rem; + justify-content: space-between; -atomic-query-summary { - /* Show duration */ - &::part(duration) { - display: inline-block !important; - } -} + @media (min-width: 480px) { + flex-direction: row; + align-items: center; + } -atomic-search-layout { - grid-template-areas: - "atomic-section-search" - "atomic-section-status" - "atomic-section-facets" - "atomic-section-main"; + atomic-query-summary { + &::part(duration) { + display: inline-block !important; + } + } - grid-template-columns: minmax(50%, 100%) !important; + atomic-refine-toggle { + display: none; - @media (min-width: 1024px) { - grid-template-areas: - "atomic-section-search atomic-section-status" - "atomic-section-facets atomic-section-main " - "atomic-section-facets . " !important; + @media (max-width: 1024px) { + display: block; + } + } + } + } - grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important; - column-gap: calc(1.5rem + 2rem) !important; + atomic-layout-section[section="search"] { + /* Override Coveo's width to be full */ + width: 100% !important; + max-width: 100% !important; + } } } -atomic-search-layout atomic-layout-section[section="status"] { - /* Override Coveo's width to be full */ - max-width: 100%; - display: block; - width: 100%; -} - -atomic-search-layout atomic-layout-section[section="search"] { - /* Override Coveo's width to be full */ - width: 100% !important; - max-width: 100% !important; -} +/* Search bar on header */ +atomic-search-interface#search-standalone-header { + height: fit-content; -.atomic-full-summary-and-sort { - display: flex; - flex-direction: column; - align-items: start; - gap: 1rem; - justify-content: space-between; + .header-search-box { + &::part(wrapper) { + border-radius: 0; + border-color: oklch(var(--color-foreground)); + } - @media (min-width: 480px) { - flex-direction: row; - align-items: center; - } + &::part(suggestions-wrapper) { + border-radius: 0; + border-color: oklch(var(--color-foreground)); + width: calc(100% + 2px); + margin-inline-start: -1px; + } - atomic-sort-dropdown::part(label) { - margin-inline-start: 0; + &::part(submit-button-wrapper) { + --atomic-primary: var(--atomic-neutral-dark); + } } } From 416b1b6acc35581d0c895dcaeb4fcd568d4a5503 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 22 Jul 2025 07:18:16 -0700 Subject: [PATCH 2/4] Coveo: Fixed suggestions not showing on search bar --- assets/css/v2/style.css | 3 --- assets/js/coveo.js | 15 +++++++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 6240c5dc..d34f8f17 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -452,9 +452,6 @@ ol li:last-child { .header__search { display: block; width: 14rem; - /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */ - transform: translateY(0); - overflow: hidden; } .header__product-selector { diff --git a/assets/js/coveo.js b/assets/js/coveo.js index 0d8798fe..c0498cd1 100644 --- a/assets/js/coveo.js +++ b/assets/js/coveo.js @@ -23,8 +23,9 @@ async function getsearchObj() { async function atomicCoveo() { /* Fetch the credentials */ await customElements.whenDefined('atomic-search-interface'); - const token = localStorage.getItem('coveo_jwt_v1'); - const org_id = localStorage.getItem('coveo_org_id_v1'); + const token = + 'eyJhbGciOiJIUzI1NiJ9.eyJzZWFyY2hIdWIiOiJIVUJfRVNfTmdpbnhfRG9jc19BbmRfT3JnIiwidjgiOnRydWUsInRva2VuSWQiOiJ1Ym1mejJpMzRvbmZ3c2FsaHBseHFvMmpjdSIsIm9yZ2FuaXphdGlvbiI6ImY1bmV0d29ya3Nwcm9kdWN0aW9uNXZraG4wMGgiLCJ1c2VySWRzIjpbeyJ0eXBlIjoiVXNlciIsIm5hbWUiOiJhbm9ueW1vdXMiLCJwcm92aWRlciI6IkVtYWlsIFNlY3VyaXR5IFByb3ZpZGVyIn1dLCJyb2xlcyI6WyJxdWVyeUV4ZWN1dG9yIl0sImlzcyI6IlNlYXJjaEFwaSIsImV4cCI6MTc1MzIyOTM0MCwiaWF0IjoxNzUzMTQyOTQwfQ.lsKbajGJBke_M3CzzFO8Vk6m61LpYE2gaBaFq1noqyI'; + const org_id = 'f5networksproduction5vkhn00h'; let searchObj = { token, org_id }; if (token === null || org_id === null || isJwtExpired(token)) { @@ -89,6 +90,16 @@ async function atomicCoveo() { await searchBarSidebar.executeFirstSearch(); } + + /* Hide atomic-relevance-inspector */ + const shadowElements = searchBarHeader.shadowRoot.childNodes; + for (let i = 0; i < shadowElements.length; i++) { + const val = shadowElements[i]; + if (val.localName === 'atomic-relevance-inspector') { + val.style.display = 'none'; + break; + } + } } document.addEventListener('DOMContentLoaded', async () => { From 37e8fbe546896ceadaebfcfca20d51c68561b2e4 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 22 Jul 2025 07:36:46 -0700 Subject: [PATCH 3/4] Coveo: Removed extra searchbar on search page --- assets/css/v2/style.css | 17 ++++++++++++----- exampleSite/content/search.md | 2 -- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index d34f8f17..7b2a3120 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -975,8 +975,15 @@ atomic-search-interface#search-v2 { grid-template-columns: minmax(50%, 100%) !important; @media (min-width: 1024px) { + &:has(atomic-search-box) { + grid-template-areas: + "atomic-section-search atomic-section-status" + "atomic-section-facets atomic-section-main " + "atomic-section-facets . " !important; + } + grid-template-areas: - "atomic-section-search atomic-section-status" + "atomic-section-facets atomic-section-status" "atomic-section-facets atomic-section-main " "atomic-section-facets . " !important; @@ -1024,6 +1031,10 @@ atomic-search-interface#search-v2 { width: 100% !important; max-width: 100% !important; } + + atomic-layout-section[section="facets"] { + margin: var(--atomic-layout-spacing-y) 0; + } } } @@ -1050,10 +1061,6 @@ atomic-search-interface#search-standalone-header { } } -#atomic-search-box-xqtsq-popup { - z-index: 9999; -} - body:not(:has(.main-layout)) header atomic-search-interface { /* Show on landing pages */ display: block; diff --git a/exampleSite/content/search.md b/exampleSite/content/search.md index 9491ab16..1c361113 100644 --- a/exampleSite/content/search.md +++ b/exampleSite/content/search.md @@ -1,7 +1,5 @@ --- type: search title: Search -params: - searchOnPage: true url: search.html --- \ No newline at end of file From 4d80506f82ecbed06710b6ffe20f2fb04cc49819 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 22 Jul 2025 07:49:28 -0700 Subject: [PATCH 4/4] Coveo: Fixed z-index issues + removed hardcoded token --- assets/css/v2/style.css | 4 +++- assets/js/coveo.js | 5 ++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7b2a3120..70b4bb0d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -435,7 +435,7 @@ ol li:last-child { -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; - z-index: 1; + z-index: 2; .header-container { display: flex; @@ -950,6 +950,8 @@ main { /* Search results on content */ atomic-search-interface#search-v2 { + position: relative; + z-index: 1; display: inline-block !important; width: 95vw; grid-column: 1 / -1; diff --git a/assets/js/coveo.js b/assets/js/coveo.js index c0498cd1..5d67d906 100644 --- a/assets/js/coveo.js +++ b/assets/js/coveo.js @@ -23,9 +23,8 @@ async function getsearchObj() { async function atomicCoveo() { /* Fetch the credentials */ await customElements.whenDefined('atomic-search-interface'); - const token = - 'eyJhbGciOiJIUzI1NiJ9.eyJzZWFyY2hIdWIiOiJIVUJfRVNfTmdpbnhfRG9jc19BbmRfT3JnIiwidjgiOnRydWUsInRva2VuSWQiOiJ1Ym1mejJpMzRvbmZ3c2FsaHBseHFvMmpjdSIsIm9yZ2FuaXphdGlvbiI6ImY1bmV0d29ya3Nwcm9kdWN0aW9uNXZraG4wMGgiLCJ1c2VySWRzIjpbeyJ0eXBlIjoiVXNlciIsIm5hbWUiOiJhbm9ueW1vdXMiLCJwcm92aWRlciI6IkVtYWlsIFNlY3VyaXR5IFByb3ZpZGVyIn1dLCJyb2xlcyI6WyJxdWVyeUV4ZWN1dG9yIl0sImlzcyI6IlNlYXJjaEFwaSIsImV4cCI6MTc1MzIyOTM0MCwiaWF0IjoxNzUzMTQyOTQwfQ.lsKbajGJBke_M3CzzFO8Vk6m61LpYE2gaBaFq1noqyI'; - const org_id = 'f5networksproduction5vkhn00h'; + const token = localStorage.getItem('coveo_jwt_v1'); + const org_id = localStorage.getItem('coveo_org_id_v1'); let searchObj = { token, org_id }; if (token === null || org_id === null || isJwtExpired(token)) {