Show transaction description in list

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;
+}

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>

src/styles.css

@@ -20,7 +20,7 @@ a.mat-fab {
 }
 
 .text-small {
-  font-size: 1em;
+  font-size: 90%;
   color: #333333;
 }