feat: minor style improvements (#282)

EMP-629
empathyco · May 4, 2023 · b2db136 · b2db136
1 parent fecd415
commit b2db136
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 41 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -94,17 +94,4 @@
       display: none;
     }
   }
-
-  .x-recommendations__item {
-    max-width: 142px;
-  }
-
-  // The width is needed because the empathize has position absolute.
-  // The z-index is to avoid the related tags appearing over the empathize.
-  .x-desktop {
-    .x-empathize {
-      z-index: 1;
-      width: 100%;
-    }
-  }
 </style>
diff --git a/src/components/desktop/desktop-toolbar.vue b/src/components/desktop/desktop-toolbar.vue
@@ -2,6 +2,7 @@
   <div
     v-if="$x.totalResults"
     class="x-flex x-items-center x-justify-end x-gap-24"
+    :class="{ 'x-mb-8': !$x.selectedFilters.length }"
     data-test="total-results"
   >
     <i18n class="x-text1 x-text1-lg x-flex-auto" path="totalResults.message" tag="span">

diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
@@ -2,11 +2,9 @@
   <div
     class="x-layout-container x-layout-max-width-md desktop:x-layout-min-margin-32 large:x-layout-max-width-lg large:x-layout-min-margin-48"
   >
-    <div class="x-layout-item">
-      <header class="x-grid x-grid-cols-6 x-items-start x-gap-12 x-pt-24 x-pb-16">
-        <div class="x-pt-12">
-          <Logo />
-        </div>
+    <div class="x-layout-item x-pb-24">
+      <header class="x-grid x-grid-cols-6 x-items-center x-gap-12 x-pt-24">
+        <Logo />
 
         <div class="x-col-span-4 x-flex x-flex-col x-gap-16">
           <div class="x-relative">
@@ -15,18 +13,20 @@
               <PredictiveLayer class="x-absolute x-shadow-lg" />
             </LocationProvider>
           </div>
-          <LocationProvider location="predictive_layer">
-            <RelatedTags v-if="$x.relatedTags.length > 0" />
-          </LocationProvider>
         </div>
-
         <CloseMainModal class="x-button-lead x-button-circle x-button-ghost x-justify-self-end">
           <CrossIcon class="x-icon-lg" />
         </CloseMainModal>
       </header>
+
+      <div class="x-grid x-grid-cols-6">
+        <LocationProvider location="predictive_layer" class="x-col-span-4 x-col-start-2">
+          <RelatedTags v-if="$x.relatedTags.length > 0" class="x-pt-8" />
+        </LocationProvider>
+      </div>
     </div>
 
-    <MainScroll>
+    <MainScroll class="x-flex x-flex-col">
       <Scroll id="main-scroll">
         <div v-if="!$x.redirections.length && hasSearched" class="x-layout-item">
           <LocationProvider location="results">
@@ -36,7 +36,10 @@
           <DesktopToolbar />
         </div>
 
-        <div v-if="$x.totalResults > 0 && hasSearched" class="x-layout-item">
+        <div
+          v-if="$x.totalResults > 0 && hasSearched && $x.selectedFilters.length"
+          class="x-layout-item"
+        >
           <SelectedFilters class="x-py-16" />
         </div>
 

diff --git a/src/components/mobile/mobile-toolbar.vue b/src/components/mobile/mobile-toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-flex x-flex-auto x-items-center">
+  <div v-if="$x.totalResults" class="x-flex x-flex-auto x-items-center">
     <i18n class="x-text1 x-flex-auto" path="totalResults.message" tag="span">
       <template #totalResults>
         {{ $x.totalResults }}

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
@@ -44,13 +44,13 @@
           </Scroll>
         </MainScroll>
 
-        <div class="x-layout-overlap x-layout-item">
+        <div class="x-layout-overlap x-layout-item x-pointer-events-none">
           <div class="x-mb-32 x-grid x-grid-cols-12 x-gap-24">
             <MobileOpenAside
               v-if="$x.totalResults > 0"
-              class="x-col-span-8 x-col-start-3 tablet:x-col-span-4 tablet:x-col-start-5"
+              class="x-pointer-events-auto x-col-span-8 x-col-start-3 tablet:x-col-span-4 tablet:x-col-start-5"
             />
-            <ScrollToTop class="x-button-lg x-col-start-11" />
+            <ScrollToTop class="x-button-lg x-pointer-events-auto x-col-start-11" />
           </div>
         </div>
       </div>

diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
@@ -1,5 +1,8 @@
 <template>
-  <Empathize :animation="empathizeAnimation" class="x-bg-neutral-0 desktop:x-py-16 desktop:x-pl-16">
+  <Empathize
+    :animation="empathizeAnimation"
+    class="x-bg-neutral-0 desktop:x-z-[1] desktop:x-w-full desktop:x-py-16 desktop:x-pl-16"
+  >
     <component
       :is="isDesktopOrGreater ? 'div' : 'BaseScroll'"
       v-if="showEmpathize || showIdentifierResults"
@@ -38,7 +41,7 @@
             <BaseIdModalOpen
               v-if="isTabletOrLess && !$x.query.searchBox"
               modalId="my-history-aside"
-              class="x-self-end x-button-neutral x-button-sm x-button-tight x-pr-8"
+              class="x-button-neutral x-button-sm x-button-tight x-self-end x-pr-8"
             >
               {{ $t('myHistory.openButton') }}
               <SettingsIcon class="x-icon-lg" />
@@ -156,7 +159,7 @@
             <BaseIdModalOpen
               v-if="isDesktopOrGreater && !$x.query.searchBox"
               modalId="my-history-aside"
-              class="x-self-start x-button-neutral x-button-sm x-button-tight"
+              class="x-button-neutral x-button-sm x-button-tight x-self-start"
               data-test="my-history-button"
             >
               <SettingsIcon />

diff --git a/src/components/predictive-layer/sliding-recommendations.vue b/src/components/predictive-layer/sliding-recommendations.vue
@@ -23,6 +23,7 @@
             data-test="recommendation-item"
             :showDescription="false"
             :showAddToCart="false"
+            class="x-w-[200px]"
           />
         </template>
       </Recommendations>

diff --git a/src/components/results/custom-recommendations.vue b/src/components/results/custom-recommendations.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$x.recommendations.length > 0"
-    class="x-flex x-flex-col x-items-start x-pb-32 desktop:x-items-center"
+    class="x-flex x-flex-col x-items-start x-gap-24 x-pb-32 desktop:x-items-center"
   >
     <h1 class="x-title1 x-title1-sm desktop:x-title1-md">
       {{ $t('recommendations.title') }}

diff --git a/src/components/results/result.vue b/src/components/results/result.vue
@@ -1,5 +1,9 @@
 <template>
-  <MainScrollItem :item="result" tag="article" class="x-result x-group/result x-gap-4">
+  <MainScrollItem
+    :item="result"
+    tag="article"
+    class="x-result x-group/result x-flex x-flex-col x-gap-4"
+  >
     <div class="x-relative">
       <BaseResultLink class="x-result__picture" :result="result">
         <BaseResultImage :result="result" :loadAnimation="imageAnimation" showNextImageOnHover>
@@ -37,7 +41,7 @@
         <BaseResultCurrentPrice :result="result" class="x-text2 x-text2-lg x-font-bold" />
         <BaseResultPreviousPrice
           :result="result"
-          class="x-text2 x-text-neutral-75 x-line-through"
+          class="x-text2 x-leading-[1.7] x-text-neutral-75 x-line-through"
         />
       </div>
     </BaseResultLink>

diff --git a/src/components/search/results/partial-results.vue b/src/components/search/results/partial-results.vue
@@ -5,7 +5,7 @@
         <template #header>
           <PartialQueryButton
             :query="partialResult.query"
-            class="x-button x-button-tight max-desktop:x-px-16"
+            class="x-button-tight x-button max-desktop:x-px-16"
           >
             {{ $t('partialResults.query', { query: partialResult.query }) }}
             {{ $t('partialResults.totalResults', { totalResults: partialResult.totalResults }) }}
@@ -17,7 +17,12 @@
           class="x-flex x-gap-16 x-pt-4 max-desktop:x-px-16"
         >
           <template #result="{ item: result }">
-            <Result :result="result" class="x-w-[calc(38vw-16px)] desktop:x-w-[224px]" />
+            <Result
+              :result="result"
+              class="x-w-[calc(38vw-16px)] x-min-w-[142px] desktop:x-w-[224px]"
+              :showDescription="isTabletOrGreater"
+              showCompactPrices
+            />
           </template>
         </ItemsList>
       </CustomSlidingPanel>
@@ -26,21 +31,26 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent } from 'vue';
   import { ArrowRightIcon, ItemsList } from '@empathyco/x-components';
-  import { Component, Vue } from 'vue-property-decorator';
   import { PartialQueryButton, PartialResultsList } from '@empathyco/x-components/search';
+  import { useDevice } from '../../../composables/use-device.composable';
   import ResultComponent from '../../results/result.vue';
   import CustomSlidingPanel from '../../custom-sliding-panel.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       ArrowRightIcon,
       CustomSlidingPanel,
       ItemsList,
       Result: ResultComponent,
       PartialResultsList,
       PartialQueryButton
+    },
+    setup() {
+      const { isTabletOrGreater } = useDevice();
+
+      return { isTabletOrGreater };
     }
-  })
-  export default class PartialResults extends Vue {}
+  });
 </script>
diff --git a/src/x-components/plugin.options.ts b/src/x-components/plugin.options.ts
@@ -4,7 +4,9 @@ import App from '../App.vue';
 import * as messages from '../i18n/messages';
 import store from '../store';
 import { adapter } from '../adapter/adapter';
+import { useDevice } from '../composables/use-device.composable';
 
+const device = useDevice();
 export const installXOptions: InstallXOptions = {
   adapter,
   store,
@@ -19,7 +21,7 @@ export const installXOptions: InstallXOptions = {
   async installExtraPlugins({ vue, snippet }) {
     const i18n = await I18n.create({
       locale: snippet.uiLang,
-      device: (snippet.device as string) ?? 'mobile',
+      device: (snippet.device as string) ?? device.deviceName.value,
       fallbackLocale: 'en',
       messages
     });