Refactor card templates and styling.

This commit is contained in:
Christopher Charbonneau Wells 2017-10-28 23:01:39 -04:00
parent 5afc55ca31
commit 97dbf87e5b
19 changed files with 113 additions and 74 deletions

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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 %}

View File

@ -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>

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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()}