padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor active filters summary in MarketPage for clarity and simplicity

Browse source 
- Updated the active filters summary section to focus on product count when filters are active, enhancing clarity for users.
- Simplified the layout by removing unnecessary elements, improving the overall user experience and accessibility.

These changes streamline the display of active filters, making it easier for users to understand the number of products available based on their selected categories.
This commit is contained in:
padreug 2025-09-26 10:38:12 +02:00
parent 8fe53d3d71
commit f3504b7df5
1 changed files with 5 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/modules/market/views/MarketPage.vue
View file

@ -170,40 +170,15 @@
</div>
</div>
<!-- Active Filters Summary -->
<!-- Product Count (when filters active) -->
<div
v-if="selectedCategoriesCount > 0"
class="mt-2 sm:mt-4 p-2 sm:p-3 bg-accent/50 rounded-lg border border-border"
role="region"
aria-label="Active category filters"
class="mt-2 text-center"
aria-live="polite"
>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div class="flex items-center gap-1.5 sm:gap-2">
<Filter class="w-3 h-3 sm:w-4 sm:h-4 text-accent-foreground/80" aria-hidden="true" />
<span class="text-xs sm:text-sm font-medium text-accent-foreground">
<span class="hidden sm:inline">Active Filters</span><span class="sm:hidden">Filters</span>
<span v-if="selectedCategoriesCount > 1" class="text-xs opacity-75">
({{ filterMode === 'any' ? 'Any' : 'All' }} match):
</span>
<span v-else>:</span>
</span>
<div class="flex gap-0.5 sm:gap-1 flex-wrap" role="list" aria-label="Selected category filters">
<Badge
v-for="category in selectedCategories"
:key="category"
variant="secondary"
class="text-xs px-1.5 py-0.5"
role="listitem"
>
{{ category }}
</Badge>
</div>
</div>
<div class="text-xs sm:text-sm text-muted-foreground" aria-live="polite">
{{ productsToDisplay.length }} products found
</div>
</div>
<span class="text-xs sm:text-sm text-muted-foreground">
{{ productsToDisplay.length }} products found
</span>
</div>
</section>