From 381a1ebadb4c74051e0123990a4b92adceb9f2ac Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 30 Jan 2018 17:02:13 +0000
Subject: [PATCH] adding fund box styling
---
.../templates/utils/includes/funding.html | 25 ++++++++++---------
.../src/sass/components/_fund-box.scss | 19 ++++++++++++++
.../src/sass/components/_heading.scss | 6 +++++
opentech/static_src/src/sass/main.scss | 1 +
4 files changed, 39 insertions(+), 12 deletions(-)
create mode 100644 opentech/static_src/src/sass/components/_fund-box.scss
diff --git a/opentech/public/utils/templates/utils/includes/funding.html b/opentech/public/utils/templates/utils/includes/funding.html
index 9258897dc..d06ee8004 100644
--- a/opentech/public/utils/templates/utils/includes/funding.html
+++ b/opentech/public/utils/templates/utils/includes/funding.html
@@ -1,15 +1,16 @@
{% load wagtailcore_tags %}
{% if page.total_funding %}
- <h2>Funding to date</h2>
- {% for funding in page.funding.all %}
- <table>
- <tr>
- <td>{{ funding.year }}</td>
- <td>${{ funding.value }}</td>
- <td>{{ funding.duration }} months</td>
- <td><a href="{% pageurl funding.source %}">{{ funding.source }}</a></td>
- </tr>
- </table>
- {% endfor %}
- <p>Total Funding: {{ page.total_funding }}</p>
+ <div class="fund-box">
+ <h4>Funding to date</h4>
+ {% for funding in page.funding.all %}
+ <div class="fund-box__row">
+ <span>{{ funding.year }}</span>
+ <span>${{ funding.value }}</span>
+ <span>{{ funding.duration }} months</span>
+ </div>
+
+ <h4 class="heading heading--top-space heading--total-funding">Total Funding: <span>${{ page.total_funding }}</span></h4>
+ <a href="{% pageurl funding.source %}">{{ funding.source }}</a>
+ {% endfor %}
+ </div>
{% endif %}
diff --git a/opentech/static_src/src/sass/components/_fund-box.scss b/opentech/static_src/src/sass/components/_fund-box.scss
new file mode 100644
index 000000000..2ab72473b
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_fund-box.scss
@@ -0,0 +1,19 @@
+.fund-box {
+ padding: 20px 30px;
+ margin: 1rem 0;
+ border: 1px solid $color--mid-grey;
+
+ @include media-query(tablet-landscape) {
+ margin: 3rem 0;
+ }
+
+ &__row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 50px;
+ padding: 0 20px;
+ margin-bottom: 5px;
+ background-color: $color--light-grey;
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_heading.scss b/opentech/static_src/src/sass/components/_heading.scss
index 7b1e2c108..d9b863264 100644
--- a/opentech/static_src/src/sass/components/_heading.scss
+++ b/opentech/static_src/src/sass/components/_heading.scss
@@ -32,4 +32,10 @@
&--top-space {
margin-top: 1rem;
}
+
+ &--total-funding {
+ span {
+ color: $color--purple;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index 802cc9189..cf8b98049 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -18,6 +18,7 @@
@import 'components/call-to-action';
@import 'components/form';
@import 'components/heading';
+@import 'components/fund-box';
@import 'components/grid';
@import 'components/icon';
@import 'components/input';
--
GitLab