diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7f3bcd75..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; @@ -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 { @@ -950,7 +947,11 @@ main { /* MARK: Coveo */ -#search-v2 { + +/* Search results on content */ +atomic-search-interface#search-v2 { + position: relative; + z-index: 1; display: inline-block !important; width: 95vw; grid-column: 1 / -1; @@ -965,101 +966,103 @@ 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"; + + 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; + } -.header-search-box { - &::part(wrapper) { - border-radius: 0; - border-color: oklch(var(--color-foreground)); - } + grid-template-areas: + "atomic-section-facets atomic-section-status" + "atomic-section-facets atomic-section-main " + "atomic-section-facets . " !important; - &::part(suggestions-wrapper) { - border-radius: 0; - border-color: oklch(var(--color-foreground)); - width: calc(100% + 2px); - margin-inline-start: -1px; - } + grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important; + column-gap: calc(1.5rem + 2rem) !important; + } - &::part(submit-button-wrapper) { - --atomic-primary: var(--atomic-neutral-dark); - } -} + 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%; -atomic-refine-toggle { - display: none; -} + .atomic-full-summary-and-sort { + display: flex; + flex-direction: column; + align-items: start; + gap: 1rem; + justify-content: space-between; -@media (max-width: 1024px) { - atomic-refine-toggle { - display: block; - } -} + @media (min-width: 480px) { + flex-direction: row; + align-items: center; + } -atomic-query-summary { - /* Show duration */ - &::part(duration) { - display: inline-block !important; - } -} + atomic-query-summary { + &::part(duration) { + display: inline-block !important; + } + } -atomic-search-layout { - grid-template-areas: - "atomic-section-search" - "atomic-section-status" - "atomic-section-facets" - "atomic-section-main"; + atomic-refine-toggle { + display: none; - grid-template-columns: minmax(50%, 100%) !important; + @media (max-width: 1024px) { + display: block; + } + } + } + } - @media (min-width: 1024px) { - grid-template-areas: - "atomic-section-search atomic-section-status" - "atomic-section-facets atomic-section-main " - "atomic-section-facets . " !important; + atomic-layout-section[section="search"] { + /* Override Coveo's width to be full */ + width: 100% !important; + max-width: 100% !important; + } - grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important; - column-gap: calc(1.5rem + 2rem) !important; + atomic-layout-section[section="facets"] { + margin: var(--atomic-layout-spacing-y) 0; + } } } -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); + } } } -#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/assets/js/coveo.js b/assets/js/coveo.js index 0d8798fe..5d67d906 100644 --- a/assets/js/coveo.js +++ b/assets/js/coveo.js @@ -89,6 +89,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 () => { 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