From 97dbf87e5b40d95a36dfb419633c2cbfb4eac2d1 Mon Sep 17 00:00:00 2001
From: Christopher Charbonneau Wells <chris@chrxs.net>
Date: Sat, 28 Oct 2017 23:01:39 -0400
Subject: [PATCH] Refactor card templates and styling.

---
 .../static_src/scss/icons.scss                |  0
 dashboard/static_src/scss/cards.scss          | 74 +++++++++++++++++++
 dashboard/templates/cards/base.html           | 11 +++
 dashboard/templates/cards/diaperchange.html   | 10 ---
 .../templates/cards/diaperchange_last.html    |  3 +-
 .../templates/cards/diaperchange_types.html   |  2 +-
 dashboard/templates/cards/feeding.html        | 10 ---
 dashboard/templates/cards/feeding_last.html   |  2 +-
 .../templates/cards/feeding_last_method.html  |  2 +-
 dashboard/templates/cards/sleep.html          | 10 ---
 dashboard/templates/cards/sleep_day.html      |  2 +-
 dashboard/templates/cards/sleep_last.html     |  2 +-
 dashboard/templates/cards/sleep_naps_day.html |  2 +-
 dashboard/templates/cards/timer.html          | 11 ---
 dashboard/templates/cards/timer_list.html     |  2 +-
 dashboard/templates/cards/tummytime.html      | 11 ---
 dashboard/templates/cards/tummytime_day.html  |  2 +-
 dashboard/templates/cards/tummytime_last.html |  2 +-
 dashboard/templatetags/cards.py               | 29 +++++---
 19 files changed, 113 insertions(+), 74 deletions(-)
 rename {core => babybuddy}/static_src/scss/icons.scss (100%)
 create mode 100644 dashboard/templates/cards/base.html
 delete mode 100644 dashboard/templates/cards/diaperchange.html
 delete mode 100644 dashboard/templates/cards/feeding.html
 delete mode 100644 dashboard/templates/cards/sleep.html
 delete mode 100644 dashboard/templates/cards/timer.html
 delete mode 100644 dashboard/templates/cards/tummytime.html

diff --git a/core/static_src/scss/icons.scss b/babybuddy/static_src/scss/icons.scss
similarity index 100%
rename from core/static_src/scss/icons.scss
rename to babybuddy/static_src/scss/icons.scss
diff --git a/dashboard/static_src/scss/cards.scss b/dashboard/static_src/scss/cards.scss
index f15e3ca2..91271d06 100644
--- a/dashboard/static_src/scss/cards.scss
+++ b/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;
+    }
+}
diff --git a/dashboard/templates/cards/base.html b/dashboard/templates/cards/base.html
new file mode 100644
index 00000000..40bb0648
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/diaperchange.html b/dashboard/templates/cards/diaperchange.html
deleted file mode 100644
index d07080ca..00000000
--- a/dashboard/templates/cards/diaperchange.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/diaperchange_last.html b/dashboard/templates/cards/diaperchange_last.html
index b9e303f5..62ac1a4e 100644
--- a/dashboard/templates/cards/diaperchange_last.html
+++ b/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
diff --git a/dashboard/templates/cards/diaperchange_types.html b/dashboard/templates/cards/diaperchange_types.html
index 29bae9ee..2c0ae5f2 100644
--- a/dashboard/templates/cards/diaperchange_types.html
+++ b/dashboard/templates/cards/diaperchange_types.html
@@ -1,4 +1,4 @@
-{% extends 'cards/diaperchange.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Diaper Changes{% endblock %}
 
diff --git a/dashboard/templates/cards/feeding.html b/dashboard/templates/cards/feeding.html
deleted file mode 100644
index 86d08977..00000000
--- a/dashboard/templates/cards/feeding.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/feeding_last.html b/dashboard/templates/cards/feeding_last.html
index 3cda9fa3..85dadb10 100644
--- a/dashboard/templates/cards/feeding_last.html
+++ b/dashboard/templates/cards/feeding_last.html
@@ -1,4 +1,4 @@
-{% extends 'cards/feeding.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Last Feeding{% endblock %}
 
diff --git a/dashboard/templates/cards/feeding_last_method.html b/dashboard/templates/cards/feeding_last_method.html
index 0ac77e66..e5fa0cdb 100644
--- a/dashboard/templates/cards/feeding_last_method.html
+++ b/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 %}
 
diff --git a/dashboard/templates/cards/sleep.html b/dashboard/templates/cards/sleep.html
deleted file mode 100644
index d50dc170..00000000
--- a/dashboard/templates/cards/sleep.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/sleep_day.html b/dashboard/templates/cards/sleep_day.html
index fd88471d..309fdf00 100644
--- a/dashboard/templates/cards/sleep_day.html
+++ b/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 %}
diff --git a/dashboard/templates/cards/sleep_last.html b/dashboard/templates/cards/sleep_last.html
index 209060fe..bafca867 100644
--- a/dashboard/templates/cards/sleep_last.html
+++ b/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 %}
diff --git a/dashboard/templates/cards/sleep_naps_day.html b/dashboard/templates/cards/sleep_naps_day.html
index f4a17976..d65295da 100644
--- a/dashboard/templates/cards/sleep_naps_day.html
+++ b/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 %}
diff --git a/dashboard/templates/cards/timer.html b/dashboard/templates/cards/timer.html
deleted file mode 100644
index 2de78744..00000000
--- a/dashboard/templates/cards/timer.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/timer_list.html b/dashboard/templates/cards/timer_list.html
index c0849beb..aa1eedda 100644
--- a/dashboard/templates/cards/timer_list.html
+++ b/dashboard/templates/cards/timer_list.html
@@ -1,4 +1,4 @@
-{% extends 'cards/timer.html' %}
+{% extends 'cards/base.html' %}
 
 {% block header %}Active Timers{% endblock %}
 
diff --git a/dashboard/templates/cards/tummytime.html b/dashboard/templates/cards/tummytime.html
deleted file mode 100644
index 4fde157b..00000000
--- a/dashboard/templates/cards/tummytime.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/dashboard/templates/cards/tummytime_day.html b/dashboard/templates/cards/tummytime_day.html
index 63153ff7..ec23cd80 100644
--- a/dashboard/templates/cards/tummytime_day.html
+++ b/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 %}
diff --git a/dashboard/templates/cards/tummytime_last.html b/dashboard/templates/cards/tummytime_last.html
index c9481d7d..8aed589a 100644
--- a/dashboard/templates/cards/tummytime_last.html
+++ b/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 %}
diff --git a/dashboard/templatetags/cards.py b/dashboard/templatetags/cards.py
index e1f90704..5e57677e 100644
--- a/dashboard/templatetags/cards.py
+++ b/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()}