diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 1a5c1001..22b9ce5d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -98,9 +98,34 @@ header { .header-container { display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; + + > ul { + padding: 0; + } + + @media (max-width: 700px) { + a, + ul { + width: 50%; + } + + li { + float: right; + } + + div { + order: 3; + width: 100%; + + #search-standalone-header { + margin-top: 1rem; + } + } + } } ul { @@ -213,6 +238,7 @@ nav { grid-template-columns: var(--text-content-width-iphone-13) 1fr; grid-template-rows: var(--breadcrumb-max-height) 1fr; z-index: 1; + margin-top: 2rem; } .docs-container { @@ -320,7 +346,6 @@ nav { --side-gutter-width ); column-gap: var(--component-gap); - margin-top: 2rem; } .content-layout .side-gutter { @@ -402,6 +427,9 @@ atomic-search-interface { height: fit-content; margin-bottom: 2rem; margin-top: 2rem; +} + +#search-standalone-sidebar { min-height: 54px; max-height: 54px; } @@ -477,6 +505,30 @@ atomic-search-layout atomic-layout-section[section="search"] { z-index: 9999; } +header atomic-search-interface { + /* Hide by default */ + display: none; +} + +body:not(:has(.main-layout)) header atomic-search-interface { + /* Show on landing pages */ + display: block; +} + +@media (max-width: 1184px) { + /* Show on pages with sidebar if it is hidden */ + body:has(.sidebar-layout) header atomic-search-interface { + display: block; + } +} + +@media (max-width: 1023px) { + /* Show on search page with facet if it is hidden */ + body:has(atomic-search-layout) header atomic-search-interface { + display: block; + } +} + /* Sidebar */ .sidebar { display: flex; diff --git a/assets/js/coveo.js b/assets/js/coveo.js index 9b7a462d..780e36cd 100644 --- a/assets/js/coveo.js +++ b/assets/js/coveo.js @@ -21,10 +21,8 @@ async function getsearchObj() { } async function atomicCoveo() { + /* Fetch the credentials */ await customElements.whenDefined('atomic-search-interface'); - const searchInterface = document.querySelector('#search-v2'); - const searchInterfaceStandalone = - document.querySelector('#search-standalone'); const token = localStorage.getItem('coveo_jwt_v1'); const org_id = localStorage.getItem('coveo_org_id_v1'); let searchObj = { token, org_id }; @@ -35,8 +33,14 @@ async function atomicCoveo() { localStorage.setItem('coveo_org_id_v1', searchObj.org_id); } - if (searchInterface) { - await searchInterface.initialize({ + /* Initialize the interfaces with credentials */ + const searchPageInterface = document.querySelector('#search-v2'); + const searchBarHeader = document.querySelector('#search-standalone-header'); + const searchBarSidebar = document.querySelector('#search-standalone-sidebar'); + const sidebar = document.querySelector('#sidebar-layout'); + + if (searchPageInterface) { + await searchPageInterface.initialize({ accessToken: token, organizationId: org_id, analytics: { analyticsMode: 'legacy' }, @@ -48,10 +52,27 @@ async function atomicCoveo() { return request; }, }); - searchInterface.executeFirstSearch(); + await searchPageInterface.executeFirstSearch(); + } else { + if (sidebar) { + await searchBarSidebar.initialize({ + accessToken: token, + organizationId: org_id, + analytics: { analyticsMode: 'legacy' }, + preprocessRequest: (request, clientOrigin, metadata) => { + const body = JSON.parse(request.body); + body.q = `<@- ${body.q} -@>`; + request.body = JSON.stringify(body); + + return request; + }, + }); + await searchBarSidebar.executeFirstSearch(); + } } - await searchInterfaceStandalone.initialize({ + /* Initialize the header searchbar*/ + await searchBarHeader.initialize({ accessToken: token, organizationId: org_id, analytics: { analyticsMode: 'legacy' }, @@ -63,7 +84,8 @@ async function atomicCoveo() { return request; }, }); - searchInterfaceStandalone.executeFirstSearch(); + + await searchBarHeader.executeFirstSearch(); } async function legacyCoveo() { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 719231d3..e7447166 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -61,7 +61,6 @@ v1ElementIds.forEach((elementId) => { const element = document.getElementById(elementId); - console.log(element) if (element !== null) { element.style.display = isNewTheme ? "none" : ""; } diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html index 6bc7f917..97ea795a 100644 --- a/layouts/_default/docs.html +++ b/layouts/_default/docs.html @@ -15,7 +15,7 @@ {{ end }}
-