From 57394e292cfa068cefdd677de959782b8f3331a6 Mon Sep 17 00:00:00 2001
From: Patrick Nagurny <patrick@openaccounting.io>
Date: Mon, 12 Nov 2018 13:17:11 -0500
Subject: [PATCH] better mobile styles

---
 src/app/dashboard/dashboard.html |  6 +++---
 src/app/dashboard/dashboard.scss | 12 ++++++++++++
 src/sass/styles.scss             | 13 +++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/dashboard.html b/src/app/dashboard/dashboard.html
index 498a5eb..1c69bee 100644
--- a/src/app/dashboard/dashboard.html
+++ b/src/app/dashboard/dashboard.html
@@ -54,13 +54,13 @@
         </div>
       </div>
       <div class="row" *ngFor="let recentTx of recentTxs" [routerLink]="'/accounts/'+recentTx.account.id+'/transactions'" [ngClass]="{hidden: recentTx.hidden}">
-        <div class="col-2 date">
+        <div class="col-3 col-md-2 date">
           {{recentTx.tx.date | date:"M/d"}}
         </div>
-        <div class="col-6 description">
+        <div class="col-5 col-md-6 description">
           {{recentTx.tx.description}}
         </div>
-        <div class="col-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}">
+        <div class="col-4 col-md-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}">
           {{-recentTx.split.amount | currencyFormat:recentTx.account.precision}}
         </div>
       </div>
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index 0f52eb4..98fbe87 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -41,4 +41,16 @@
   .expanded .hidden {
     display: flex
   }
+}
+
+@media (max-width: 767px) {
+  .card {
+    .container-fluid {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+  }
+  .card-body {
+    padding: 0.5rem;
+  }
 }
\ No newline at end of file
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
index 53ea683..3727141 100644
--- a/src/sass/styles.scss
+++ b/src/sass/styles.scss
@@ -73,4 +73,17 @@ a:hover {
     font-size: 0.9rem;
     margin: 3rem 0;
   }
+}
+
+@media (max-width: 767px) {
+  .section {
+    padding: 0 0.5rem 1rem 0.5rem;
+  }
+  .content h1 {
+    padding: 0 0.5rem 0rem 0.5rem;
+  }
+
+  .content > * > .description {
+    padding: 0 0.5rem;
+  }
 }
\ No newline at end of file