Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove shift caused by the Exclude filter button (#2265)

Browse Source 
Previously, the Exclude button was removed from the the element tree
entirely until the group is hovered. Only when the group is hovered, the
button element was being switched to a proper display form. This has
caused the layout shift which was very visible when quickly moving
cursor over the filter options.

This commit makes it so that the Exclude button is always in its proper
display form (flex), however is transparent until the group is hovered.
The repeated transparency classes were removed from the icon as well to
prevent jarringly-looking double transition.
This commit is contained in:
Sasha Sorokin 2024-08-23 03:17:59 +02:00 committed by GitHub
parent 599f23c8aa
commit e0990910f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 2 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/frontend/src/pages/search/[searchProjectType].vue
View File

@ -106,13 +106,10 @@
!negativeFilterSelected(category)
"
v-tooltip="negativeFilterSelected(category) ? 'Include' : 'Exclude'"
class="hidden items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary transition-all hover:bg-button-bg hover:text-red active:scale-[0.96] group-hover:flex"
class="flex items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary opacity-0 transition-all hover:bg-button-bg hover:text-red active:scale-[0.96] group-hover:opacity-100"
@click="toggleNegativeFilter(category)"
>
<BanIcon
class="h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
aria-hidden="true"
/>
<BanIcon class="h-4 w-4" aria-hidden="true" />
</button>
</div>
</div>