fix(empathize): hide empathize if it has no content (#511)

empathyco · Oct 9, 2024 · 3092202 · 3092202
1 parent e1e87de
commit 3092202
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/src/components/desktop/desktop-header-floating-predictive.vue b/src/components/desktop/desktop-header-floating-predictive.vue
@@ -7,7 +7,7 @@
         <div class="x-relative">
           <SearchBox />
           <LocationProvider location="predictive_layer">
-            <PredictiveLayer class="x-absolute x-shadow-lg desktop:x-py-16 desktop:x-pl-16" />
+            <PredictiveLayer class="x-absolute x-shadow-lg" />
           </LocationProvider>
         </div>
       </div>

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
@@ -13,9 +13,7 @@
 
     <div class="x-layout-expand" :class="{ 'x-layout-stack': x.query.search }">
       <LocationProvider location="predictive_layer" class="x-z-10">
-        <PredictiveLayer
-          :class="{ 'x-mb-40 x-border-b x-border-neutral-10 x-pb-16': !x.query.search }"
-        />
+        <PredictiveLayer />
       </LocationProvider>
 
       <!-- Results -->

diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
@@ -4,12 +4,12 @@
       @EmpathizeOpened="handleEmpathizeEvent('EmpathizeOpened')"
       @EmpathizeClosed="handleEmpathizeEvent('EmpathizeClosed')"
       :animation="empathizeAnimation"
-      class="x-layout-item x-absolute x-z-[1] x-w-full x-bg-neutral-0 x-py-4"
+      class="x-layout-item x-absolute x-z-[1] x-w-full x-bg-neutral-0"
     >
       <MaxDesktopWidthItem>
         <DesktopSearchboxAlign>
           <div class="x-layout-item">
-            <div v-if="showEmpathize || showIdentifierResults" class="x-h-full x-py-12 x-pl-[17px]">
+            <div v-if="showEmpathize || showIdentifierResults" class="x-h-full x-py-16 x-pl-[17px]">
               <div class="x-block">
                 <BaseKeyboardNavigation
                   class="x-flex x-items-start x-gap-24"
@@ -128,7 +128,7 @@
       </MaxDesktopWidthItem>
     </Empathize>
 
-    <div class="x-opacity-30">
+    <div v-if="showEmpathize" class="x-opacity-30">
       <Fade tag="div">
         <div
           v-if="showOverlay"

diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
@@ -1,13 +1,19 @@
 <template>
   <Empathize
     :animation="empathizeAnimation"
-    class="x-bg-neutral-0 desktop:x-z-[1] desktop:x-w-full"
+    class="desktop:x-z-[1] desktop:x-w-full"
+    :class="{ 'x-bg-neutral-0': !x.query.search || isDesktopOrGreater }"
   >
     <component
       :is="isDesktopOrGreater ? 'div' : 'BaseScroll'"
-      class="x-h-full desktop:x-my-16 desktop:x-ml-16"
+      class="x-h-full desktop:x-ml-16"
+      :class="{ 'x-bg-neutral-0': showEmpathize }"
     >
-      <div v-if="showEmpathize || showIdentifierResults" class="x-layout-item desktop:x-block">
+      <div
+        v-if="showEmpathize || showIdentifierResults"
+        class="x-layout-item x-pb-16 desktop:x-block desktop:x-pl-16 desktop:x-pt-16"
+        :class="{ 'x-mb-40 x-border-b x-border-neutral-10': !x.query.search && isTabletOrLess }"
+      >
         <BaseKeyboardNavigation
           class="x-flex x-flex-col desktop:x-grid desktop:x-grid-cols-12 desktop:x-items-start desktop:x-gap-24"
           :navigationHijacker="navigationHijacker"