Overhauled the hledger-web interface #422

Closed
wants to merge 29 commits into
from

Projects

None yet

2 participants

@theSuess
Contributor

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.

Some screenshots:
2016-10-21-200839_1920x1080_scrot
2016-10-21-200901_1920x1080_scrot
2016-10-21-201219_1920x1080_scrot
2016-10-21-201857_1920x1080_scrot

mobile device homepage. The table can be swiped/moved in all directions on touchscreen devices

sidebar navigation on mobile devices

@simonmichael
Owner

Great! Nice screenshots. I've done quick UI testing, two issues so far:

  • multi-commodity account balances in the sidebar break the layout, overlapping account names and other rows
  • sidebar state is not persistent, it reopens on page load
@theSuess
Contributor

Thanks for the feedback, will look into that ASAP

@theSuess theSuess Persistent sidebar state
04bac7c
@theSuess
Contributor

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?

@simonmichael
Owner

This does it for me, in Safari and Firefox. Compare old and new hledger-web:

2016/01/01
    a                                                          1 A
    b                                                          2 B
    c                                                          3 C
    d
@simonmichael
Owner

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.

theSuess added some commits Oct 24, 2016
@theSuess theSuess Fixed multi commodities in sidebar
285f28b
@theSuess theSuess Fixed sidebar wonkyness
4846c2a
@theSuess theSuess Removed useless import
26b180f
@simonmichael
Owner

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.

@simonmichael
Owner

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.

@theSuess
Contributor

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.

@theSuess
Contributor

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

@theSuess theSuess Disabled Sidebar animations and fixed overflow
743b7e8
@simonmichael
Owner

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.

@theSuess theSuess Increased visibility and now overflowing with ellipsis
a1ab436
@theSuess
Contributor

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

@simonmichael
Owner

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.

theSuess added some commits Oct 24, 2016
@theSuess theSuess Sidebar width is now limited to the column
This helps the spacing between the sidebar and the main-content
e51fc3c
@theSuess theSuess Title now moves with sidebar 406b8e6
@theSuess theSuess Accounts are now bottom-aligned b0b97ac
@theSuess theSuess Setting column width at the first entry
bb6cb3f
@theSuess
Contributor

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

@simonmichael
Owner

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:

  • reduce the font size again ?
  • increase the sidebar's default width ?
  • increase its max width, so that maximising the window reveals more account info ?
  • use the full window width for content, dropping the left and right margins ?
  • in time, try again sizing the sidebar to its natural content width ?

I won't release today, it seems a day or two more is available. Thanks for your fast work on this.

@simonmichael
Owner

PS and if/when you're out of time, let me know and I'll merge this.

@simonmichael
Owner

PPS I liked when you had the account and amount top-aligned, it matches the register.

@simonmichael
Owner

...though, bottom-aligned shows the parent/child groupings more clearly. Whatever you think.

theSuess added some commits Oct 25, 2016
@theSuess theSuess Custom currencies are now trimmed
d04dce6
@theSuess theSuess Turned the lambda into an anonymous function (WebKit compatibility) a7b79e6
@theSuess theSuess Added nowrap to keep dates in line
53e2311
@theSuess theSuess Improved highlighting
22a6022
@simonmichael
Owner

@theSuess haha, rounding big numbers in javascript to make them fit was not quite what I had in mind. +1 for pragamatism, but I'm not sure.. does it abbreviate digits on the right of the decimal point only ? And only if the commodity symbol has multiple characters ? Does it work if the data uses comma as decimal point ?

@simonmichael
Owner

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.

@theSuess
Contributor

The javascript solution wasn't really well thought out by me. I just wanted to test how such a solution would look and feel.

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

@simonmichael
Owner

Great! Full-width is much better.

Let's pass on the javascript rounding. I just don't want it quietly showing wrong numbers due to window width. I see there is a CSS left-ellipsis but it's not well supported yet. I have it - let's put overflow:visible on the td.

@theSuess
Contributor

Should the account name also be scrollable?

@simonmichael
Owner

@theSuess I'm going to merge this, we can tweak more in trunk.

@simonmichael
Owner

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!

@theSuess
Contributor

I'm glad I could help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment