Replace inline CSS for diaper change types card and prepare for other sass styling.

This commit is contained in:
Christopher Charbonneau Wells 2017-08-21 11:03:18 -04:00
parent 3d0af7f9a5
commit b05b268c7e
10 changed files with 37 additions and 14 deletions

View File

@ -0,0 +1,3 @@
@import "../../../node_modules/bootstrap/scss/functions";
/* Baby Blotter site-wide custom functions. */

View File

@ -0,0 +1,4 @@
@import "functions";
@import "../../../node_modules/bootstrap/scss/variables";
/* Baby Blotter site-wide custom variables. */

View File

@ -1,4 +1,4 @@
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "functions";
@import "variables";
@import "custom";
@import "../../../node_modules/bootstrap/scss/bootstrap";

View File

@ -0,0 +1,7 @@
@import "../../../babyblotter/static_site/scss/variables";
.card-diaperchange {
.progress {
height: $progress-height * 2;
}
}

View File

@ -1,4 +1,4 @@
<div class="card border-danger mb-3">
<div class="card card-diaperchange border-danger mb-3">
<div class="card-header text-white bg-danger h4">
<i class="fa fa-trash pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %}

View File

@ -9,13 +9,19 @@
{% block content %}
{% for date, info in stats.items %}
<div class="progress mt-3">
<div class="progress-bar bg-info lead"
role="progressbar"
style="width: {{ info.wet_pct }}%; height: 30px; line-height: 30px">{{ info.wet }} wet</div>
<div class="progress-bar bg-dark lead"
role="progressbar"
style="width: {{ info.solid_pct }}%; height: 30px; line-height: 30px">
<strong>{{ info.solid }}</strong> solid</div>
{% if info.wet_pct > 0 %}
<div class="progress-bar bg-info lead"
role="progressbar"
style="width: {{ info.wet_pct }}%;">{{ info.wet }}&nbsp;wet</div>
{% endif %}
{% if info.solid_pct > 0 %}
<div class="progress-bar bg-dark lead"
role="progressbar"
style="width: {{ info.solid_pct }}%;">
<strong>{{ info.solid }}</strong>&nbsp;solid</div>
{% endif %}
</div>
<div class="text-center text-dark small">
{{ date|date:'D' }}

View File

@ -1,4 +1,4 @@
<div class="card border-primary mb-3">
<div class="card card-feeding border-primary mb-3">
<div class="card-header text-white bg-primary h4">
<i class="fa fa-spoon pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %}

View File

@ -1,4 +1,4 @@
<div class="card border-dark mb-3">
<div class="card card-sleep border-dark mb-3">
<div class="card-header text-white bg-dark h4">
<i class="fa fa-bed pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %}

View File

@ -1,4 +1,4 @@
<div class="card border-success mb-3">
<div class="card card-tummytime border-success mb-3">
<div class="card-header text-white bg-success h4">
<i class="fa fa-smile-o pull-left" aria-hidden="true"></i>
{% block header %}{% endblock %}

View File

@ -21,7 +21,10 @@ gulp.task('app:scripts', function() {
gulp.task('app:styles', function (cb) {
pump([
gulp.src('babyblotter/static_site/scss/babyblotter.scss'),
gulp.src([
'babyblotter/static_site/scss/babyblotter.scss',
'*/static/scss/*.scss'
]),
sass().on('error', sass.logError),
concat('app.css'),
gulp.dest('babyblotter/static/babyblotter/css/')