Display payee and note separately hledger-web

hledger-web/static/hledger.css

@@ -232,6 +232,11 @@ ul {
     color: #888;
 }
 
+.transaction .title .transaction-note {
+    font-size: 1.3em;
+    display: block;
+}
+
 .col-any-0 {
     width:0 !important;
     height:0 !important;

hledger-web/templates/journal.hamlet

@@ -10,13 +10,18 @@ $if elem AddPermission perms
     $forall torig <- items
       <li .transaction ##{transactionFrag torig}>
         <div .title title="#{showTransaction torig}">
-          <time .date datetime="#{show (tdate torig)}" nowrap>
-            #{show (tdate torig)}
-          $if not $ T.null $ tcode torig
-            <div .transaction-code>
-              (#{tcode torig})
-          <div>
-            #{textElideRight 60 (tdescription torig)}
+          $with (payee, note) <- payeeAndNoteFromDescription' $ tdescription torig
+            <time .date datetime="#{show (tdate torig)}" nowrap>
+              #{show (tdate torig)}
+            $if not $ T.null $ tcode torig
+              <div .transaction-code>
+                (#{tcode torig})
+            $if not $ T.null $ T.strip payee
+              <div .transaction-payee>
+                #{textElideRight 60 payee}
+            $if not $ T.null $ T.strip note
+              <div .transaction-note>
+                #{textElideRight 60 note}
 
           $if null $ filter isVisibleTag $ ttags torig
           $else