farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CSS Transitions for Improved User Experience

Browse Source 
- Added transition properties to the body for smoother background changes.
- Increased transition duration for the dashboard splitter's size adjustments, enhancing visual fluidity during resizing.
This commit is contained in:
Tom Butcher 2026-08-21 19:18:54 +01:00
parent fedc8ba5fa
commit 59bf2702bf
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/stylesheets/App.css
View File

@ -432,6 +432,9 @@ body {
min-width: 0 !important; min-width: 0 !important;
max-width: 100% !important; max-width: 100% !important;
flex: 0 0 100% !important; flex: 0 0 100% !important;
transition:
all 0.3s,
background 0s;
} }
.dashboard-sider.ant-layout-sider-collapsed { .dashboard-sider.ant-layout-sider-collapsed {
@ -1022,11 +1025,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
.farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning .farmcontrol-splitter.ant-splitter-horizontal.is-size-transitioning
.ant-splitter-panel { .ant-splitter-panel {
transition: transition:
--dashboard-splitter-sidebar-size 0.15s ease-in-out, --dashboard-splitter-sidebar-size 0.3s ease-in-out,
flex-basis 0.15s ease-in-out, flex-basis 0.3s ease-in-out,
width 0.15s ease-in-out, width 0.3s ease-in-out,
min-width 0.15s ease-in-out, min-width 0.3s ease-in-out,
max-width 0.15s ease-in-out; max-width 0.3s ease-in-out;
} }
@property --dashboard-splitter-sidebar-size { @property --dashboard-splitter-sidebar-size {