web: more robust layout with wide content, style cleanups
This commit is contained in:
		
							parent
							
								
									e1bd767f61
								
							
						
					
					
						commit
						c3c20492bf
					
				| @ -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) " " | ||||
|        aurl = printf ".?a=%s%s" (accountNameToAccountRegex acct) p' :: String | ||||
|        p' = if null p then "" else printf "&p=%s" p | ||||
|  | ||||
| @ -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; */ | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user