gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-21 02:33:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add hover animations to node summary tables

Browse Source 
- Added subtle scale effect (1.01x) on row hover
- Added shadow and left border indicator on hover
- Smooth 150ms transitions for all animations
- Visual feedback makes it clear rows are clickable
- Applied to both PVE and PBS node tables
This commit is contained in:
Pulse Monitor
2025-08-26 16:30:35 +00:00
parent 34b3ccdab7
commit d0e67db004
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/shared/PBSNodeTable.tsx
+4 -3
View File
@@ -118,10 +118,11 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
return (
<tr
class={`
border-b border-gray-100 dark:border-gray-700/50 transition-colors
${isClickable ? 'hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer' : ''}
border-b border-gray-100 dark:border-gray-700/50
transition-all duration-150 ease-in-out h-8 relative
${isClickable ? 'hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer hover:scale-[1.01] hover:shadow-md hover:z-10 hover:border-l-4 hover:border-l-blue-500 dark:hover:border-l-blue-400' : ''}
${!isOnline() ? 'opacity-60' : ''}
${isSelected() && isClickable ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30' : ''}
${isSelected() && isClickable ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 scale-[1.005] shadow-sm border-l-4 border-l-blue-600 dark:border-l-blue-500' : ''}
`}
onClick={() => isClickable && props.onNodeClick(pbs.name)}
>
frontend-modern/src/components/shared/PVENodeTable.tsx
+5 -2
View File
@@ -210,9 +210,12 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
return (
<tr
class={`
border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors cursor-pointer h-8
border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/30
transition-all duration-150 ease-in-out cursor-pointer h-8
hover:scale-[1.01] hover:shadow-md hover:z-10 relative
hover:border-l-4 hover:border-l-blue-500 dark:hover:border-l-blue-400
${!isOnline() ? 'opacity-60' : ''}
${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30' : ''}
${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 scale-[1.005] shadow-sm border-l-4 border-l-blue-600 dark:border-l-blue-500' : ''}
`}
onClick={() => props.onNodeClick(node.name)}
>