I overhauled the web-interface to match bootstrap best practices.
This makes the website usable on mobile devices (#340) and a more pleasent experience overall.
mobile device homepage. The table can be swiped/moved in all directions on touchscreen devices
sidebar navigation on mobile devices
Adopted Bootstrap classes everywhere
Unified tag spacing
Highlighting active selection in the sidebar
Sidebar now works again
Optimized for sm devices
Made backlinking work again
Re-Added searchbar clearing and journal highlighting
Removed artifacts of conversion
Removed garbage from my clipboard
Great! Nice screenshots. I've done quick UI testing, two issues so far:
Thanks for the feedback, will look into that ASAP
Persistent sidebar state
I could not find a way to reproduce the multi-commodity issue... Could you send me the journal or a way to generate one where this happens?
This does it for me, in Safari and Firefox. Compare old and new hledger-web:
a 1 A
b 2 B
c 3 C
I see the sidebar persistence now, nice.
The animation has regressed a bit. At least in safari: previously, it slid in/out from the left as you'd expect, though it was jerky. Now I think the column width is still sliding, but the actual sidebar content displays/hides immediately, creating a rough visual effect.
Fixed multi commodities in sidebar
Fixed sidebar wonkyness
Removed useless import
Thanks, making progress!
Sometimes account names will be long. Previously, this would force the sidebar to enlarge as needed, but now it pushes the amount down to the next line (firefox) and interferes with the next line's amount (safari).
In safari, when the sidebar is closed it forces the main content down to the bottom of where it would end if open. In firefox, it slides nicely but the main content flashes briefly at the bottom when it's starting to open.
PS I know it's hard to make this robust. The previous was my best attempt. I have been quite keen on providing a simple non-scary view (sidebar closed). Do you think we are being too ambitious and spending effort that would be more useful elsewhere ? Ideas to simplify without losing too much usability ? Eg: always show sidebar on large screens, always hide it on small ones ? Maybe forward this to the list ? Also there is a deadline, I would quite like to get some version of this into a release today.
Always showing the sidebar on large screens would solve the hiding wonkyness. But the sidebar sizing is hard to solve. There is the possibility of using the whole screen but this wouldn't look as pleasing.
We could also hide make the sidebar slide in (like a drawer on mobile devices) on medium devices.
It's also possible to truncate long names to just say assets:long:name:includes:some...
Another way to deal with long names would be with a horizontal scrollbar
Disabled Sidebar animations and fixed overflow
Accounts with subaccounts have an extra blank line below, I think because the "only" hover-link is wrapping.
An ellipsis showing when names are truncated would be good, if easy. text-overflow:ellipsis or something.
For me, account names are harder to read (less contrast) and click (smaller font) now, and there's too much vertical whitespace making it hard to see an overview of the structure. But these are quibbles, I guess the point here is to use more standard bootstrapese making things easier to restyle and maintain overall.
Increased visibility and now overflowing with ellipsis
You were right about the hover-link. I forgot to add it to the wrapper. I now increased the contrast, decreased the whitespace and increased the font-size. Long account names now get shortened with an ellipsis
Thanks! I've set up your latest at http://demo.hledger.org, and the old one at http://demo1.hledger.org, so we can see the same things.
Amounts now get truncated by the main content. It's fine to go back to the smaller font size if it helps. The increased contrast and tighter whitespace is great.
The whitespace and border between sidebar and main content is missing, maybe related to the above.
The ellipsis shows up for some short names where it shouldn't (that only link again).
The top heading doesn't move left when the sidebar is collapsed. No big deal.
Sidebar width is now limited to the column
This helps the spacing between the sidebar and the main-content
Title now moves with sidebar
Accounts are now bottom-aligned
Setting column width at the first entry
The spacing and the title should now be fixed. The account name is now at the bottom (same as in the old version) and the ellipsis placement should be better. The problem is, that the browser sets the width based on the first data entry. There is another option but it'll take longer to implement and it's allready 1 am around here. I'll look into it tomorrow but if you want to release today then I'd suggest sticking with this shortening
It's starting to feel good! More wishes and brainstorming:
With the sidebar open, dates in the register line-wrap at the hyphen; we may need a nowrap there.
With the higher contrast (and the amount no longer highlighted) it's a little less clear that an account has been selected. Not so important.
A lot of account balances are left-clipped, we'll need left ellipses for these.
I like the principle of "whatever data the user puts in, we adapt and show a useful view by default". How to minimise the clipping of account info ? Should we:
I won't release today, it seems a day or two more is available. Thanks for your fast work on this.
PS and if/when you're out of time, let me know and I'll merge this.
PPS I liked when you had the account and amount top-aligned, it matches the register.
...though, bottom-aligned shows the parent/child groupings more clearly. Whatever you think.
Custom currencies are now trimmed
Turned the lambda into an anonymous function (WebKit compatibility)
Added nowrap to keep dates in line
That nowrap attribute doesn't work here. Adding white-space:nowrap to the date class did though, how about that ? We never want dates to wrap.
The "only" link is inaccessible for long account names - another argument for making the sidebar wider, letting it grow wider, using the full frame width, etc.
Using full width on large screens
I could not reproduce the wrapping behaviour in webkit but added the css class anyways.
To play arround with the full width, toggle the wrapper div between container and container-fluid
Great! Full-width is much better.
Removed number trimming
Show scrolbar for amounts
Should the account name also be scrollable?
@theSuess I'm going to merge this, we can tweak more in trunk.
I rebased on master and removed the number rounding commits and the "Show scrolbar for amounts" commit which had not much effect here. I was hoping it would still mark this PR merged, I'll close it instead. Branch merged, thank you very much @theSuess!
I'm glad I could help!