doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The grid's "Hide filters" icon no longer turns upside down

Browse source 
The filters toggle turned every svg in the button over when the filters were open. So the filter
icon beside the label flipped as well, with its longest line at the bottom, which read as a broken
icon. That shows on a phone, where the grid opens with its filters expanded. Only the chevron turns
over now.
This commit is contained in:
Doxa Maps 2026-09-30 05:37:07 +00:00
parent 3d5cd9ab74
commit 8761483879
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
plugin-designs/people-groups-grid/people-groups-grid.vue
View file

@ -1060,7 +1060,7 @@ onMounted(() => {
</svg>
{{ filtersExpanded ? (t.hide_filters || 'Hide Filters') : (t.show_filters || 'Show Filters') }}
<span v-if="activeFilterCount" class="filters__toggle-count">{{ activeFilterCount }}</span>
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<svg class="filters__toggle-chevron" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
@ -1289,7 +1289,12 @@ onMounted(() => {
background: var(--dx-accent, #92b195); color: #fff; border-radius: 999px;
min-width: 18px; padding: 0 5px; font-size: 0.75rem; line-height: 18px; text-align: center;
}
.filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Only the CHEVRON turns over when the filters are open. The rule used to match every svg in the
button, so the filter icon beside the label flipped upside down too (its longest line at the
bottom), which read as a broken icon. Measured on a phone, where the grid opens with its filters
expanded. */
.filters__toggle-chevron { flex: none; }
.filters__toggle[aria-expanded="true"] .filters__toggle-chevron { transform: rotate(180deg); }
.filters__panel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; }
.filter-toggle {
padding: 6px 12px; cursor: pointer; font-size: 0.875rem; color: inherit; background: var(--card);