diff --git a/opentech/public/people/templates/people/person_page.html b/opentech/public/people/templates/people/person_page.html
index 93755fa587890b773100b18d4767a639ca502d69..dd38d710b26e803de81b82c34da24314183fe4f7 100644
--- a/opentech/public/people/templates/people/person_page.html
+++ b/opentech/public/people/templates/people/person_page.html
@@ -1,60 +1,61 @@
{% extends "base.html" %}
-
+{% block page_title %}People{% endblock %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
+<section class="wrapper wrapper--small wrapper--person">
+ <div>
+ {% for person_type in page.person_types.all %}
+ <h5 class="heading heading--no-margin">{{ person_type }}</h5>
+ {% endfor %}
- <div class="intro">
- <div class="container">
- <h1>{{ page.first_name }} {{ page.last_name }}</h1>
- {% if page.introduction %}
- <p>{{ page.introduction }}</p>
- {% endif %}
- {% if page.photo %}
- {% image page.photo original %}
- {% endif %}
- {% if page.job_title %}
- <p>{{ page.job_title }}</p>
- {% endif %}
- {% if page.website %}
- <p>{{ page.website }}</p>
- {% endif %}
- {% if page.email %}
- <p>{{ page.email }}</p>
- {% endif %}
+ <h2 class="heading heading--person">{{ page.first_name }} {{ page.last_name }}</h2>
- {% with contact_details=page.contact_details.all %}
- {% if contact_details %}
+ {% if page.job_title %}
+ <h4 class="heading">{{ page.job_title }}</h4>
+ {% endif %}
- {% for contact in contact_details %}
- <p>{{ contact.method_display }}: {{ contact.contact_detail }}</p>
- {% endfor %}
+ {% if page.photo %}
+ {% image page.photo fill-210x235 class="image image--headshot-mobile" %}
+ {% endif %}
- {% endif %}
- {% endwith %}
+ {% if page.introduction %}
+ <h4 class="heading heading--person-introduction">{{ page.introduction }}</h4>
+ {% endif %}
- </div>
- </div>
+ {% include_block page.biography %}
- <section class="main-body">
- <div class="container">
- {% include_block page.biography %}
- </div>
+ {% if page.website %}
+ <p class="list list--contact"><span>Website:</span> <a href="{{ page.website }}">{{ page.website }}</a></p>
+ {% endif %}
- <div class="container">
- <h2>Person types</h2>
- {% for person_type in page.person_types.all %}
- <p>{{ person_type }}</p>
- {% endfor %}
+ {% if page.email %}
+ <p class="list list--contact"><span>Email:</span> <a href="{{ page.email }}">{{ page.email }}</a></p>
+ {% endif %}
- <h2>Social Media Links</h2>
- {% for item in page.social_media_profile.all %}
- <h3>{{ item.get_service_display }}</h3>
- <p>{{ item.profile_url }}</p>
- {% endfor %}
+ {% with contact_details=page.contact_details.all %}
+ {% if contact_details %}
+ {% for contact in contact_details %}
+ <p class="list list--contact"><span>{{ contact.method_display }}:</span> {{ contact.contact_detail }}</p>
+ {% endfor %}
+ {% endif %}
+ {% endwith %}
+ {% include "utils/includes/funding.html" %}
+ </div>
- {% include "utils/includes/funding.html" %}
- </div>
- </section>
+ <div>
+ {% if page.photo %}
+ {% image page.photo fill-210x235 class="image image--headshot-desktop" %}
+ {% endif %}
+ {% if page.social_media_profile.all %}
+ <h5 class="heading heading--top-space">Follow {{ page.first_name }}</h5>
+ {% for item in page.social_media_profile.all %}
+ <a aria-label="Social media link" href="{{ item.profile_url }}">
+ <svg class="icon icon--social-share icon--{{item.service}}-share"><use xlink:href="#{{item.service}}"></use></svg>
+ </a>
+ {% endfor %}
+ {% endif %}
+ </div>
+</section>
{% endblock %}
diff --git a/opentech/public/utils/templates/utils/includes/funding.html b/opentech/public/utils/templates/utils/includes/funding.html
index 9258897dc0cf9a88d0e89133d4a0b8f39f4fc317..e4b8f629f2d3401a47aa864b2bd3ffd3ea769945 100644
--- a/opentech/public/utils/templates/utils/includes/funding.html
+++ b/opentech/public/utils/templates/utils/includes/funding.html
@@ -1,15 +1,15 @@
{% 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>
+ <a class="fund-box__link" href="{% pageurl funding.source %}">{{ funding.source }}</a>
+ {% endfor %}
+ <h4 class="heading heading--top-space heading--total-funding">Total Funding: <span>${{ page.total_funding }}</span></h4>
+ </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..e397410a23137d065db7afbe9bcdaaf8361ff2e0
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_fund-box.scss
@@ -0,0 +1,36 @@
+.fund-box {
+ padding: 10px 15px;
+ margin: 1rem 0;
+ border: 1px solid $color--mid-grey;
+
+ @include media-query(mob-landscape) {
+ padding: 20px 30px;
+ }
+
+ @include media-query(tablet-landscape) {
+ margin: 3rem 0;
+ }
+
+ &__row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 50px;
+ padding: 0 10px;
+ margin-bottom: 5px;
+ background-color: $color--light-grey;
+
+ @include media-query(mob-landscape) {
+ padding: 0 20px;
+ }
+ }
+
+ &__link {
+ display: inline-block;
+ margin-bottom: 20px;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_heading.scss b/opentech/static_src/src/sass/components/_heading.scss
index 2bf4be1d0127890533988bdcf0ad89fc0498b271..d9b8632649fc0d285991a6e2d7168e53fa9710c9 100644
--- a/opentech/static_src/src/sass/components/_heading.scss
+++ b/opentech/static_src/src/sass/components/_heading.scss
@@ -12,9 +12,30 @@
&--no-margin {
margin: 0;
+ line-height: 1;
}
&--regular {
font-weight: $weight--normal;
}
+
+ &--person {
+ margin: 10px 0;
+ line-height: 1;
+ }
+
+ &--person-introduction {
+ margin: 1rem 0;
+ font-weight: $weight--light;
+ }
+
+ &--top-space {
+ margin-top: 1rem;
+ }
+
+ &--total-funding {
+ span {
+ color: $color--purple;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/components/_image.scss b/opentech/static_src/src/sass/components/_image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..abad29745e1fb778057b17fa13df8f23d9ccdaa1
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_image.scss
@@ -0,0 +1,17 @@
+.image {
+ &--headshot-mobile {
+ display: block;
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
+ }
+
+ &--headshot-desktop {
+ display: none;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_list.scss b/opentech/static_src/src/sass/components/_list.scss
index 049460a91ab8a060bd2fe16847597150df0529a4..ba820cc4403ae4081060df3c5f0c5eea6fba77d8 100644
--- a/opentech/static_src/src/sass/components/_list.scss
+++ b/opentech/static_src/src/sass/components/_list.scss
@@ -3,6 +3,14 @@
display: flex;
}
+ &--contact {
+ margin: 0;
+
+ > span {
+ font-weight: $weight--bold;
+ }
+ }
+
&__label {
padding: 10px;
margin-right: 20px;
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index 298db362a3592f9db8f899065cc5af533f3dc54d..4bcb8c151799fd924742e5353a90cd0327d8ffe1 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -93,7 +93,7 @@
&--top-bottom-space {
padding: 3rem 0;
}
-
+
&--light-grey-bg {
background-color: $color--light-grey;
}
@@ -115,7 +115,7 @@
&--apply-bar {
padding: 30px 20px;
}
-
+
&--form {
padding: 20px;
margin: 20px auto;
@@ -139,4 +139,27 @@
&--bottom-space {
padding-bottom: 3rem;
}
+
+ &--person {
+ display: flex;
+ flex-direction: column;
+ padding: 20px 0;
+
+ @include media-query(tablet-portrait) {
+ flex-direction: row;
+ padding: 3rem 0;
+
+ > div:last-child {
+ flex-basis: 210px;
+ }
+ }
+
+ > div:first-child {
+ flex: 1;
+
+ @include media-query(tablet-portrait) {
+ padding-right: 20px;
+ }
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index 802cc91899669886502630e8fbcc9fd798390a2c..a5567398c4ee1391087590bf2ae77b212c155406 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -18,8 +18,10 @@
@import 'components/call-to-action';
@import 'components/form';
@import 'components/heading';
+@import 'components/fund-box';
@import 'components/grid';
@import 'components/icon';
+@import 'components/image';
@import 'components/input';
@import 'components/link';
@import 'components/list';