From c3c20492bf41975f887ae01a819f11c52787da7b Mon Sep 17 00:00:00 2001 From: Simon Michael Date: Sun, 28 Nov 2010 14:57:23 +0000 Subject: [PATCH] web: more robust layout with wide content, style cleanups --- hledger-web/Hledger/Web/App.hs | 54 +++++++-------- hledger-web/data/static/style.css | 106 ++++++++++++++++++------------ 2 files changed, 92 insertions(+), 68 deletions(-) diff --git a/hledger-web/Hledger/Web/App.hs b/hledger-web/Hledger/Web/App.hs index f22d677f4..53db0d9c9 100644 --- a/hledger-web/Hledger/Web/App.hs +++ b/hledger-web/Hledger/Web/App.hs @@ -414,9 +414,9 @@ filterform TD{here=here,a=a,p=p} = [$hamlet| visible = "block" filteringclass = if filtering then "filtering" else "" filteringperiodclass = if filteringperiod then "filtering" else "" - stopfiltering = if filtering then [$hamlet|%a#stopfilterlink!href=@?u@ stop filtering acct/desc|] else nulltemplate + stopfiltering = if filtering then [$hamlet|%a#stopfilterlink!href=@?u@ clear filter|] else nulltemplate where u = (here, if filteringperiod then [("p", p)] else []) - stopfilteringperiod = if filteringperiod then [$hamlet|%a#stopfilterlink!href=@?u@ stop filtering period|] else nulltemplate + stopfilteringperiod = if filteringperiod then [$hamlet|%a#stopfilterlink!href=@?u@ clear filter|] else nulltemplate where u = (here, if filtering then [("a", a)] else []) -- | Link to a topic in the manual. @@ -507,20 +507,21 @@ getJournalR = do -- t <- liftIO $ getCurrentLocalTime let -- args = appArgs app -- fspec' = optsToFilterSpec opts args t - br = balanceReportAsHtml opts td $ balanceReport opts fspec j - jr = journalReportAsHtml opts td $ journalReport opts fspec j + sidecontent = balanceReportAsHtml opts td $ balanceReport opts fspec j + maincontent = journalReportAsHtml opts td $ journalReport opts fspec j td = mktd{here=here, title="hledger journal", msg=msg, a=a, p=p, j=j, today=today} editform' = editform td hamletToRepHtml $ pageLayout td [$hamlet| -%div#ledger - %div#accounts ^br^ - ^navlinks.td^ - ^addform.td^ - ^editform'^ - ^importform^ - %div#transactions.journal - ^filterform.td^ - ^jr^ + %div#content + %div#sidebar + ^sidecontent^ + %div#main.journal + ^navlinks.td^ + ^addform.td^ + ^editform'^ + ^importform^ + ^filterform.td^ + ^maincontent^ |] postJournalR :: Handler RepPlain @@ -538,20 +539,21 @@ getRegisterR = do let -- args = appArgs app -- opts' = Empty:opts -- fspec' = optsToFilterSpec opts' args t - br = balanceReportAsHtml opts td $ balanceReport opts fspec j - rr = registerReportAsHtml opts td $ registerReport opts fspec j + sidecontent = balanceReportAsHtml opts td $ balanceReport opts fspec j + maincontent = registerReportAsHtml opts td $ registerReport opts fspec j td = mktd{here=here, title="hledger register", msg=msg, a=a, p=p, j=j, today=today} editform' = editform td hamletToRepHtml $ pageLayout td [$hamlet| -%div#ledger - %div#accounts ^br^ - ^navlinks.td^ - ^addform.td^ - ^editform'^ - ^importform^ - %div#transactions.register - ^filterform.td^ - ^rr^ + %div#content + %div#sidebar + ^sidecontent^ + %div#main.journal + ^navlinks.td^ + ^addform.td^ + ^editform'^ + ^importform^ + ^filterform.td^ + ^maincontent^ |] postRegisterR :: Handler RepPlain @@ -613,13 +615,13 @@ balanceReportAsHtml _ td@TD{here=here,a=a,p=p} (items,total) = [$hamlet| itemAsHtml' = itemAsHtml td itemAsHtml :: TemplateData -> BalanceReportItem -> Hamlet AppRoute itemAsHtml TD{p=p} (acct, adisplay, adepth, abal) = [$hamlet| - %tr.item.$current$ + %tr.item %td.account $indent$ %a!href=$aurl$ $adisplay$ %td.balance!align=right $mixedAmountAsHtml.abal$ |] where - current = "" -- if not (null a) && containsRegex a acct then "current" else "" + -- current = if not (null a) && containsRegex a acct then "current" else "" indent = preEscapedString $ concat $ replicate (2 * adepth) " " aurl = printf ".?a=%s%s" (accountNameToAccountRegex acct) p' :: String p' = if null p then "" else printf "&p=%s" p diff --git a/hledger-web/data/static/style.css b/hledger-web/data/static/style.css index 884fa9d41..b90f55daa 100644 --- a/hledger-web/data/static/style.css +++ b/hledger-web/data/static/style.css @@ -1,72 +1,94 @@ /* hledger web ui styles */ -/* font families & sizes */ +/*------------------------------------------------------------------------------------------*/ +/* 1. colours */ + +/* green */ +body { background-color:#efe; } +.registerreport .odd { background-color:#ded; } +.filtering { background-color:#ded; } +/* white */ +/* body { background-color:#fff; } */ +/* .registerreport .odd { background-color:#eee; } */ +/* .filtering { background-color:#ddd; } */ + +.negative { color:#800; } +#messages { color:red; background-color:#fee; } +#addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list { background-color:#eee; } +#editform textarea { background-color:#eee; } + +/*------------------------------------------------------------------------------------------*/ +/* 2. font families & sizes */ /* overspecified for cross-browser robustness */ -body { font-family:helvetica,arial,"sans serif"; } -pre { font-family:courier,"courier new",monospace; } -input.textinput, .dhx_combo_input, .dhx_combo_list { font-size:small; } -#editform textarea { font-family:courier,"courier new",monospace; font-size:small; } -.nav2 { font-size:small; } -#filterform { font-size:small; } -.topleftlink { font-size:small; } -.toprightlink { font-size:small; } -#journaldesc { font-size:small; } -.help { font-size:smaller; } -.form { font-size:small; } -.journalreport { font-size:small; } -.balancereport { font-size:small; } -.registerreport { font-size:small; } -#showmoreaccounts { font-size:small; } -/* #addformlink { font-size:small; } */ -/* #editformlink { font-size:small; } */ +body { font-family:helvetica,arial,"sans serif"; } +pre { font-family:courier,"courier new",monospace; } +input.textinput, .dhx_combo_input, .dhx_combo_list { font-size:small; } +#editform textarea { font-family:courier,"courier new",monospace; font-size:small; } +.nav2 { font-size:small; } +#filterform { font-size:small; } +.topleftlink { font-size:small; } +.toprightlink { font-size:small; } +#journaldesc { font-size:small; } +.help { font-size:smaller; } +.form { font-size:small; } +.journalreport { font-size:small; } +.balancereport { font-size:small; } +.registerreport { font-size:small; } +#showmoreaccounts { font-size:small; } +/* #addformlink { font-size:small; } */ +/* #editformlink { font-size:small; } */ + +/*------------------------------------------------------------------------------------------*/ +/* 3. layout */ body { margin:0; } + #navbar { padding:2px; } .topleftlink { float:left; margin-right:1em; padding:2px; } .toprightlink { float:right; margin-left:1em; padding:2px; } #navbar h1 { display:inline-block; vertical-align:top; margin:0; } #journalinfo { vertical-align:middle; margin:0; } -/* #navbar { padding:4px; background-color:#eee; border-bottom:2px solid #ddd; } */ -#messages { color:red; background-color:#ffeeee; margin:0.5em;} +/* #navbar { padding:4px; border-bottom:2px solid #ddd; } */ + +#messages { margin:0.5em;} .help { font-style: italic; } .helprow td { padding-bottom:8px; } -#content { margin:1em; } + +#content { padding:4px; } + +#sidebar { float:left; padding-right:1em; margin-bottom:5em; } + +#main { overflow:auto; border-left:thin solid #ded; padding-left:1em; } + #navlinks { margin-bottom:1em; } .navlink { } .navlinkcurrent { font-weight:bold; } -.form { margin:1em; } +.form { margin:0em; } #filterformdiv { margin:0 0 1em 0; white-space:nowrap; } #filterform { margin:0; } #filterform span { padding:4px; } #stopfilterlink { font-weight:bold; } -.filtering { background-color:#ddd; } +.filtering { font-weight:bold; } -div#floatcontainer { white-space:nowrap; } -div#accounts { float:left; padding-right:1em; border-right:thin solid #eee; margin-right:1em; margin-bottom:5em; } -div#transactions { } - -div.journal { } -div.register { } - -.current { font-weight:bold; background-color:#ddd; } +#main .journal { } +#main .register { } +/* .current { font-weight:bold; } */ .description { padding-left:1em; white-space:normal; } -.account { white-space:nowrap; padding-left:1em; } +#transactions .account { white-space:nowrap; padding-left:1em; } .amount { white-space:nowrap; padding-left:1em; } .balance { white-space:nowrap; padding-left:1em; } .account, .amount, .balance { width:2em; } /* minimum width */ .positive { } -.negative { color:#800; } -/* .odd { background-color:#e8e8e8; } */ -/* .even { background-color:#e8f8e8; } */ -/* .even { background-color:#f0fff0; } */ table.journalreport { border-spacing: 0; } .journalreport td { border-top:thin solid #eee; } .journalreport pre { margin-top:0; } -.balancereport tr { vertical-align:top; } -table.balancereport { border-spacing:0; } +.balancereport { border-spacing:0; } +.balancereport tr { vertical-align:bottom; border-spacing:0; } +.balancereport .title { white-space:nowrap; } +.balancereport .item { } .balancereport td { padding:0; } .totalrule td { border-top:thin solid black; } @@ -75,17 +97,17 @@ table.registerreport { border-spacing:0; } .registerreport td { padding-bottom:0.2em; } .registerreport .date { white-space:nowrap; } .firstposting td { } -.registerreport .odd { background-color:#f0f0f0; } -#addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list { background-color:#eee; padding:4px; } +#addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list { padding:4px; } #addform table { } #addform #addbuttonrow { text-align:right; } /* #editform { width:95%; } */ -#editform textarea { width:100%; background-color:#eee; padding:4px; } -#filterform table { border-spacing:0; padding-left:1em; } +#editform textarea { width:100%; padding:4px; } +#filterform table { border-spacing:0; padding-left:0em; } /*------------------------------------------------------------------------------------------*/ +/* 4. dhtmlx.com auto-completing combo box styles */ .dhx_combo_input{ /* color:#333333; */