web: more robust layout with wide content, style cleanups

This commit is contained in:
Simon Michael 2010-11-28 14:57:23 +00:00
parent e1bd767f61
commit c3c20492bf
2 changed files with 92 additions and 68 deletions

View File

@ -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^
%div#content
%div#sidebar
^sidecontent^
%div#main.journal
^navlinks.td^
^addform.td^
^editform'^
^importform^
%div#transactions.journal
^filterform.td^
^jr^
^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^
%div#content
%div#sidebar
^sidecontent^
%div#main.journal
^navlinks.td^
^addform.td^
^editform'^
^importform^
%div#transactions.register
^filterform.td^
^rr^
^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) "&nbsp;"
aurl = printf ".?a=%s%s" (accountNameToAccountRegex acct) p' :: String
p' = if null p then "" else printf "&p=%s" p

View File

@ -1,6 +1,24 @@
/* 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; }
@ -20,53 +38,57 @@ input.textinput, .dhx_combo_input, .dhx_combo_list { 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; */