From e836d306b8403d45acaa7718bf1fb04e166e35cf Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Sun, 28 Feb 2021 16:44:48 -0700
Subject: [PATCH] Show transaction description in list

---
 .../transaction-list.component.css                | 12 ++++++++----
 .../transaction-list.component.html               | 15 ++++++++-------
 src/styles.css                                    |  2 +-
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/transactions/transaction-list/transaction-list.component.css b/src/app/transactions/transaction-list/transaction-list.component.css
index 8e4dd44..329c200 100644
--- a/src/app/transactions/transaction-list/transaction-list.component.css
+++ b/src/app/transactions/transaction-list/transaction-list.component.css
@@ -1,5 +1,9 @@
-.transactions .list-row-one {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0.2em;
+.transaction-details p {
+    padding: 2px 0;
 }
+
+.transaction-description {
+    font-style: italic;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/app/transactions/transaction-list/transaction-list.component.html b/src/app/transactions/transaction-list/transaction-list.component.html
index bb02378..6101e1c 100644
--- a/src/app/transactions/transaction-list/transaction-list.component.html
+++ b/src/app/transactions/transaction-list/transaction-list.component.html
@@ -1,12 +1,13 @@
 <mat-nav-list *ngIf="transactions" class="transactions">
-    <a mat-list-item *ngFor="let transaction of transactions"
+    <a mat-list-item class="transaction-list-item" *ngFor="let transaction of transactions"
         routerLink="/transactions/{{ transaction.id }}">
-        <div matLine class="list-row-one">
-            <p>{{transaction.title}}</p>
-            <p class="amount" [class.expense]="transaction.expense" [class.income]="!transaction.expense">
-                {{ transaction.amount / 100 | currency }}
-            </p>
+        <div matLine class="transaction-list-details">
+            <p class="transaction-title">{{transaction.title}}</p>
+            <p class="transaction-description text-small" *ngIf="transaction.description">{{transaction.description }}</p>
+            <p matLine class="transaction-date text-small">{{ transaction.date | date }}</p>
         </div>
-        <p matLine class="text-small">{{ transaction.date | date }}</p>
+        <p class="amount" [class.expense]="transaction.expense" [class.income]="!transaction.expense">
+            {{ transaction.amount / 100 | currency }}
+        </p>
     </a>
 </mat-nav-list>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index b73bc15..af0097d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -20,7 +20,7 @@ a.mat-fab {
 }
 
 .text-small {
-  font-size: 1em;
+  font-size: 90%;
   color: #333333;
 }