From 7382e74d782795324141d6f82a9fa448b84d758b Mon Sep 17 00:00:00 2001
From: Christopher Charbonneau Wells <chris@chrxs.net>
Date: Tue, 31 Jul 2018 19:57:01 -0700
Subject: [PATCH] Use Bootstrap card columns for Child Dashboard.

---
 dashboard/static_src/scss/dashboard.scss |  7 ++++++
 dashboard/templates/dashboard/child.html | 28 ++++++++++--------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/dashboard/static_src/scss/dashboard.scss b/dashboard/static_src/scss/dashboard.scss
index e69de29b..3ba505ca 100644
--- a/dashboard/static_src/scss/dashboard.scss
+++ b/dashboard/static_src/scss/dashboard.scss
@@ -0,0 +1,7 @@
+@include media-breakpoint-between(sm, md) {
+    #dashboard-child {
+        &.card-columns {
+            column-count: 2;
+        }
+    }
+}
\ No newline at end of file
diff --git a/dashboard/templates/dashboard/child.html b/dashboard/templates/dashboard/child.html
index 536fb4f0..874af77f 100644
--- a/dashboard/templates/dashboard/child.html
+++ b/dashboard/templates/dashboard/child.html
@@ -10,23 +10,17 @@
 {% endblock %}
 
 {% block content %}
-    <div id="dashboard-child" class="row align-items-start">
-        <div class="col-lg-4 col-md-6 col-sm-12">
-            {% card_feeding_last object %}
-            {% card_feeding_last_method object %}
-            {% card_timer_list %}
-            {% card_statistics object %}
-        </div>
-        <div class="col-lg-4 col-md-6 col-sm-12">
-            {% card_sleep_last object %}
-            {% card_sleep_day object %}
-            {% card_sleep_naps_day object %}
-            {% card_tummytime_day object %}
-        </div>
-        <div class="col-lg-4 col-md-6 col-sm-12">
-            {% card_diaperchange_last object %}
-            {% card_diaperchange_types object %}
-        </div>
+    <div id="dashboard-child" class="card-columns">
+        {% card_feeding_last object %}
+        {% card_feeding_last_method object %}
+        {% card_timer_list %}
+        {% card_statistics object %}
+        {% card_sleep_last object %}
+        {% card_sleep_day object %}
+        {% card_sleep_naps_day object %}
+        {% card_tummytime_day object %}
+        {% card_diaperchange_last object %}
+        {% card_diaperchange_types object %}
     </div>
 {% endblock %}