Coveo: Refactor to add the coveo filter to mobile

Author: lamATnginx

assets/css/v2/style.css

@@ -728,11 +728,6 @@ atomic-search-interface {
   margin-top: 2rem;
 }
 
-#search-standalone-sidebar {
-  min-height: 54px;
-  max-height: 54px;
-}
-
 atomic-search-box {
   &::part(wrapper) {
     border-radius: 0;
@@ -751,6 +746,16 @@ atomic-search-box {
   }
 }
 
+atomic-refine-toggle {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  atomic-refine-toggle {
+    display: block;
+  }
+}
+
 atomic-query-summary {
   /* Show duration */
   &::part(duration) {
@@ -761,6 +766,7 @@ atomic-query-summary {
 atomic-search-layout {
   grid-template-areas:
     "atomic-section-search"
+    "atomic-section-facets"
     "atomic-section-main"
     "." !important;
 

exampleSite/content/search.md

@@ -0,0 +1,5 @@
+---
+title: Search Results
+type: search
+url: 'search.html'
+---

layouts/search/single.html

@@ -111,6 +111,7 @@
       <!-- Search/Metadata Section -->
       <atomic-layout-section section="search">
         <div class="atomic-full-summary-and-sort">
+          <atomic-refine-toggle></atomic-refine-toggle>
           <atomic-query-summary></atomic-query-summary>
           <atomic-sort-dropdown>
             <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
@@ -121,8 +122,9 @@
 
       <!-- Facet Section -->
       <atomic-layout-section section="facets">
-        <atomic-facet field="f5_product" label="Show by product"></atomic-facet>
-        <atomic-refine-toggle></atomic-refine-toggle>
+        <atomic-facet-manager>
+          <atomic-facet field="f5_product" label="Show by product"></atomic-facet>
+        </atomic-facet-manager>
       </atomic-layout-section>
 
       <!-- Main Section -->