Introduction
Working with PeopleSoft’s Fluid interface is a challenge for me. Its style is reminiscent of jQuery Mobile has not be especially fashionable since ~2010 and iOS 4. But no one has asked my opinion and it would not be considered in any case. So I learn to live with it.
One especially difficult part of the Fluid interface is its navigation. It may be better for students (questionable) but it’s a major step back in ease-of-use for power users. I miss my breadcrumbs any time I’m forced to solely use the navigator, being forced to open the navigator again and again.
The Problem
A few days ago I realized that the part that I hate the most is just how slow it is. I feel myself growing older every time I have to click the icon to open the menu. Then I decided that I’m a developer and I don’t have to live like that.
Using my browser’s developer tools to inspect the navbar and found its CSS
transition
property. As I suspected, it was set to take one second to
open/close. One whole second devoted to its slide-out animation. That may not
sound like a lot, but it is very noticeable when all you want to do is
navigate to the next page in whatever task you’re doing. For example, in
jQuery’s fadeIn
API, the “slow” setting is
set at 600 milliseconds, while “normal” is 400 milliseconds. 1000 milliseconds
is glacial by comparison.
Let’s do something about that.
The Solution
Depending on which browser you’re using, the implementation will be somewhat different. Firefox has custom styling built into it (via its developer tools Style Editor). Chrome requires an extension. There are a number of options (search the Chrome Webstore for “style” or “css”) but the one that I like is Control Freak because it combines CSS & JavaScript tweaks into one package. Regardless what you use to make it happen, the fix will be the same.
Add this CSS to light a fire under that navbar:
.PTNavBarModal {
transition: transform 0.25s;
}
You can play with the speed, but 250 milliseconds feels about right to me. It is quick, but I can still easily track what is going on.
Before | After |
---|---|
What gripes (if any) do you have with Fluid and what have you done to resolve them? I’m always interested in learning what others have done to improve their life. Let me know in the comments below.
Share this post
Twitter
Facebook
Reddit
LinkedIn
StumbleUpon
Pinterest
Email