Extract amount template

web/account.html

@@ -29,9 +29,7 @@
         <td>
             <a href="transaction/{{.ID}}">{{.Memo}}</a>
         </td>
-        <td style="text-align: right;{{if .Amount.GetPositive}}{{else}}color: red;{{end}}">
+        {{template "amount-cell" .Amount}}
-            {{printf "%.2f" .Amount.GetFloat64}}
-        </td>
     </tr>
     {{end}}
 </table>

web/amount.tpl

@@ -0,0 +1,11 @@
+{{define "amount"}}
+        <span class="right {{if .GetPositive}}{{else}}negative{{end}}">
+            {{printf "%.2f" .GetFloat64}}
+        </span>
+{{end}}
+
+{{define "amount-cell"}}
+        <td class="right {{if .GetPositive}}{{else}}negative{{end}}">
+            {{printf "%.2f" .GetFloat64}}
+        </td>
+{{end}}

web/budget-sidebar.tpl

@@ -9,7 +9,7 @@
                         {{range .Accounts}}
                                 <li>
                                         <a href="/budget/{{$.Budget.ID}}/account/{{.ID}}">{{.Name}}</a>
-                                        <span class="right">{{printf "%.2f" .Balance.GetFloat64}}</span>
+                                        {{template "amount" .Balance}}
                                 </li>
                         {{end}}
                         <li>

web/budget.html

@@ -24,9 +24,7 @@
         <td>
             <a href="transaction/{{.ID}}">{{.Memo}}</a>
         </td>
-        <td style="text-align: right;{{if .Amount.GetPositive}}{{else}}color: red;{{end}}">
+        {{template "amount-cell" .Amount}}
-            {{printf "%.2f" .Amount.GetFloat64}}
-        </td>
     </tr>
     {{end}}
 </table>

web/budgeting.html

@@ -28,12 +28,8 @@
         </td>
         <td>
         </td>
-        <td style="text-align: right;{{if .Balance.GetPositive}}{{else}}color: red;{{end}}">
+        {{template "amount-cell" .Balance}}
-            {{printf "%.2f" .Balance.GetFloat64}}
+        {{template "amount-cell" .Activity}}
-        </td>
-        <td style="text-align: right;{{if .Activity.GetPositive}}{{else}}color: red;{{end}}">
-            {{printf "%.2f" .Activity.GetFloat64}}
-        </td>
     </tr>
     {{end}}
 </table>

web/static/css/main.css

@@ -60,3 +60,7 @@ body {
 .right {
     text-align: right;
 }
+
+.negative {
+    color: #d50000;
+}