Adopted Bootstrap classes everywhere

This commit is contained in:
Dominik Süß 2016-10-14 20:27:03 +02:00 committed by Simon Michael
parent aec7d2fa3c
commit 962ddb3c3a
7 changed files with 140 additions and 301 deletions

View File

@ -337,23 +337,20 @@ addform _ vd@VD{..} = [hamlet|
});
<form#addform method=POST style="position:relative;">
<table.form style="width:100%; white-space:nowrap;">
<tr>
<td colspan=4>
<table style="width:100%;">
<tr#descriptionrow>
<td>
<input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
<td>
<input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
$forall n <- postingnums
^{postingfields vd n}
<span style="padding-left:2em;">
<span .small>
Tab in last field for
<a href="#" onclick="addformAddPosting(); return false;">more
(or ctrl +, ctrl -)
<form#addform method=POST .form>
<div .form-group>
<div .row>
<div .col-md-2 .col-xs-2 .col-sm-2>
<input #date .typeahead .form-control .input-lg type=text size=15 name=date placeholder="Date" value="#{defdate}">
<div .col-md-10 .col-xs-10 .col-sm-10>
<input #description .typeahead .form-control .input-lg type=text size=40 name=description placeholder="Description">
$forall n <- postingnums
^{postingfields vd n}
<span style="padding-left:2em;">
<span .small>
Tab in last field for
<a href="#" onclick="addformAddPosting(); return false;">more
(or ctrl +, ctrl -)
|]
where
defdate = "" :: String -- #322 don't set a default, typeahead(?) clears it on tab. See also hledger.js
@ -366,10 +363,11 @@ addform _ vd@VD{..} = [hamlet|
postingnums = [1..numpostings]
postingfields :: ViewData -> Int -> HtmlUrl AppRoute
postingfields _ n = [hamlet|
<tr .posting>
<td style="padding-left:2em;">
<div .form-group .row>
<div .col-md-8 .col-xs-8 .col-sm-8>
<input ##{acctvar} .account-input .typeahead .form-control .input-lg style="width:100%;" type=text name=#{acctvar} placeholder="#{acctph}">
^{amtfieldorsubmitbtn}
<div .col-md-4 .col-xs-4 .col-sm-4>
^{amtfieldorsubmitbtn}
|]
where
islast = n == numpostings

View File

@ -44,7 +44,6 @@ postAddForm = do
$forall e<-errs
\#{e}<br>
|]
-- 1. process the fixed fields with yesod-form
VD{..} <- getViewData

View File

@ -34,29 +34,19 @@ hledgerLayout vd title content = do
defaultLayout $ do
setTitle $ toHtml $ title ++ " - hledger-web"
toWidget [hamlet|
<div#content>
$if showsidebar vd
<div#sidebar>
<div#sidebar-spacer>
<div#sidebar-body>
^{sidebar vd}
$else
<div#sidebar style="display:none;">
<div#sidebar-spacer>
<div#sidebar-body>
<div#main>
^{topbar vd}
<div#maincontent>
^{searchform vd}
^{content}
^{topbar vd}
^{sidebar vd}
<div .col-md-8 .col-xs-12 .col-sm-12>
^{searchform vd}
^{content}
|]
-- | Global toolbar/heading area.
topbar :: ViewData -> HtmlUrl AppRoute
topbar VD{..} = [hamlet|
<nav class="navbar" role="navigation">
<div#topbar>
<h1>#{title}
<div#spacer .col-md-4 .hidden-xs .hidden-sm>
<div#topbar .col-md-8 .col-sm-12 .col-xs-12>
<h1>#{title}
|]
where
title = takeFileName $ journalFilePath j
@ -65,21 +55,14 @@ topbar VD{..} = [hamlet|
sidebar :: ViewData -> HtmlUrl AppRoute
sidebar vd@VD{..} =
[hamlet|
<a href=@{JournalR} title="Go back to top">
hledger-web
<p>
<!--
<a#sidebartogglebtn role="button" style="cursor:pointer;" onclick="sidebarToggle()" title="Show/hide sidebar">
<span class="glyphicon glyphicon-expand"></span>
-->
<br>
<div#sidebar-content>
<p style="margin-top:1em;">
<a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first" style="white-space:nowrap;">Journal
<div#accounts style="margin-top:1em;">
<div #sidebar-menu .col-md-4 .hidden-xs .hidden-sm>
<ul .main-menu .nav .nav-stacked .affix-top>
<li .top>
<a href=@{JournalR} title="Show general journal entries, most recent first">Journal
^{accounts}
|]
-- <a href=@{JournalR} .#{journalcurrent} title="Show general journal entries, most recent first" style="white-space:nowrap;">Journal
-- <p style="margin-top:1em;">
where
journalcurrent = if here == JournalR then "current" else "" :: String
accounts = balanceReportAsHtml opts vd $ balanceReport (reportopts_ $ cliopts_ opts){empty_=True} am j
@ -105,17 +88,12 @@ sidebar vd@VD{..} =
-- | Search form for entering custom queries to filter journal data.
searchform :: ViewData -> HtmlUrl AppRoute
searchform VD{..} = [hamlet|
<div#searchformdiv>
<form#searchform.form method=GET>
<table width="100%">
<tr>
<td width="99%" style="position:relative;">
$if filtering
<a role=button .btn .close style="position:absolute; right:0; padding-right:.1em; padding-left:.1em; margin-right:.1em; margin-left:.1em; font-size:24px;" href="@{here}" title="Clear search terms">&times;
<input .form-control style="font-size:18px; padding-bottom:2px;" name=q value=#{q} title="Enter hledger search patterns to filter the data below">
<td width="1%" style="white-space:nowrap;">
<button .btn .btn-default style="font-size:18px;" type=submit title="Apply search terms">Search
<button .btn .btn-default style="font-size:18px;" type=button data-toggle="modal" data-target="#helpmodal" title="Show search and general help">?
<div#searchformdiv .row>
<form#searchform .form-inline method=GET>
<div .form-group .col-md-12>
<input .form-control name=q value=#{q} title="Enter hledger search patterns to filter the data below" placeholder="Search">
<button .btn .btn-default type=submit title="Apply search terms">Search
<button .btn .btn-default type=button data-toggle="modal" data-target="#helpmodal" title="Show search and general help">?
|]
where
filtering = not $ null q
@ -184,17 +162,10 @@ nulltemplate = [hamlet||]
balanceReportAsHtml :: WebOpts -> ViewData -> BalanceReport -> HtmlUrl AppRoute
balanceReportAsHtml _ vd@VD{..} (items',total) =
[hamlet|
<table.balancereport>
<tr>
<td>Account
<td style="padding-left:1em; text-align:right;">Balance
$forall i <- items
^{itemAsHtml vd i}
<tr.totalrule>
<td colspan=2>
<tr>
<td>
<td.balance>#{mixedAmountAsHtml total}
<li .total>
<span .balance>#{mixedAmountAsHtml total}
|]
where
l = ledgerFromJournal Any j
@ -202,16 +173,12 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
items = items' -- maybe items' (\m -> filter (matchesAccount m . \(a,_,_,_)->a) items') showacctmatcher
itemAsHtml :: ViewData -> BalanceReportItem -> HtmlUrl AppRoute
itemAsHtml _ (acct, adisplay, aindent, abal) = [hamlet|
<tr.item.#{inacctclass}>
<td.account.#{depthclass}>
\#{indent}
<a href="@?{acctquery}" title="Show transactions affecting this account and subaccounts">#{adisplay}
<span.hoverlinks>
$if hassubs
&nbsp;
<a href="@?{acctonlyquery}" title="Show transactions affecting this account but not subaccounts">only
<td.balance>#{mixedAmountAsHtml abal}
<li>
\#{indent}
<a href="@?{acctquery}" title="Show transactions affecting this account and subaccounts">#{adisplay}
$if hassubs
<a href="@?{acctonlyquery}" .only title="Show transactions affecting this account but not subaccounts">only
<span .balance>#{mixedAmountAsHtml abal}
|]
where
hassubs = not $ maybe False (null.asubs) $ ledgerAccount l acct

View File

@ -34,10 +34,12 @@ getJournalR = do
s2 = if filtering then ", filtered" else ""
maincontent = journalTransactionsReportAsHtml opts vd $ journalTransactionsReport (reportopts_ $ cliopts_ opts) j m
hledgerLayout vd "journal" [hamlet|
<h2#contenttitle>#{title}
<!-- p>Journal entries record movements of commodities between accounts. -->
<a#addformlink role="button" style="cursor:pointer; margin-top:1em;" data-toggle="modal" data-target="#addmodal" title="Add a new transaction to the journal" >Add a transaction
^{maincontent}
<div .row>
<h2#contenttitle>#{title}
<!-- p>Journal entries record movements of commodities between accounts. -->
<a#addformlink role="button" style="cursor:pointer; margin-top:1em;" data-toggle="modal" data-target="#addmodal" title="Add a new transaction to the journal" >Add a transaction
<div .table-responsive>
^{maincontent}
|]
postJournalR :: Handler Html
@ -46,11 +48,10 @@ postJournalR = postAddForm
-- | Render a "TransactionsReport" as html for the formatted journal view.
journalTransactionsReportAsHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
journalTransactionsReportAsHtml _ vd (_,items) = [hamlet|
<table.transactionsreport>
<tr.headings>
<table .transactionsreport .table .table-condensed>
<thead>
<th.date style="text-align:left;">
Date
<span .glyphicon .glyphicon-chevron-up>
<th.description style="text-align:left;">Description
<th.account style="text-align:left;">Account
<th.amount style="text-align:right;">Amount
@ -61,26 +62,20 @@ journalTransactionsReportAsHtml _ vd (_,items) = [hamlet|
-- .#{datetransition}
itemAsHtml :: ViewData -> (Int, Bool, Bool, Bool, TransactionsReportItem) -> HtmlUrl AppRoute
itemAsHtml VD{..} (n, _, _, _, (torig, _, split, _, amt, _)) = [hamlet|
<tbody ##{tindex torig}>
<tr .item.#{evenodd}.#{firstposting} style="vertical-align:top;" title="#{show torig}">
<td.date>#{date}
<td.description colspan=2>#{textElideRight 60 desc}
<td.amount style="text-align:right;">
$if showamt
\#{mixedAmountAsHtml amt}
$forall p' <- tpostings torig
<tr .item.#{evenodd}.posting title="#{show torig}">
<td.date>
<td.description>
<td.account>
&nbsp;
<a href="@?{acctlink (paccount p')}##{tindex torig}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
<td.amount style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
<tr.#{evenodd}>
<td>&nbsp;
<td>
<td>
<td>
<tr .title>
<td .date>#{date}
<td .description colspan=2>#{textElideRight 60 desc}
<td .amount style="text-align:right;">
$if showamt
\#{mixedAmountAsHtml amt}
$forall p' <- tpostings torig
<tr .item.#{evenodd}.posting title="#{show torig}">
<td .nonhead>
<td .nonhead>
<td .nonhead>
&nbsp;
<a href="@?{acctlink (paccount p')}##{tindex torig}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
<td.amount .nonhead style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
|]
where
acctlink a = (RegisterR, [("q", T.pack $ accountQuery a)])

View File

@ -48,24 +48,27 @@ postRegisterR = postAddForm
-- Generate html for an account register, including a balance chart and transaction list.
registerReportHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
registerReportHtml opts vd r = [hamlet|
^{registerChartHtml $ transactionsReportByCommodity r}
<div .hidden-xs>
^{registerChartHtml $ transactionsReportByCommodity r}
^{registerItemsHtml opts vd r}
|]
-- Generate html for a transaction list from an "TransactionsReport".
registerItemsHtml :: WebOpts -> ViewData -> TransactionsReport -> HtmlUrl AppRoute
registerItemsHtml _ vd (balancelabel,items) = [hamlet|
<table.registerreport>
<tr.headings>
<th.date style="text-align:left;">
Date
<span .glyphicon .glyphicon-chevron-up>
<th.description style="text-align:left;">Description
<th.account style="text-align:left;">To/From Account(s)
<th.amount style="text-align:right; white-space:normal;">Amount Out/In
<th.balance style="text-align:right; white-space:normal;">#{balancelabel'}
$forall i <- numberTransactionsReportItems items
^{itemAsHtml vd i}
<div .table-responsive>
<table.registerreport .table .table-striped .table-condensed>
<thead>
<tr>
<th style="text-align:left;">
Date
<span .glyphicon .glyphicon-chevron-up>
<th style="text-align:left;">Description
<th style="text-align:left;">To/From Account(s)
<th style="text-align:right; white-space:normal;">Amount Out/In
<th style="text-align:right; white-space:normal;">#{balancelabel'}
$forall i <- numberTransactionsReportItems items
^{itemAsHtml vd i}
|]
where
insomeacct = isJust $ inAccount $ qopts vd
@ -107,7 +110,7 @@ registerChartHtml percommoditytxnreports =
-- is hidden, eg with add form toggled
[hamlet|
<label#register-chart-label style=""><br>
<div#register-chart style="width:85%; height:150px; margin-bottom:1em; display:block;">
<div#register-chart style="height:150px; margin-bottom:1em; display:block;">
<script type=text/javascript>
\$(document).ready(function() {
var $chartdiv = $('#register-chart');

View File

@ -4,182 +4,6 @@
/* 1. colours */
/* green */
body { background-color:white; color:black; }
.registerreport .odd { background-color:#ded; }
/* .transactionsreport .odd { background-color:#eee; } */
.filtering { background-color:#e0e0e0; }
a:link, a:visited { color:#00e !important; }
/* a:link:hover, a:visited:hover { color:red; } */
/* #main { border-color:#e0e0e0; } see below */
/* .journalreport td { border-color:thin solid #e0e0e0; } see below */
/* white */
/* body { background-color:#fff; } */
/* .registerreport .odd { background-color:#eee; } */
/* .filtering { background-color:#ddd; } */
/* #main { border-color:#eee; } see below */
/* .journalreport td { border-color:thin solid #eee; } see below */
#message { color:red; background-color:#fee; }
/* #addform input.textinput, #addform .dhx_combo_input, .dhx_combo_list { /\*background-color:#eee;*\/ } */
#editform textarea { background-color:#eee; }
.negative { color:#800; }
.help { }
.highlighted {
background-color: #F4F466 !important;
}
#sidebar .hoverlinks { visibility:hidden; }
/* #sidebar .mouseover { background-color:rgba(208,208,208,0.5); } */
#sidebar .mouseover .hoverlinks { visibility:visible; }
#sidebar .balancereport .hoverlinks { margin-left:0em; font-weight:normal; /*font-size:smaller;*/ display:inline-block; text-align:right; }
#sidebar .balancereport .hoverlinks a { margin-left:0.5em; }
/* #sidebar .notinacct, .notinacct :link, .notinacct :visited { color:#888; } */
#sidebar .notinacct .negative { color:#b77; }
#sidebar .balancereport .inacct { font-weight:bold; }
/* #sidebar .balancereport .inacct { background-color:#e0e0e0; } */
#sidebar .balancereport .numpostings { padding-left:1em; color:#aaa; }
#sidebar .current { font-weight:bold; }
/*------------------------------------------------------------------------------------------*/
/* 2. font families & sizes */
/* overspecified for cross-browser robustness */
body { font-size:16px; }
/*
body { font-family:helvetica,arial,sans-serif; }
pre { font-family:courier,"courier new",monospace; }
.dhx_combo_input, .dhx_combo_list { font-size:small; }
#editform textarea { font-family:courier,"courier new",monospace; font-size:small; }
.nav2 { font-size:small; }
#searchform { font-size:small; }
.topleftlink { font-size:small; }
.toprightlink { font-size:small; }
#journaldesc { font-size:small; }
.togglelink { font-size:smaller; white-space:nowrap }
.help { font-size:smaller; }
.form { font-size:small; }
.transactionsreport { font-size:small; }
.entriesreport { font-size:small; }
.balancereport { font-size:small; }
.registerreport { font-size:small; }
.showall { font-size:small; }
*/
/* #addformlink { font-size:small; } */
/* #editformlink { font-size:small; } */
/*
#contenttitle { font-size:1.2em; }
*/
/*------------------------------------------------------------------------------------------*/
/* 3. layout */
body { margin:0; }
#topbar { padding:2px; }
.topleftlink { float:left; margin-right:1em; padding:2px; }
.toprightlink { float:right; margin-left:1em; padding:2px; }
#topbar h1 { display:inline-block; vertical-align:top; margin:0; }
#journalinfo { vertical-align:middle; margin:0; }
/* #topbar { padding:4px; border-bottom:2px solid #ddd; } */
#message { margin:0.5em;}
.help { font-style: italic; }
.helprow td { padding-bottom:8px; }
#outermain { overflow:auto; }
#main { overflow:auto; padding-left:1em; }
#sidebar {
float:left;
padding-right:1em;
border-right:thin solid #e0e0e0;
margin-bottom:5em;
}
/* #sidebar.affix { */
/* position: fixed; */
/* top: 20px; */
/* } */
.balancereport .item { border-top:thin solid #e0e0e0; }
#navlinks { margin-bottom:1em; }
.navlink { }
.navlinkcurrent { font-weight:bold; }
.form { margin:0em; }
#searchformdiv { margin:0 0 1em 0; }
#searchform { margin:0; }
#searchform span { padding:4px; }
#stopfilterlink { font-weight:bold; }
.filtering { font-weight:bold; }
#main .journal { }
#main .register { }
.current { font-weight:bold; }
.date { padding-left:0em; }
.description { padding-left:1em; white-space:normal; }
.account { padding-left:1em; white-space:normal; }
.amount { padding-left:1em; white-space:nowrap; }
.balance { padding-left:1em; white-space:nowrap; }
tr td:last-child { padding-right:0.3em; }
tr td:first-child { padding-left:0.3em; }
.amount, .balance { width:2em; } /* minimise width */
.positive { }
td.balance, td.numpostings {
text-align: right;
}
/* table.transactionsreport { border-spacing: 0; } */
/* .transactionsreport td { } */
/* .transactionsreport pre { margin-top:0; } */
/* table.entriesreport { border-spacing: 0; } */
/* .entriesreport td { } */
/* .entriesreport pre { margin-top:0; } */
.balancereport { border-spacing:0; }
.balancereport tr { vertical-align:bottom; border-spacing:0; }
.balancereport .title { white-space:nowrap; }
.balancereport .item { }
/* .balancereport .depth0 { padding-top:1em; } */
.balancereport td { padding:0; }
.totalrule td { border-top:thin solid black; }
.balancereport .account { white-space:nowrap; }
.hidden { display:none; }
table.registerreport { border-spacing:0; }
table.registerreport tr { vertical-align:top; }
table.registerreport td { padding-bottom:0.2em; }
table.registerreport .date { white-space:nowrap; }
table.registerreport tr.posting { font-size:smaller; }
table.registerreport tr.posting .account { padding-left:1.5em; }
table.registerreport tr.posting .amount { padding-right:0.5em; }
tr.firstposting td { }
/* tr.newday td { border-top: 1px solid #797; } */
/* tr.newday .date { font-weight:bold; } */
/* tr.newmonth td { border-top: 2px solid #464; } */
/* tr.newyear td { border-top: 3px solid black; } */
#accountsheading { white-space:nowrap; }
#addform {
/* margin:0 0 2em; */
/* padding:.5em 0; */
/* border-top:thin solid #e0e0e0; */
/* border-bottom:thin solid #e0e0e0; */
}
#addform tr {
vertical-align:top;
}
/* #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%; padding:4px; }
/* #searchform table { border-spacing:0; padding-left:0em; } */
::-moz-placeholder {
font-style:italic;
}
@ -273,3 +97,58 @@ code {
font-weight: bold;
color: black;
}
ul {
list-style-type: none;
padding: 0;
}
#sidebar-menu .main-menu li {
border-top: 1px solid #ebebeb;
}
#sidebar-menu .main-menu .top {
border: none !important;
}
#sidebar-menu .main-menu a {
display: inline;
font-size: 13px;
font-weight: 500;
color: #999;
padding: 4px 20px;
}
#sidebar-menu .main-menu a:hover {
color: #11427D;
text-decoration: none;
background-color: transparent;
}
#sidebar-menu .main-menu .only{
visibility: hidden;
}
#sidebar-menu .main-menu li:hover > .only {
visibility: visible;
}
#sidebar-menu .main-menu .only:hover{
border-left: none;
}
#sidebar-menu .main-menu .balance {
float: right;
}
#sidebar-menu .main-menu .total {
border-left: none;
border-right: none;
border-bottom: none;
border-top: 1px solid black;
}
.transactionsreport .nonhead {
border: none !important;
}
.negative {
color: #a94442;
}

View File

@ -26,9 +26,7 @@ $newline never
<body>
<div class="container">
<header>
<div id="outermain" role="main">
^{pageBody pc}
^{pageBody pc}
<footer>
#{extraCopyright $ appExtra $ settings master}