Construct transactionsreport as a list

hledger-web/static/hledger.css

@@ -158,8 +158,30 @@ ul {
     vertical-align:bottom;
 }
 
-.transactionsreport .posting td {
-    border: none !important;
+.transactionsreport {
+    margin-top: 1ex;
+    border-top: solid 2px #ddd;
+}
+
+.transaction {
+    border-bottom-style: solid;
+    border-width: 1px;
+    border-color: #ddd;
+    padding-bottom: 1ex;
+    padding: 5px;
+}
+
+.transaction .title > * {
+    display: inline-block;
+}
+
+.postings {
+    padding-left: 2em;
+}
+
+.transaction .posting {
+    display: flex;
+    justify-content: space-between;
 }
 
 .negative {

hledger-web/templates/journal.hamlet

@@ -6,31 +6,22 @@ $if elem AddPermission perms
      data-toggle="modal" data-target="#addmodal" title="Lisää uusi tapahtuma kirjanpitoon.">
     Kirjaa tapahtuma
 
-<div .table-responsive>
-  <table .transactionsreport .table .table-condensed>
-    <thead>
-      <th .date style="text-align:left;">Päiväys
-      <th .description style="text-align:left;">Selite
-      <th .account style="text-align:left;">Tili
-      <th .amount style="text-align:right;">Summa
-
+  <ol .transactionsreport .list-unstyled>
     $forall torig <- items
-      <tr .title ##{transactionFrag torig} title="#{showTransaction torig}">
-        <td .date nowrap>
+      <li .transaction ##{transactionFrag torig}>
+        <div .title title="#{showTransaction torig}">
+          <time .date datetime="#{show (tdate torig)}" nowrap>
             #{show (tdate torig)}
-        <td colspan=2>
+          <div>
             #{textElideRight 60 (tdescription torig)}
-        <td .amount style="text-align:right;">
 
+        <ul .postings>
           $forall Posting { paccount = acc, pamount = amt } <- tpostings torig
-        <tr .posting>
-          <td>
-          <td>
-          <td>
-            &nbsp;
+            <li .posting>
+              <div .account>
                 <a href="@?{acctlink acc}##{tindex torig}" title="#{acc}">
                   #{elideAccountName 40 acc}
-          <td .amount style="text-align:right;">
+              <div .amount style="text-align:right;">
                 ^{mixedAmountAsHtml amt}
 
 $if elem AddPermission perms