Customization options for hledger-web and suggestions

General
1

Are there ways to customize/modify the styling and layout of hledger-web? Particularly, the layout of the Journal table. I took a peak at the Github code but couldn't identify a way to include a CSS file.

The reason I'd like to modify the styling is to improve the legibility. I find it difficult to parse the account names and transaction amounts and I believe it's due to the following design decisions:

  • Large amount of white space between the account names (left justified) and transaction amounts (right justified). I'd propose trying to reduce the abundant white space somehow.

  • Use of white space (tabs) to indicate hierarchy in sub-accounts. A graphic indication would be easier to read than more white space, such as dashes or arrows. See Fava for an example.

  • Lack of context control. Introducing a way to minimize, collapse, or focus the Journal table to specific accounts (and sub-accounts) would greatly improve the legibility.

Otherwise, I very much appreciate the simplicity of hledger-web!

1 Like
2

Good question @toumabieme. Our static HTML output can be styled by a hledger.css in the same directory, but it looks like there's nothing similar for styling hledger-web at runtime. That might be a good idea if done securely, PR welcome. But currently you have to rebuild it. Eg in the hledger source dir,

 # change hledger-web/static/hledger.css
stack build hledger-web
stack exec -- hledger-web ...

or here's an edit-test loop:

watchexec -w hledger-web/static -r 'stack run -- hledger-web'

And thanks for the feedback. I'd love to see other styling experiments. hledger-web's styling was somewhat driven by "simplest thing that keeps working reliably across browsers and screen sizes and diverse data with acceptable development/test cost".