feat: apply design with line-clamp

EMP-2293
empathyco · Oct 25, 2023 · a2e2555 · a2e2555
1 parent 7a5e686
commit a2e2555
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 69 deletions.
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
@@ -22,29 +22,6 @@
 
             <div class="x-flex x-flex-col x-gap-2">
               <p>{{ suggestion.query }}</p>
-              <template v-if="suggestion.selectedFilters.length > 0">
-                <p
-                  v-if="suggestion.selectedFilters.length < 4"
-                  class="x-text1-sm x-text-lead-50 x-line-clamp-1"
-                >
-                  <span
-                    v-for="filter in suggestion.selectedFilters"
-                    :key="filter.id"
-                    class="x-history-filters x-pr-[4px]"
-                  >
-                    {{ filter.label }}
-                  </span>
-                </p>
-                <i18n
-                  v-else-if="suggestion.selectedFilters.length >= 4"
-                  tag="p"
-                  path="myHistory.filters"
-                  class="x-text1-sm x-text-lead-50"
-                >
-                  <template #totalFilters>{{ suggestion.selectedFilters.length - 1 }}</template>
-                </i18n>
-              </template>
-
               <MyHistoryFilters :suggestion="suggestion" />
 
               <p class="x-text1 x-text1-sm x-text-neutral-75">
@@ -95,17 +72,3 @@
     }
   });
 </script>
-
-<style lang="scss">
-  .x-history-filters {
-    &:after {
-      content: '·';
-      padding-left: 4px;
-    }
-    &:last-child {
-      &:after {
-        content: '';
-      }
-    }
-  }
-</style>
diff --git a/src/components/my-history/my-history-filters.vue b/src/components/my-history/my-history-filters.vue
@@ -1,25 +1,15 @@
 <template v-if="suggestion.selectedFilters.length > 0">
-  <p
-    v-if="suggestion.selectedFilters.length < 4"
-    class="x-text1-sm x-text-neutral-75 x-line-clamp-1"
-  >
-    <span
-      v-for="filter in suggestion.selectedFilters"
-      :key="filter.id"
-      class="x-mr-8 x-rounded-full x-bg-neutral-10 x-px-8 x-py-2"
-    >
-      {{ filter.label }}
-    </span>
-  </p>
-  <i18n
-    v-else-if="suggestion.selectedFilters.length >= 4"
-    tag="p"
-    path="myHistory.filters"
-    class="x-text1-sm x-text-lead-50"
-  >
-    <template #firstFilter>{{ suggestion.selectedFilters[0].label }}</template>
-    <template #totalFilters>+{{ suggestion.selectedFilters.length - 1 }}</template>
-  </i18n>
+  <div>
+    <p class="x-text1-sm x-text-lead-50 x-line-clamp-1">
+      <span
+        v-for="filter in suggestion.selectedFilters"
+        :key="filter.id"
+        class="x-history-filters x-pr-8"
+      >
+        {{ filter.label ?? filter.id }}
+      </span>
+    </p>
+  </div>
 </template>
 
 <script lang="ts">

diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
@@ -35,7 +35,6 @@ export interface Messages {
       dismiss: string;
       confirm: string;
     };
-    filters: string;
   };
   nextQueries: {
     title: string;

diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
@@ -33,8 +33,7 @@
         "message": "Disabling History Queries you also clear all the history list.",
         "dismiss": "Cancel",
         "confirm": "Disable"
-      },
-      "filters": "{firstFilter} {totalFilters} filters applied"
+      }
     },
     "nextQueries": {
       "title": "What's Next"

diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
@@ -33,8 +33,7 @@
         "message": "Si desactivas el historial de búsqueda, las búsquedas de tu historial serán eliminadas.",
         "dismiss": "Cancelar",
         "confirm": "Desactivar"
-      },
-      "filters": "{totalFilters} filtros aplicados"
+      }
     },
     "nextQueries": {
       "title": "Quizás te Interese"

diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
@@ -33,8 +33,7 @@
         "message": "En désactivant les requêtes d'historique, vous effacez également toute la liste d'historique.",
         "dismiss": "Annuler",
         "confirm": "Désactiver"
-      },
-      "filters": "{totalFilters} filtres appliqués"
+      }
     },
     "nextQueries": {
       "title": "Et Après"

diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
@@ -33,8 +33,7 @@
         "message": "Se disattivi la cronologia ricerche, le ricerche nella cronologia verranno eliminate.",
         "dismiss": "Cancella",
         "confirm": "Disattiva"
-      },
-      "filters": "{totalFilters} filtri applicati"
+      }
     },
     "nextQueries": {
       "title": "Potrebbe interessarti"

diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
@@ -33,8 +33,7 @@
         "message": "Desabilitando o histórico de buscas, você também limpará toda a lista de buscas",
         "dismiss": "Cancelar",
         "confirm": "Desativar"
-      },
-      "filters": "{totalFilters} filtros aplicados"
+      }
     },
     "nextQueries": {
       "title": "Você Pode se Interessar"