diff --git a/opentech/public/utils/templates/utils/includes/funding.html b/opentech/public/utils/templates/utils/includes/funding.html index 9258897dc0cf9a88d0e89133d4a0b8f39f4fc317..d06ee8004763a5916f22fb2d02d9e04373c3d7b3 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 0000000000000000000000000000000000000000..2ab72473bc35bdbd9793c6e3d42a3667c51e7145 --- /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 7b1e2c108ffbfa7090dd6d225cb16f92f36f5a52..d9b8632649fc0d285991a6e2d7168e53fa9710c9 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 802cc91899669886502630e8fbcc9fd798390a2c..cf8b98049b963fe6dbf908cbe8624423938c4d7d 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';