Change empathize layout for mobile devices (#445)

* style: Rm x-layout-stack class when no query, add spacing to keep consistency with query previews EMP-3460 * style: Add margin top in popular searches for mobile EMP-3460 * style: Add border bottom to identify the end of empathize EMP-3460
empathyco · Feb 8, 2024 · 5f99727 · 5f99727
1 parent 0769197
commit 5f99727
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
@@ -11,9 +11,11 @@
       </div>
     </div>
 
-    <div class="x-layout-stack x-layout-expand">
+    <div class="x-layout-expand" :class="{ 'x-layout-stack': $x.query.search }">
       <LocationProvider location="predictive_layer" class="x-z-10">
-        <PredictiveLayer />
+        <PredictiveLayer
+          :class="{ 'x-mb-40 x-border-b x-border-neutral-10 x-pb-16': !$x.query.search }"
+        />
       </LocationProvider>
 
       <!-- Results -->

diff --git a/src/components/predictive-layer/predictive-popular-searches.vue b/src/components/predictive-layer/predictive-popular-searches.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-4">
+  <div class="x-mt-8 x-flex x-flex-col x-gap-4 desktop:x-mt-0">
     <h1 class="x-title4 x-title4-sm x-uppercase">
       {{ $t('popularSearches.title') }}
     </h1>
@@ -10,7 +10,7 @@
     >
       <template #suggestion="{ suggestion }">
         <PopularSearch
-          class="x-suggestion-lg x-suggestion desktop:x-suggestion-md"
+          class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
           :suggestion="suggestion"
         >
           <TrendingIcon class="x-icon-lg desktop:x-icon-md" />