feature: add image change on result hover (#279)

empathyco · May 3, 2023 · 289d31d · 289d31d
1 parent 4eff97c
commit 289d31d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/pre-search/custom-query-preview.vue b/src/components/pre-search/custom-query-preview.vue
@@ -6,7 +6,7 @@
     #default="{ query, totalResults, results }"
   >
     <div class="x-mb-40 x-flex x-flex-col x-gap-2 desktop:x-mb-64 desktop:x-gap-16">
-      <h1 class="x-title1 max-desktop:x-px-16 max-desktop:x-title1-sm">
+      <h1 class="x-title1 max-desktop:x-title1-sm max-desktop:x-px-16">
         {{ getTitle(query) }}
       </h1>
       <CustomSlidingPanel>
@@ -20,11 +20,14 @@
             <ArrowRightIcon class="x-icon-lg" />
           </BaseEventButton>
         </template>
-        <ItemsList :items="results" class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
-          <template #result="{ item: result }">
-            <Result :result="result" class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]" />
-          </template>
-        </ItemsList>
+        <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
+          <Result
+            v-for="result in results"
+            :key="result.id"
+            :result="result"
+            class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]"
+          />
+        </div>
       </CustomSlidingPanel>
     </div>
   </QueryPreviewList>

diff --git a/src/components/results/result.vue b/src/components/results/result.vue
@@ -2,7 +2,7 @@
   <MainScrollItem :item="result" tag="article" class="x-result x-group/result x-gap-4">
     <div class="x-relative">
       <BaseResultLink class="x-result__picture" :result="result">
-        <BaseResultImage :result="result" :loadAnimation="imageAnimation" class="x-picture-zoom">
+        <BaseResultImage :result="result" :loadAnimation="imageAnimation" showNextImageOnHover>
           <template #placeholder>
             <BasePlaceholderImage />
           </template>