diff --git a/opentech/public/funds/migrations/0006_fundindex_introduction.py b/opentech/public/funds/migrations/0006_fundindex_introduction.py
new file mode 100644
index 0000000000000000000000000000000000000000..a6664aac3ee87756de405867fa70cd262f00092b
--- /dev/null
+++ b/opentech/public/funds/migrations/0006_fundindex_introduction.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.8 on 2018-02-08 10:49
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('public_funds', '005_link_text_optional'),
+ ]
+
+ operations = [
+ migrations.AddField(
+ model_name='fundindex',
+ name='introduction',
+ field=models.TextField(blank=True),
+ ),
+ ]
diff --git a/opentech/public/funds/models.py b/opentech/public/funds/models.py
index ea687ab31166d37a32ec4cad53a6738a9b11f222..0b3484cce2ecba0bd3dcab54386ada4026b2fd82 100644
--- a/opentech/public/funds/models.py
+++ b/opentech/public/funds/models.py
@@ -61,6 +61,12 @@ class FundIndex(BasePage):
subpage_types = ['FundPage']
parent_page_types = ['home.HomePage']
+ introduction = models.TextField(blank=True)
+
+ content_panels = BasePage.content_panels + [
+ FieldPanel('introduction')
+ ]
+
def get_context(self, request, *args, **kwargs):
funds = FundPage.objects.live().public().descendant_of(self)
diff --git a/opentech/public/funds/templates/public_funds/fund_index.html b/opentech/public/funds/templates/public_funds/fund_index.html
index ce4f0b1db6ef2f27f9269c007d362c79d43b38d4..40d38499babf7c83235490e57b62fe92676ea470 100644
--- a/opentech/public/funds/templates/public_funds/fund_index.html
+++ b/opentech/public/funds/templates/public_funds/fund_index.html
@@ -1 +1 @@
-{% extends "standardpages/index_page.html" %}
+{% extends "utils/listing_index.html" %}
diff --git a/opentech/public/funds/templates/public_funds/lab_index.html b/opentech/public/funds/templates/public_funds/lab_index.html
index ce4f0b1db6ef2f27f9269c007d362c79d43b38d4..40d38499babf7c83235490e57b62fe92676ea470 100644
--- a/opentech/public/funds/templates/public_funds/lab_index.html
+++ b/opentech/public/funds/templates/public_funds/lab_index.html
@@ -1 +1 @@
-{% extends "standardpages/index_page.html" %}
+{% extends "utils/listing_index.html" %}
diff --git a/opentech/public/news/templates/news/news_index.html b/opentech/public/news/templates/news/news_index.html
index 93afa81b585c81dcb67385fe6297f57028920e60..e3c69ba84f277897a3189f3f6c38266985ea0880 100644
--- a/opentech/public/news/templates/news/news_index.html
+++ b/opentech/public/news/templates/news/news_index.html
@@ -1,46 +1,50 @@
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags static %}
+{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
-<div class="wrapper wrapper--flex">
- <section class="section section--main">
- <h1>{{ page.title }}</h1>
+<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+
+ <form class="form" method="GET">
+ <div class="form__select form__select--narrow">
+ <select name="news_type">
+ <option value="">All</option>
+ {% for news_type in news_types %}
+ <option value="{{ news_type.0 }}" {% if request.GET.news_type == news_type.0|slugify %}selected="selected"{% endif %}>{{ news_type.1 }}</option>
+ {% endfor %}
+ </select>
+ </div>
+ </form>
{% if news %}
- <ul role="list">
+ <div class="wrapper wrapper--listings wrapper--top-space">
{% for n in news %}
- <li>
- <a href="{% pageurl n %}">
- {% if n.listing_image %}
- {% image n.listing_image fill-450x300 %}
+ <a class="listing" href="{% pageurl n %}">
+ {% if n.listing_image %}
+ {% image n.listing_image fill-450x300 %}
+ {% endif %}
+ <h4 class="listing__title" role="listitem">
+ {{ n.listing_title|default:n.title }}
+ </h4>
+ {% if n.listing_summary or n.introduction %}
+ <h6 class="listing__teaser">{{ n.listing_summary|default:n.introduction }}</h6>
+ {% endif %}
+ <span class="listing__meta">
+ {{ n.display_date|date:"Y-m-d" }}
+ {% if n.authors.all %}
+ | By:
+ {% for author in n.authors.all %}
+ {{ author.author }}
+ {% endfor %}
{% endif %}
- <div>
- <h2 role="listitem">
- {{ n.listing_title|default:n.title }}
- </h2>
- <span>{{ n.display_date }}</span>
- {% if n.listing_summary or n.introduction %}
- <p>{{ n.listing_summary|default:n.introduction }}</p>
- {% endif %}
- </div>
- </a>
- </li>
+ </span>
+ </a>
{% endfor %}
- </ul>
+ </div>
{% include "includes/pagination.html" with paginator_page=news %}
{% else %}
{# no items #}
{% endif %}
- </section>
- <aside class="sidebar sidebar--filters">
- <form method="GET">
- <select name="news_type">
- <option value="">All</option>
- {% for news_type in news_types %}
- <option value="{{ news_type.0 }}" {% if request.GET.news_type == news_type.0|slugify %}selected="selected"{% endif %}>{{ news_type.1 }}</option>
- {% endfor %}
- </select>
- </form>
- </aside>
+
</div>
{% endblock %}
diff --git a/opentech/public/people/templates/people/includes/person_listing.html b/opentech/public/people/templates/people/includes/person_listing.html
index 9ec5a19cbe6311e9c0e4bb839555fb5ea021c83e..7cdb06a53b4b2841f823e1d5d0d455b4d913c4b8 100644
--- a/opentech/public/people/templates/people/includes/person_listing.html
+++ b/opentech/public/people/templates/people/includes/person_listing.html
@@ -1,7 +1,13 @@
-<article class="person">
- <h2><a href="{% pageurl person %}">{{ person.first_name }} {{ person.last_name }}</a></h2>
-
+{% load wagtailcore_tags wagtailimages_tags %}
+<a class="listing" href="{% pageurl person %}">
+ {% if person.photo %}
+ {% image person.photo fill-180x180 class="listing__image" %}
+ {% endif %}
+ {% for type in person.person_types.all %}
+ <h6 class="listing__category">{{ type }}</h6>
+ {% endfor %}
+ <h4 class="listing__title">{{ person.first_name }} {{ person.last_name }}</h4>
{% if person.listing_summary or person.introduction %}
- <p>{{ person.listing_summary|default:person.introduction }}</p>
+ <h6 class="listing__teaser">{{ person.listing_summary|default:person.introduction }}</h6>
{% endif %}
-</article>
+</a>
diff --git a/opentech/public/people/templates/people/person_index_page.html b/opentech/public/people/templates/people/person_index_page.html
index 7d5f4d3a2c2ac5fb60f06e5e1ac632e0eb7012b4..1bf042b8208a2c3db76e47d64299951938feb9f3 100644
--- a/opentech/public/people/templates/people/person_index_page.html
+++ b/opentech/public/people/templates/people/person_index_page.html
@@ -1,26 +1,20 @@
{% extends "base.html" %}
{% load wagtailcore_tags %}
-
+{% block body_class %}light-grey-bg{% endblock %}
{% block content %}
+<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+ <div class="wrapper wrapper--listings">
- <div class="intro">
- <div class="container">
- <h1>{{ page.title }}</h1>
- </div>
- </div>
-
- <section class="main-body">
- <div class="container">
- {% if people.paginator.count %}
- {% for person in people %}
- {% include "people/includes/person_listing.html" with person=person %}
- {% endfor %}
+ {% if people.paginator.count %}
+ {% for person in people %}
+ {% include "people/includes/person_listing.html" with person=person %}
+ {% endfor %}
- {% include "includes/pagination.html" with paginator_page=people %}
- {% else %}
- {# no results #}
- {% endif %}
- </div>
- </section>
+ {% include "includes/pagination.html" with paginator_page=people %}
+ {% else %}
+ {# no results #}
+ {% endif %}
+ </div>
+</div>
{% endblock %}
diff --git a/opentech/public/people/templates/people/person_page.html b/opentech/public/people/templates/people/person_page.html
index 092dc853efa772255dd0ffe70ec31ef96b482573..5c6155d4c474986fe1793e9613af6c99153a2456 100644
--- a/opentech/public/people/templates/people/person_page.html
+++ b/opentech/public/people/templates/people/person_page.html
@@ -1,5 +1,5 @@
{% extends "base.html" %}
-{% block page_title %}People{% endblock %}
+
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
@@ -9,8 +9,6 @@
<h5 class="heading heading--no-margin">{{ person_type }}</h5>
{% endfor %}
- <h2 class="heading heading--person">{{ page.first_name }} {{ page.last_name }}</h2>
-
{% if page.job_title %}
<h4 class="heading">{{ page.job_title }}</h4>
{% endif %}
diff --git a/opentech/public/projects/templates/projects/project_index_page.html b/opentech/public/projects/templates/projects/project_index_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..40d38499babf7c83235490e57b62fe92676ea470
--- /dev/null
+++ b/opentech/public/projects/templates/projects/project_index_page.html
@@ -0,0 +1 @@
+{% extends "utils/listing_index.html" %}
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 8a6353a1259e02fbc50a0af7b0063185df15615b..825e761735af7bc79ed55bbff55ca38e0efc0b1d 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -1,11 +1,9 @@
{% extends "base.html" %}
-{% block page_title %}Projects{% endblock %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<div class="wrapper wrapper--small wrapper--top-inner-space">
<div class="media-box media-box--reverse">
- <h4 class="media-box__title media-box__title--mobile">{{ page.title }}</h4>
{% if page.icon %}
<div class="media-box__images">
{% image page.icon max-210x235 as page_icon %}
@@ -19,7 +17,6 @@
{% endif %}
<div class="media-box__content">
- <h4 class="media-box__title media-box__title--desktop">{{ page.title }}</h4>
{% if page.introduction %}
<h5 class="media-box__teaser">{{ page.introduction }}</h5>
{% endif %}
diff --git a/opentech/public/utils/templates/utils/listing_index.html b/opentech/public/utils/templates/utils/listing_index.html
new file mode 100644
index 0000000000000000000000000000000000000000..76f58acaf96492fa065ad4042e793eba68e4735c
--- /dev/null
+++ b/opentech/public/utils/templates/utils/listing_index.html
@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+{% block body_class %}light-grey-bg{% endblock %}
+{% block content %}
+<div class="wrapper wrapper--small wrapper--top-bottom-inner-space">
+ {% if page.introduction %}
+ <h4 class="heading heading--listings-introduction">{{ page.introduction }}</h4>
+ {% endif %}
+
+ <div class="wrapper wrapper--listings">
+
+ {% if subpages.object_list.exists %}
+ {% for subpage in subpages.object_list.specific %}
+
+ <a class="listing" href="{% pageurl subpage %}">
+ {% if subpage.icon %}
+ {% image subpage.icon fill-180x180 class="listing__image" %}
+ {% else %}
+ <div class="listing__image listing__image--default">
+ <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+ </div>
+ {% endif %}
+
+ {% if subpage.deadline %}
+ <p class="listing__deadline">
+ <svg class="icon icon--calendar icon--small"><use xlink:href="#calendar"></use></svg>
+ <span>Next deadline: {{ subpage.deadline|date:"M j, Y" }}</span>
+ </p>
+ {% endif %}
+
+ <h4 class="listing__title">{{ subpage.listing_title|default:subpage.title }}</h4>
+
+ {% if subpage.listing_summary or subpage.introduction %}
+ <h6 class="listing__teaser">{{ subpage.listing_summary|default:subpage.introduction|truncatechars_html:155 }}</h6>
+ {% endif %}
+ </a>
+
+ {% endfor %}
+
+ {% include "includes/pagination.html" with paginator_page=subpages %}
+
+ {% else %}
+ {# no items on this page #}
+ {% endif %}
+ </div>
+</div>
+
+{% endblock %}
diff --git a/opentech/static_src/src/sass/components/_form.scss b/opentech/static_src/src/sass/components/_form.scss
index 934f5b64f6242ebad4dffeece0dc52b5fa33f514..7ae1bc8c5b671af33d89baaf9a38cfffd5ee40d6 100644
--- a/opentech/static_src/src/sass/components/_form.scss
+++ b/opentech/static_src/src/sass/components/_form.scss
@@ -81,13 +81,20 @@
select {
background: transparent;
border-radius: 0;
- appearance: none; // sass-lint:disable-line
+ appearance: none;
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+ -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+
option {
background-color: white;
}
}
+
+ &--narrow {
+ max-width: 280px;
+ }
}
select,
diff --git a/opentech/static_src/src/sass/components/_heading.scss b/opentech/static_src/src/sass/components/_heading.scss
index a9ebfc140d006b409d240967830d12944157ca1d..a9ff0108ec15616c0a3578bf6ffc8d6fb8a6d106 100644
--- a/opentech/static_src/src/sass/components/_heading.scss
+++ b/opentech/static_src/src/sass/components/_heading.scss
@@ -19,11 +19,6 @@
font-weight: $weight--normal;
}
- &--person {
- margin: 10px 0;
- line-height: 1;
- }
-
&--person-introduction {
margin: 1rem 0;
font-weight: $weight--light;
@@ -42,4 +37,9 @@
&--center {
text-align: center;
}
+
+ &--listings-introduction {
+ margin: 1rem 0;
+ font-weight: $weight--normal;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index f73af13d95e1fdee4bc3cef6105b3e010ca9c89b..bd125be5f61ec5df4c888614d47d582d419ba931 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -119,4 +119,9 @@
stroke: $color--correct;
}
}
+
+ &--small {
+ width: 14px;
+ height: 14px;
+ }
}
diff --git a/opentech/static_src/src/sass/components/_listing.scss b/opentech/static_src/src/sass/components/_listing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d9f92f84800b24069b7096dabc49bc4157a69df9
--- /dev/null
+++ b/opentech/static_src/src/sass/components/_listing.scss
@@ -0,0 +1,80 @@
+.listing {
+ $root: &;
+ padding: 20px;
+ margin-bottom: 20px;
+ background: $color--white;
+ transition: box-shadow $transition;
+
+ @include media-query(tablet-portrait) {
+ position: relative;
+ height: 180px;
+ padding: 30px 210px 30px 30px;
+ }
+
+ &:hover {
+ box-shadow: 0 2px 15px 0 $color--black-10;
+ }
+
+ &__title {
+ margin-bottom: 5px;
+ line-height: 1;
+ transition: color $transition;
+
+ #{$root}:hover & {
+ color: $color--dark-blue;
+ }
+ }
+
+ &__teaser {
+ font-weight: $weight--normal;
+ color: $color--default;
+ }
+
+ &__meta {
+ font-size: 15px;
+ color: darken($color--mid-grey, 20%);
+ }
+
+ &__image {
+ margin-bottom: 10px;
+
+ @include media-query(tablet-portrait) {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+
+ &--default {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 180px;
+ height: 180px;
+ background-color: $color--light-blue;
+
+ > svg {
+ width: 80px;
+ height: 70px;
+ fill: $color--white;
+ }
+ }
+ }
+
+ &__category {
+ margin-bottom: 5px;
+ color: $color--default;
+ }
+
+ &__deadline {
+ @extend %h6;
+ display: flex;
+ align-items: center;
+ margin: 0 0 10px;
+ font-weight: $weight--semibold;
+ color: $color--pink;
+
+ span {
+ margin-left: 5px;
+ }
+ }
+}
diff --git a/opentech/static_src/src/sass/components/_media-box.scss b/opentech/static_src/src/sass/components/_media-box.scss
index add2851beba391276d6bff5dbbee7d795731a403..96fcf2c576213dc2f829ebc03665a2fed1b9206b 100644
--- a/opentech/static_src/src/sass/components/_media-box.scss
+++ b/opentech/static_src/src/sass/components/_media-box.scss
@@ -152,22 +152,4 @@
fill: $color--white;
}
}
-
- &__title {
- &--mobile {
- display: block;
-
- @include media-query(mob-landscape) {
- display: none;
- }
- }
-
- &--desktop {
- display: none;
-
- @include media-query(mob-landscape) {
- display: block;
- }
- }
- }
}
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index e136703148dabd70b25a7d01d862064713553ece..78ee1531fb60084b6d3c23ac2f32fbd7299e95d7 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -210,6 +210,12 @@
&--project {
padding-top: 2rem;
}
+
+ &--listings {
+ display: flex;
+ flex-direction: column;
+ margin-top: 2rem;
+ }
&--page-title {
display: flex;
diff --git a/opentech/static_src/src/sass/main.scss b/opentech/static_src/src/sass/main.scss
index a5567398c4ee1391087590bf2ae77b212c155406..3bf40e5ee6feda16bdf8bc364b0cc85db816376a 100755
--- a/opentech/static_src/src/sass/main.scss
+++ b/opentech/static_src/src/sass/main.scss
@@ -25,6 +25,7 @@
@import 'components/input';
@import 'components/link';
@import 'components/list';
+@import 'components/listing';
@import 'components/media-box';
@import 'components/nav';
@import 'components/responsive-object';