Refactor card templates and styling.

dashboard/static_src/scss/cards.scss

@@ -1,5 +1,79 @@
+.card-dashboard {
+    @extend .mb-3;
+
+    .card-header {
+        @extend .h4;
+        margin-bottom: 0;
+    }
+
+    .card-body {
+        .card-title {
+            @extend .h4;
+        }
+
+        .card-text {
+            @extend .text-muted;
+        }
+    }
+}
+
+
 .card-diaperchange {
+    @extend .border-danger;
+
+    .card-header {
+        @extend .text-white, .bg-danger;
+    }
+
+    .card-body {
+        @extend .text-danger;
+    }
+
     .progress {
         height: $progress-height * 2;
     }
 }
+
+.card-feeding {
+    @extend .border-primary;
+
+    .card-header {
+        @extend .text-white, .bg-primary;
+    }
+
+    .card-body {
+        @extend .text-primary;
+    }
+}
+
+.card-sleep {
+    @extend .border-secondary;
+
+    .card-header {
+        @extend .text-white, .bg-secondary;
+    }
+}
+
+.card-timer {
+    @extend .border-light;
+
+    .card-header {
+        @extend .text-dark, .bg-light;
+    }
+
+    .card-body {
+        @extend .text-light;
+    }
+}
+
+.card-tummytime {
+    @extend .border-success;
+
+    .card-header {
+        @extend .text-white, .bg-success;
+    }
+
+    .card-body {
+        @extend .text-success;
+    }
+}

dashboard/templates/cards/base.html

@@ -0,0 +1,11 @@
+<div class="card card-dashboard card-{{ type }}">
+    <div class="card-header">
+        <i class="icon icon-{{ type }} pull-left" aria-hidden="true"></i>
+        {% block header %}{% endblock %}
+    </div>
+    <div class="card-body">
+        <span class="card-title"><strong>{% block title %}{% endblock %}</strong></span>
+        <div class="card-text">{% block content %}{% endblock %}</div>
+    </div>
+    {% block listgroup %}{% endblock %}
+</div>

dashboard/templates/cards/diaperchange.html

@@ -1,10 +0,0 @@
-<div class="card card-diaperchange border-danger mb-3">
-    <div class="card-header text-white bg-danger h4">
-        <i class="icon icon-diaperchange pull-left" aria-hidden="true"></i>
-        {% block header %}{% endblock %}
-    </div>
-    <div class="card-body text-danger">
-        <span class="card-title h4"><strong>{% block title %}{% endblock %}</strong></span>
-        <div class="card-text text-muted">{% block content %}{% endblock %}</div>
-    </div>
-</div>

dashboard/templates/cards/diaperchange_last.html

@@ -1,8 +1,7 @@
-{% extends 'cards/diaperchange.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Last Diaper Change{% endblock %}
 
-
 {% block title %}
     {% if change %}
         <strong>{{ change.time|timesince }}</strong> ago

dashboard/templates/cards/diaperchange_types.html

@@ -1,4 +1,4 @@
-{% extends 'cards/diaperchange.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Diaper Changes{% endblock %}
 

dashboard/templates/cards/feeding.html

@@ -1,10 +0,0 @@
-<div class="card card-feeding border-primary mb-3">
-    <div class="card-header text-white bg-primary h4">
-        <i class="icon icon-feeding pull-left" aria-hidden="true"></i>
-        {% block header %}{% endblock %}
-    </div>
-    <div class="card-body text-primary">
-        <span class="card-title h4"><strong>{% block title %}{% endblock %}</strong></span>
-        <div class="card-text text-muted">{% block content %}{% endblock %}</div>
-    </div>
-</div>

dashboard/templates/cards/feeding_last.html

@@ -1,4 +1,4 @@
-{% extends 'cards/feeding.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Last Feeding{% endblock %}
 

dashboard/templates/cards/feeding_last_method.html

@@ -1,4 +1,4 @@
-{% extends 'cards/feeding.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Last Feeding Method{% endblock %}
 

dashboard/templates/cards/sleep.html

@@ -1,10 +0,0 @@
-<div class="card card-sleep border-secondary mb-3">
-    <div class="card-header text-white bg-secondary h4">
-        <i class="icon icon-sleep pull-left" aria-hidden="true"></i>
-        {% block header %}{% endblock %}
-    </div>
-    <div class="card-body">
-        <span class="card-title h4"><strong>{% block title %}{% endblock %}</strong></span>
-        <div class="card-text text-muted">{% block content %}{% endblock %}</div>
-    </div>
-</div>

dashboard/templates/cards/sleep_day.html

@@ -1,4 +1,4 @@
-{% extends 'cards/sleep.html' %}
+{% extends 'cards/base.html' %}
 {% load duration %}
 
 {% block header %}Today's Sleep{% endblock %}

dashboard/templates/cards/sleep_last.html

@@ -1,4 +1,4 @@
-{% extends 'cards/sleep.html' %}
+{% extends 'cards/base.html' %}
 {% load duration %}
 
 {% block header %}Last Slept{% endblock %}

dashboard/templates/cards/sleep_naps_day.html

@@ -1,4 +1,4 @@
-{% extends 'cards/sleep.html' %}
+{% extends 'cards/base.html' %}
 {% load duration %}
 
 {% block header %}Today's Naps <small><em>(7AM - 7PM)</em></small>{% endblock %}

dashboard/templates/cards/timer.html

@@ -1,11 +0,0 @@
-<div class="card card-timer border-light mb-3">
-    <div class="card-header text-dark bg-light h4">
-        <i class="icon icon-timer pull-left" aria-hidden="true"></i>
-        {% block header %}{% endblock %}
-    </div>
-    <div class="card-body text-light">
-        <span class="card-title h4"><strong>{% block title %}{% endblock %}</strong></span>
-        <div class="card-text">{% block content %}{% endblock %}</div>
-    </div>
-    {% block listgroup %}{% endblock %}
-</div>

dashboard/templates/cards/timer_list.html

@@ -1,4 +1,4 @@
-{% extends 'cards/timer.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Active Timers{% endblock %}
 

dashboard/templates/cards/tummytime.html

@@ -1,11 +0,0 @@
-<div class="card card-tummytime border-success mb-3">
-    <div class="card-header text-white bg-success h4">
-        <i class="icon icon-tummytime pull-left" aria-hidden="true"></i>
-        {% block header %}{% endblock %}
-    </div>
-    <div class="card-body text-success">
-        <span class="card-title h4"><strong>{% block title %}{% endblock %}</strong></span>
-        <div class="card-text text-muted">{% block content %}{% endblock %}</div>
-    </div>
-    {% block listgroup %}{% endblock %}
-</div>

dashboard/templates/cards/tummytime_day.html

@@ -1,4 +1,4 @@
-{% extends 'cards/tummytime.html' %}
+{% extends 'cards/base.html' %}
 {% load duration %}
 
 {% block header %}Today's Tummy Time{% endblock %}

dashboard/templates/cards/tummytime_last.html

@@ -1,4 +1,4 @@
-{% extends 'cards/tummytime.html' %}
+{% extends 'cards/base.html' %}
 {% load duration %}
 
 {% block header %}Last Tummy Time{% endblock %}

dashboard/templatetags/cards.py

@@ -17,7 +17,7 @@ def card_diaperchange_last(child):
     """
     instance = DiaperChange.objects.filter(
         child=child).order_by('-time').first()
-    return {'change': instance}
+    return {'type': 'diaperchange', 'change': instance}
 
 
 @register.inclusion_tag('cards/diaperchange_types.html')
@@ -48,7 +48,10 @@ def card_diaperchange_types(child):
             stats[key]['wet_pct'] = info['wet'] / total * 100
             stats[key]['solid_pct'] = info['solid'] / total * 100
 
-    return {'stats': stats, 'last_change': instances.first()}
+    return {
+        'type': 'diaperchange',
+        'stats': stats,
+        'last_change': instances.first()}
 
 
 @register.inclusion_tag('cards/feeding_last.html')
@@ -56,7 +59,7 @@ def card_feeding_last(child):
     """Information about the most recent feeding.
     """
     instance = Feeding.objects.filter(child=child).order_by('-end').first()
-    return {'feeding': instance}
+    return {'type': 'feeding', 'feeding': instance}
 
 
 @register.inclusion_tag('cards/feeding_last_method.html')
@@ -64,7 +67,7 @@ def card_feeding_last_method(child):
     """Information about the most recent feeding _method_.
     """
     instance = Feeding.objects.filter(child=child).order_by('-end').first()
-    return {'feeding': instance}
+    return {'type': 'feeding', 'feeding': instance}
 
 
 @register.inclusion_tag('cards/sleep_last.html')
@@ -72,7 +75,7 @@ def card_sleep_last(child):
     """Information about the most recent sleep entry.
     """
     instance = Sleep.objects.filter(child=child).order_by('-end').first()
-    return {'sleep': instance}
+    return {'type': 'sleep', 'sleep': instance}
 
 
 @register.inclusion_tag('cards/sleep_day.html')
@@ -105,7 +108,7 @@ def card_sleep_day(child, date=None):
 
     count = len(instances)
 
-    return {'total': total, 'count': count}
+    return {'type': 'sleep', 'total': total, 'count': count}
 
 
 @register.inclusion_tag('cards/sleep_naps_day.html')
@@ -120,9 +123,9 @@ def card_sleep_naps_day(child, date=None):
     instances = Sleep.objects.filter(child=child) \
         .filter(start__gte=start_lower, start__lte=start_upper)
     return {
+        'type': 'sleep',
         'total': instances.aggregate(Sum('duration')),
-        'count': len(instances)
+        'count': len(instances)}
-    }
 
 
 @register.inclusion_tag('cards/timer_list.html')
@@ -130,7 +133,7 @@ def card_timer_list():
     """Information about currently active timers.
     """
     instances = Timer.objects.filter(active=True).order_by('-start')
-    return {'instances': list(instances)}
+    return {'type': 'timer', 'instances': list(instances)}
 
 
 @register.inclusion_tag('cards/tummytime_last.html')
@@ -138,7 +141,7 @@ def card_tummytime_last(child):
     """Information about the most recent tummy time.
     """
     instance = TummyTime.objects.filter(child=child).order_by('-end').first()
-    return {'tummytime': instance}
+    return {'type': 'tummytime', 'tummytime': instance}
 
 
 @register.inclusion_tag('cards/tummytime_day.html')
@@ -156,4 +159,8 @@ def card_tummytime_day(child, date=None):
     }
     for instance in instances:
         stats['total'] += timezone.timedelta(seconds=instance.duration.seconds)
-    return {'stats': stats, 'instances': instances, 'last': instances.first()}
+    return {
+        'type': 'tummytime',
+        'stats': stats,
+        'instances': instances,
+        'last': instances.first()}