From e0990910f65de020ffa27dda23ea7ea5cdc0e8d1 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Fri, 23 Aug 2024 03:17:59 +0200
Subject: [PATCH] Remove shift caused by the Exclude filter button (#2265)
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.
---
apps/frontend/src/pages/search/[searchProjectType].vue | 7 ++-----
1 file changed, 2 insertions(+), 5 deletions(-)
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 8b22844f6..d5223ddab 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -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)"
>
-
+