fix: styles issues

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": ["plugin:@empathyco/x/all"]
+  "extends": ["plugin:@empathyco/x/all"],
+  "rules": {
+    "vuejs-accessibility/no-autofocus": "off"
+  }
 }

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.2",
-    "@empathyco/x-components": "^3.0.0-alpha.118",
+    "@empathyco/x-components": "^3.0.0-alpha.121",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.22",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-types": "^10.0.0-alpha.26",

src/components/column-picker.vue

@@ -10,13 +10,19 @@
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
-  import { BaseColumnPickerList, Grid1ColIcon, Grid2ColIcon } from '@empathyco/x-components';
+  import {
+    BaseColumnPickerList,
+    Grid1ColIcon,
+    Grid2ColIcon,
+    Grid4ColIcon
+  } from '@empathyco/x-components';
 
   @Component({
     components: {
       BaseColumnPickerList,
       Grid1ColIcon,
-      Grid2ColIcon
+      Grid2ColIcon,
+      Grid4ColIcon
     }
   })
   export default class ColumnPicker extends Vue {
@@ -28,7 +34,7 @@
       if (this.$x.device === 'mobile') {
         return column === 2 ? 'Grid2ColIcon' : 'Grid1ColIcon';
       } else {
-        return column === 4 ? 'Grid2ColIcon' : 'Grid1ColIcon';
+        return column === 4 ? 'Grid4ColIcon' : 'Grid2ColIcon';
       }
     }
   }

src/components/desktop/desktop-toolbar.vue

@@ -8,7 +8,7 @@
       v-html="
         $t('totalResults.message', { totalResults: $x.totalResults, query: $x.query.searchBox })
       "
-      class="x-list__item--expand"
+      class="x-list__item--expand x-font-size--05"
     />
 
     <ColumnPicker />

src/components/main.vue

@@ -7,6 +7,7 @@
         <div
           v-if="$x.totalResults === 0 || $x.spellcheckedQuery"
           class="x-padding--top-03 x-padding--bottom-07"
+          :class="{ 'x-margin--left-05 x-margin--right-05': $x.device === 'mobile' }"
         >
           <template>
             <SpellcheckMessage />

src/components/mobile/mobile-toolbar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="x-list x-list--horizontal x-list--align-center x-list__item--expand">
-    <span v-if="$x.totalResults" class="x-list__item--expand">
+    <span v-if="$x.totalResults" class="x-list__item--expand x-font-size--05">
       {{ $t('totalResults.message', { totalResults: $x.totalResults }) }}
     </span>
 
-    <ColumnPicker />
+    <ColumnPicker v-if="$x.totalResults" />
 
     <EnvSelector />
   </div>

src/components/mobile/mobile.vue

@@ -50,12 +50,14 @@
     </template>
 
     <template #floating>
-      <div class="x-row x-row--padding-03 x-row--justify-center x-list__item--expand">
+      <div class="x-row x-row--padding-03 x-list__item--expand x-margin--bottom-06">
         <MobileOpenAside
           v-if="$x.totalResults > 0"
           class="x-row__item x-row__item--start-4 x-row__item--span-6"
         />
-        <ScrollToTop class="x-row__item x-row__item--start-11 x-row__item--span-2" />
+        <div class="x-row__item--start-11 x-row__item--span-2 x-row__item x-padding--00">
+          <ScrollToTop class="x-row__item" />
+        </div>
       </div>
     </template>
 

src/components/predictive-layer/predictive-layer.vue

@@ -1,16 +1,16 @@
 <template>
-  <Empathize :animation="empathizeAnimation" class="x-list">
+  <Empathize v-if="showEmpathize" :animation="empathizeAnimation" class="x-list">
     <BaseKeyboardNavigation
       class="x-row x-row--gap-06 x-row--align-start"
-      :class="{ 'x-row--padding--top-00': $x.device === 'mobile' }"
       :navigationHijacker="navigationHijacker"
     >
       <IdentifierResults
-        v-if="$x.identifierResults.length > 0"
+        v-if="showIdentifierResults"
         v-slot="{ identifierResult }"
         :maxItemsToRender="5"
         :animation="suggestionsAnimation"
-        class="x-row__item x-row__item--span-12 x-list x-list--gap-03 x-padding--05"
+        class="x-row__item x-row__item--span-12 x-list x-padding--05"
+        :class="$x.device === 'mobile' ? 'x-list--gap-03 x-padding--top-00' : 'x-list--gap-02'"
       >
         <BaseResultLink v-slot="{ result }" :result="identifierResult" class="x-suggestion">
           <BarCodeIcon :class="{ 'x-icon--l': $x.device === 'mobile' }" />
@@ -22,22 +22,20 @@
       </IdentifierResults>
 
       <div
-        v-else-if="
-          $x.historyQueries.length ||
-          $x.identifierResults.length ||
-          $x.nextQueries.length ||
-          $x.popularSearches.length ||
-          $x.querySuggestions.length
-        "
+        v-else
         class="x-row__item x-list x-padding--05"
         :class="[
-          $x.query.searchBox ? 'x-list--gap-03' : 'x-list--gap-06',
+          $x.query.searchBox
+            ? $x.device === 'mobile'
+              ? 'x-list--gap-03'
+              : 'x-list--gap-02'
+            : 'x-list--gap-05',
           $x.device === 'mobile'
-            ? 'x-row__item--span-12 x-padding--bottom-00'
+            ? 'x-row__item--span-12 x-padding--top-00 x-padding--bottom-00'
             : 'x-row__item--span-5 x-padding--right-00'
         ]"
       >
-        <div v-if="$x.historyQueries.length > 0" class="x-list x-list--gap-04">
+        <div v-if="showHistoryQueries" class="x-list x-list--gap-02">
           <div v-if="!$x.query.searchBox" class="x-list x-list--horizontal x-list--align-center">
             <h1 class="x-small x-text--bold x-text--secondary x-list__item--expand">
               {{ $t('historyQueries.title') }}
@@ -59,8 +57,10 @@
           <HistoryQueries
             :animation="suggestionsAnimation"
             :max-items-to-render="$x.query.searchBox ? 2 : 4"
-            class="x-list x-list--gap-03"
-            :class="{ 'x-list--align-start': $x.device === 'desktop' }"
+            class="x-list"
+            :class="
+              $x.device === 'mobile' ? 'x-list--gap-03' : 'x-list--gap-02 x-list--align-start'
+            "
           >
             <template #suggestion-content="{ queryHTML }">
               <HistoryIcon :class="{ 'x-icon--l': $x.device === 'mobile' }" />
@@ -69,6 +69,7 @@
 
             <template #suggestion-remove-content="{ suggestion }">
               <span
+                class="x-list"
                 :aria-label="$t('historyQueries.removeLabel', { suggestion: suggestion.query })"
               >
                 <CrossTinyIcon :class="{ 'x-icon--l': $x.device === 'mobile' }" />
@@ -78,51 +79,57 @@
         </div>
 
         <QuerySuggestions
-          v-if="$x.query.searchBox && $x.identifierResults.length === 0"
+          v-if="showQuerySuggestions"
           #suggestion-content="{ queryHTML }"
           :animation="suggestionsAnimation"
           :max-items-to-render="5"
-          class="x-row__item x-row__item--span-4 x-list x-list--gap-03"
+          class="x-row__item x-row__item--span-4 x-list"
+          :class="$x.device === 'mobile' ? 'x-list--gap-03' : 'x-list--gap-02'"
         >
           <SearchIcon :class="{ 'x-icon--l': $x.device === 'mobile' }" />
           <span v-html="queryHTML" />
         </QuerySuggestions>
 
         <div
-          v-if="$x.nextQueries.length > 0 && $x.identifierResults.length === 0"
-          class="x-list x-list--gap-04"
-          :class="{ 'x-padding--top-06': $x.query.searchBox }"
+          v-if="showNextQueries"
+          class="x-list x-list--gap-02"
+          :class="{ 'x-padding--top-05': $x.query.searchBox && $x.device === 'desktop' }"
         >
-          <h1 class="x-small x-text--bold x-text--secondary">
+          <h1
+            class="x-small x-text--bold x-text--secondary"
+            :class="{ 'x-padding--top-03 x-padding--bottom-03': $x.device === 'mobile' }"
+          >
             {{ $t('nextQueries.title') }}
           </h1>
           <NextQueries
             :animation="suggestionsAnimation"
             :max-items-to-render="3"
-            class="x-list x-list--gap-03"
+            class="x-list"
+            :class="$x.device === 'mobile' ? 'x-list--gap-03' : 'x-list--gap-02'"
           >
             <template #suggestion-content="{ suggestion }">
               <CuratedCheckIcon
                 v-if="suggestion.isCurated"
                 :class="{ 'x-icon--l': $x.device === 'mobile' }"
               />
-              <LightBulbOn v-else :class="{ 'x-icon--l': $x.device === 'mobile' }" />
+              <LightBulbOn
+                v-else
+                class="x-icon--light-bulb-on"
+                :class="{ 'x-icon--l': $x.device === 'mobile' }"
+              />
               <span>{{ suggestion.query }}</span>
             </template>
           </NextQueries>
         </div>
 
-        <div
-          v-if="$x.popularSearches.length > 0 && !$x.query.searchBox"
-          class="x-list x-list--gap-04"
-        >
+        <div v-if="showPopularSearches" class="x-list x-list--gap-02">
           <h1 class="x-small x-text--bold x-text--secondary">
             {{ $t('popularSearches.title') }}
           </h1>
           <PopularSearches
             :animation="suggestionsAnimation"
             :max-items-to-render="4"
-            class="x-list x-list--gap-03"
+            class="x-list x-list--gap-02"
           >
             <template #suggestion-content="{ suggestion }">
               <TrendingIcon :class="{ 'x-icon--l': $x.device === 'mobile' }" />
@@ -200,9 +207,43 @@
       { xEvent: 'UserPressedArrowKey', moduleName: 'scroll', direction: 'ArrowDown' },
       { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
     ];
+
+    public get showIdentifierResults(): boolean {
+      return this.$x.identifierResults.length > 0;
+    }
+
+    public get showHistoryQueries(): boolean {
+      return this.$x.historyQueries.length > 0;
+    }
+
+    public get showQuerySuggestions(): boolean {
+      return (
+        !!this.$x.query.searchBox &&
+        this.$x.identifierResults.length === 0 &&
+        this.$x.querySuggestions.length > 0
+      );
+    }
+
+    public get showNextQueries(): boolean {
+      return this.$x.nextQueries.length > 0 && this.$x.identifierResults.length === 0;
+    }
+
+    public get showPopularSearches(): boolean {
+      return this.$x.popularSearches.length > 0 && !this.$x.query.searchBox;
+    }
+
+    public get showEmpathize(): boolean {
+      return (
+        this.showIdentifierResults ||
+        this.showHistoryQueries ||
+        this.showQuerySuggestions ||
+        this.showNextQueries ||
+        this.showPopularSearches
+      );
+    }
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   .x-clear-history-queries {
     --x-size-height-button-default: 0;
   }