Use Bootstrap card columns for Child Dashboard.

babybuddy · Aug 1, 2018 · 7382e74 · 7382e74
1 parent 9f0a99d
commit 7382e74
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git 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;
+        }
+    }
+}
diff --git 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 %}