feat: Fix, add, tweak various empty states across the app (#241)

* fix: add empty state to locations list

* fix: add empty states for homepage lists

* fix: add empty state to notifiers list

* fix: update profile notifiers to use translation, add en and pt-pt copy

* chore: tweak copy for notifier empty state

* fix: add new empty state for search page

* fix: update new empty states to use translation strings

* chore: eslint fixes, translation

* fix: translation key

---------

Co-authored-by: Matt Kilgore <matthew@kilgore.dev>
This commit is contained in:
Filipe Dobreira
2024-09-24 13:28:54 +01:00
committed by GitHub
parent 55a9355046
commit 4e260c5a8b
10 changed files with 46 additions and 20 deletions

View File

@@ -3,6 +3,7 @@
import { useLabelStore } from "~~/stores/labels";
import { useLocationStore } from "~~/stores/locations";
import MdiLoading from "~icons/mdi/loading";
import MdiSelectSearch from "~icons/mdi/select-search";
import MdiMagnify from "~icons/mdi/magnify";
import MdiDelete from "~icons/mdi/delete";
import MdiChevronRight from "~icons/mdi/chevron-right";
@@ -463,15 +464,17 @@
<section class="mt-10">
<BaseSectionHeader ref="itemsTitle"> {{ $t("global.items") }} </BaseSectionHeader>
<p class="flex items-center text-base font-medium">
<p v-if="items.length > 0" class="flex items-center text-base font-medium">
{{ $t("items.results", { total: total }) }}
<span class="ml-auto text-base"> {{ $t("items.pages", { page: page, totalPages: totalPages }) }} </span>
</p>
<div ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
<div v-if="items.length === 0" class="flex flex-col items-center gap-2">
<MdiSelectSearch class="size-10" />
<p>{{ $t("items.no_results") }}</p>
</div>
<div v-else ref="cardgrid" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
<ItemCard v-for="item in items" :key="item.id" :item="item" />
<div class="hidden text-xl first:inline">{{ $t("items.no_results") }}</div>
</div>
<div v-if="items.length > 0 && (hasNext || hasPrev)" class="mt-10 flex flex-col items-center gap-2">
<div class="flex">