From 930b38a3458d497cdea4ade0124a29796a778b37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Z=C3=A1rybnick=C3=BD?= <jakub.zarybnicky@inuits.eu>
Date: Sun, 17 Jun 2018 17:42:41 +0200
Subject: [PATCH] web: Simplify HTML and CSS

---
 hledger-web/src/Handler/RegisterR.hs        |  4 +-
 hledger-web/src/Widget/AddForm.hs           |  2 +-
 hledger-web/src/Widget/Common.hs            | 42 +++++---------------
 hledger-web/static/hledger.css              | 44 ++++++---------------
 hledger-web/static/hledger.js               |  6 +--
 hledger-web/templates/add-form.hamlet       |  9 +++--
 hledger-web/templates/balance-report.hamlet | 25 ++++++++++++
 hledger-web/templates/journal.hamlet        | 22 ++++++-----
 hledger-web/templates/register.hamlet       | 13 +++---
 9 files changed, 80 insertions(+), 87 deletions(-)
 create mode 100644 hledger-web/templates/balance-report.hamlet

diff --git a/hledger-web/src/Handler/RegisterR.hs b/hledger-web/src/Handler/RegisterR.hs
index ba14a1f61..e7b4f5dc0 100644
--- a/hledger-web/src/Handler/RegisterR.hs
+++ b/hledger-web/src/Handler/RegisterR.hs
@@ -29,7 +29,9 @@ getRegisterR = do
       s2 = if m /= Any then ", filtered" else ""
       header = a <> s1 <> s2
 
-  let r@(balancelabel,items) = accountTransactionsReport (reportopts_ $ cliopts_ opts) j m $ fromMaybe Any $ inAccountQuery qopts
+  let ropts = reportopts_ (cliopts_ opts)
+      acctQuery = fromMaybe Any (inAccountQuery qopts)
+      r@(balancelabel,items) = accountTransactionsReport ropts j m acctQuery
       balancelabel' = if isJust (inAccount qopts) then balancelabel else "Total"
   defaultLayout $ do
     setTitle "register - hledger-web"
diff --git a/hledger-web/src/Widget/AddForm.hs b/hledger-web/src/Widget/AddForm.hs
index 15800e093..19b53d660 100644
--- a/hledger-web/src/Widget/AddForm.hs
+++ b/hledger-web/src/Widget/AddForm.hs
@@ -38,7 +38,7 @@ addModal ::
 addModal addR j today = do
   (addView, addEnctype) <- generateFormPost (addForm j today)
   [whamlet|
-<div .modal.fade #addmodal tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
+<div .modal #addmodal tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
   <div .modal-dialog .modal-lg>
     <div .modal-content>
       <div .modal-header>
diff --git a/hledger-web/src/Widget/Common.hs b/hledger-web/src/Widget/Common.hs
index 8be72ae63..092aef5f9 100644
--- a/hledger-web/src/Widget/Common.hs
+++ b/hledger-web/src/Widget/Common.hs
@@ -2,6 +2,7 @@
 {-# LANGUAGE NamedFieldPuns #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE QuasiQuotes #-}
+{-# LANGUAGE TemplateHaskell #-}
 
 module Widget.Common
   ( accountQuery
@@ -24,6 +25,7 @@ import Text.Blaze ((!), textValue)
 import qualified Text.Blaze.Html5 as H
 import qualified Text.Blaze.Html5.Attributes as A
 import Text.Blaze.Internal (preEscapedString)
+import Text.Hamlet (hamletFile)
 import Yesod
 
 import Hledger
@@ -57,39 +59,13 @@ helplink topic label _ = H.a ! A.href u ! A.target "hledgerhelp" $ toHtml label
 
 -- | Render a "BalanceReport" as html.
 balanceReportAsHtml :: Eq r => (r, r) -> r -> Bool -> Journal -> [QueryOpt] -> BalanceReport -> HtmlUrl r
-balanceReportAsHtml (journalR, registerR) here hideEmpty j qopts (items, total) = [hamlet|
-<tr :here == journalR:.inacct>
-  <td .top .acct>
-    <a href=@{journalR} :here == journalR:.inacct
-       title="Show general journal entries, most recent first">
-      Journal
-  <td .top>
-$forall (acct, adisplay, aindent, abal) <- items
-  <tr .#{inacctClass acct} :isZeroMixedAmount abal && hideEmpty:.hide>
-    <td .acct :isZeroMixedAmount abal:.empty>
-      <div .ff-wrapper>
-        \#{indent aindent}
-        <a href="@?{acctLink acct}" .#{inacctClass acct}
-           title="Show transactions affecting this account and subaccounts">
-          #{adisplay}
-        $if hasSubs acct
-          <a href="@?{acctOnlyLink acct}" .only .hidden-sm .hidden-xs
-             title="Show transactions affecting this account but not subaccounts">only
-    <td>
-      ^{mixedAmountAsHtml abal}
-<tr .total>
-  <td>
-  <td>
-    ^{mixedAmountAsHtml total}
-|] where
-  l = ledgerFromJournal Any j
-  inacctClass acct = case inAccountQuery qopts of
-    Just m' -> if m' `matchesAccount` acct then "inacct" else ""
-    Nothing -> "" :: Text
-  hasSubs acct = maybe True (not . null . asubs) (ledgerAccount l acct)
-  indent a = preEscapedString $ concat $ replicate (2 + 2 * a) "&nbsp;"
-  acctLink acct = (registerR, [("q", accountQuery acct)])
-  acctOnlyLink acct = (registerR, [("q", accountOnlyQuery acct)])
+balanceReportAsHtml (journalR, registerR) here hideEmpty j qopts (items, total) =
+  $(hamletFile "templates/balance-report.hamlet")
+  where
+    l = ledgerFromJournal Any j
+    indent a = preEscapedString $ concat $ replicate (2 + 2 * a) "&nbsp;"
+    hasSubAccounts acct = maybe True (not . null . asubs) (ledgerAccount l acct)
+    matchesAcctSelector acct = Just True == ((`matchesAccount` acct) <$> inAccountQuery qopts)
 
 accountQuery :: AccountName -> Text
 accountQuery = ("inacct:" <>) .  quoteIfSpaced
diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index ec8d65c74..7864ec1b4 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -39,9 +39,6 @@
   max-height:300px;
 }
 
-.tt-suggestions {
-}
-
 .tt-suggestion {
   padding: 3px 20px;
   font-size: 18px;
@@ -51,7 +48,6 @@
 .tt-suggestion.tt-cursor {
   color: #fff;
   background-color: #0097cf;
-
 }
 
 .tt-suggestion p {
@@ -105,51 +101,37 @@ ul {
 
 #sidebar-menu .main-menu a {
     display: inline;
-	  font-size: 16px;
-	  font-weight: 500;
-	  color: #2F2F2F;
-	  padding: 4px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #2F2F2F;
+    padding: 4px 20px;
 }
 
 #sidebar-menu .main-menu a:hover {
-	  color: #11427D;
-	  text-decoration: none;
-	  background-color: transparent;
+    color: #11427D;
+    text-decoration: none;
+    background-color: transparent;
 }
 
-#sidebar-menu .main-menu .only{
+#sidebar-menu .main-menu .only {
     visibility: hidden;
     padding: 1px;
 }
 
-#sidebar-menu .main-menu tr:hover > td > div > .only {
+#sidebar-menu .main-menu tr: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;
-}
-
-#sidebar-menu .main-menu .inacct {
+#sidebar-menu .main-menu .inacct, #sidebar-menu .main-menu .inacct .acct-name {
     font-weight: bold;
-	  color: #11427D;
+    color: #11427D;
     background-color: #f9f9f9;
 }
 
 #sidebar-menu .main-menu .amount {
     float: right;
     overflow-x:auto;
-	  font-weight: 500 !important;
+    font-weight: 500 !important;
 }
 
 #sidebar-menu .main-menu .acct {
@@ -157,7 +139,7 @@ ul {
     vertical-align:bottom;
 }
 
-.transactionsreport .nonhead {
+.transactionsreport .posting td {
     border: none !important;
 }
 
diff --git a/hledger-web/static/hledger.js b/hledger-web/static/hledger.js
index 212ff263f..88647dae5 100644
--- a/hledger-web/static/hledger.js
+++ b/hledger-web/static/hledger.js
@@ -167,7 +167,7 @@ function addformAddPosting() {
     return;
   }
 
-  var prevLastRow = $('.amount-input:last');
+  var prevLastRow = $('#addform .account-group:last');
   prevLastRow.off('keypress');
 
   // Clone the currently last row
@@ -201,8 +201,8 @@ function addformDeletePosting() {
     || $('.amount-input:last').is(':focus');
   // delete last row
   $('#addform .account-group:last').remove();
-  if(focuslost){
-    focus($('account-input:last'));
+  if (focuslost) {
+    focus($('.account-input:last'));
   }
   // Rebind keypress
   $('.amount-input:last').keypress(addformAddPosting);
diff --git a/hledger-web/templates/add-form.hamlet b/hledger-web/templates/add-form.hamlet
index d23b3c6c3..4faa7d962 100644
--- a/hledger-web/templates/add-form.hamlet
+++ b/hledger-web/templates/add-form.hamlet
@@ -41,7 +41,7 @@
 
 <div .account-postings>
   $forall (n, (acc, amt, accE, amtE)) <- msgs
-    <div .form-group .row .account-group #grp#{n}>
+    <div .form-group .row .account-group>
       <div .col-md-8 .col-xs-8 .col-sm-8 :isJust accE:.has-error>
         <input .account-input.form-control.input-lg.typeahead type=text
           name=account placeholder="Account #{n}" value="#{acc}">
@@ -65,6 +65,7 @@ $if length journals > 1
       $forall p <- journals
         <option value=#{p}>#{p}
 <span .small style="padding-left:2em;">
-  Enter a value in the last field for
-    <a href="#" onclick="addformAddPosting(); return false;">more
-    (or ctrl +, ctrl -)
+  Enter a value in the last field for #
+  <a href="#" onclick="addformAddPosting(); return false;">
+    more
+  \ (or ctrl +, ctrl -)
diff --git a/hledger-web/templates/balance-report.hamlet b/hledger-web/templates/balance-report.hamlet
new file mode 100644
index 000000000..2476c36dc
--- /dev/null
+++ b/hledger-web/templates/balance-report.hamlet
@@ -0,0 +1,25 @@
+<tr :here == journalR:.inacct>
+  <td .top .acct>
+    <a href=@{journalR} :here == journalR:.inacct
+       title="Show general journal entries, most recent first">
+      Journal
+  <td .top>
+$forall (acct, adisplay, aindent, abal) <- items
+  <tr
+     :matchesAcctSelector acct:.inacct
+     :isZeroMixedAmount abal && hideEmpty:.hide>
+    <td .acct :isZeroMixedAmount abal:.empty>
+      <div .ff-wrapper>
+        \#{indent aindent}
+        <a.acct-name href="@?{(registerR, [("q", accountQuery acct)])}"
+           title="Show transactions affecting this account and subaccounts">
+          #{adisplay}
+        $if hasSubAccounts acct
+          <a href="@?{(registerR, [("q", accountOnlyQuery acct)])}" .only.hidden-sm.hidden-xs
+             title="Show transactions affecting this account but not subaccounts">only
+    <td>
+      ^{mixedAmountAsHtml abal}
+<tr .total>
+  <td>
+  <td>
+    ^{mixedAmountAsHtml total}
diff --git a/hledger-web/templates/journal.hamlet b/hledger-web/templates/journal.hamlet
index 09726cb63..586e2b1cf 100644
--- a/hledger-web/templates/journal.hamlet
+++ b/hledger-web/templates/journal.hamlet
@@ -1,4 +1,6 @@
-<h2 #contenttitle>#{title'}
+<h2>
+  #{title'}
+
 <a #addformlink href="#" 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
@@ -13,21 +15,23 @@
 
     $forall (torig, _, split, _, amt, _) <- items
       <tr .title #transaction-#{tindex torig}>
-        <td .date nowrap>#{show (tdate torig)}
-        <td .description colspan=2>#{textElideRight 60 (tdescription torig)}
+        <td .date nowrap>
+          #{show (tdate torig)}
+        <td colspan=2>
+          #{textElideRight 60 (tdescription torig)}
         <td .amount style="text-align:right;">
           $if not split && not (isZeroMixedAmount amt)
-            \^{mixedAmountAsHtml amt}
+            ^{mixedAmountAsHtml amt}
 
       $forall Posting { paccount = acc, pamount = amt } <- tpostings torig
-        <tr .item.posting title="#{show torig}">
-          <td .nonhead>
-          <td .nonhead>
-          <td .nonhead>
+        <tr .posting title="#{show torig}">
+          <td>
+          <td>
+          <td>
             &nbsp;
             <a href="@?{acctlink acc}##{tindex torig}" title="#{acc}">
               #{elideAccountName 40 acc}
-          <td .amount .nonhead style="text-align:right;">
+          <td .amount style="text-align:right;">
             ^{mixedAmountAsHtml amt}
 
 ^{addModal AddR j today}
diff --git a/hledger-web/templates/register.hamlet b/hledger-web/templates/register.hamlet
index b09c97609..f71103424 100644
--- a/hledger-web/templates/register.hamlet
+++ b/hledger-web/templates/register.hamlet
@@ -1,4 +1,4 @@
-<h2 #contenttitle>
+<h2>
   #{header}
 
 <div .hidden-xs>
@@ -19,15 +19,18 @@
 
     <tbody>
       $forall (torig, tacct, split, acct, amt, bal) <- items
-        <tr ##{tindex torig} .item title="#{show torig}" style="vertical-align:top;">
+        <tr ##{tindex torig} title="#{show torig}" style="vertical-align:top;">
           <td .date>
             <a href="@{JournalR}#transaction-#{tindex torig}">
               #{show (tdate tacct)}
-          <td .description title="#{show torig}">#{textElideRight 30 (tdescription tacct)}
-          <td .account>#{elideRight 40 acct}
+          <td title="#{show torig}">
+            #{textElideRight 30 (tdescription tacct)}
+          <td .account>
+            #{elideRight 40 acct}
           <td .amount style="text-align:right; white-space:nowrap;">
             $if not split || not (isZeroMixedAmount amt)
               ^{mixedAmountAsHtml amt}
-          <td .balance style="text-align:right;">^{mixedAmountAsHtml bal}
+          <td style="text-align:right;">
+            ^{mixedAmountAsHtml bal}
 
 ^{addModal AddR j today}