Coveo: Implement param for left-aligned input on search page (#275)

* Coveo: Implement param for left-aligned input on search page

* Tests: Update snapshots

Author: TasoOneAsia

assets/css/v2/style.css

@@ -732,7 +732,7 @@ atomic-search-interface {
   margin-top: 2rem;
 }
 
-atomic-search-box {
+.header-search-box {
   &::part(wrapper) {
     border-radius: 0;
     border-color: oklch(var(--color-foreground));
@@ -770,15 +770,15 @@ atomic-query-summary {
 atomic-search-layout {
   grid-template-areas:
     "atomic-section-search"
+    "atomic-section-status"
     "atomic-section-facets"
-    "atomic-section-main"
-    "." !important;
+    "atomic-section-main";
 
   grid-template-columns: minmax(50%, 100%) !important;
 
   @media (min-width: 1024px) {
     grid-template-areas:
-      ".                     atomic-section-search"
+      "atomic-section-search atomic-section-status"
       "atomic-section-facets atomic-section-main  "
       "atomic-section-facets .                    " !important;
 
@@ -787,10 +787,17 @@ atomic-search-layout {
   }
 }
 
-atomic-search-layout atomic-layout-section[section="search"] {
+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;
 }
 
 .atomic-full-summary-and-sort {

exampleSite/content/search.md

@@ -0,0 +1,7 @@
+---
+type: search
+title: Search
+params:
+  searchOnPage: true
+url: search.html
+---

layouts/partials/coveo-atomic-search.html

@@ -1,4 +1,4 @@
 <atomic-search-interface id="search-standalone-header" data-mf="true" style="display:none;">
-    <atomic-search-box redirection-url="/search.html">
+    <atomic-search-box redirection-url="/search.html" class="header-search-box">
     </atomic-search-box>
 </atomic-search-interface>

layouts/partials/coveo-atomic.html

@@ -1,7 +1,12 @@
 <atomic-search-interface id="search-v2">
     <atomic-search-layout>
       <!-- Search/Metadata Section -->
-      <atomic-layout-section section="search">
+      {{ if .Params.searchOnPage }}
+        <atomic-layout-section section="search">
+          <atomic-search-box></atomic-search-box>
+        </atomic-layout-section>
+      {{ end }}
+      <atomic-layout-section section="status">
         <div class="atomic-full-summary-and-sort">
           <atomic-refine-toggle></atomic-refine-toggle>
           <atomic-query-summary></atomic-query-summary>