From 1ecdb0d33490ae2fa4b3faad0f6ed2b8b5410eea Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Fri, 31 Aug 2018 23:19:59 +0100
Subject: [PATCH] Add show more button to the fund pages
---
.../public_funds/blocks/related_projects.html | 24 +++++++++++++---
.../blocks/related_reviewers.html | 10 ++++++-
.../includes/project_listing.html | 3 +-
.../includes/reviewer_listing.html | 2 +-
.../people/includes/person_listing.html | 2 +-
.../src/sass/public/components/_link.scss | 5 ++++
.../sass/public/components/_show-more.scss | 28 +++++++++++++++++++
opentech/static_src/src/sass/public/main.scss | 1 +
8 files changed, 66 insertions(+), 9 deletions(-)
create mode 100644 opentech/static_src/src/sass/public/components/_show-more.scss
diff --git a/opentech/public/funds/templates/public_funds/blocks/related_projects.html b/opentech/public/funds/templates/public_funds/blocks/related_projects.html
index d85fc3e17..c3606bd6d 100644
--- a/opentech/public/funds/templates/public_funds/blocks/related_projects.html
+++ b/opentech/public/funds/templates/public_funds/blocks/related_projects.html
@@ -2,11 +2,19 @@
<div class="wrapper wrapper--breakout">
<div class="wrapper--media-boxes">
<div class="grid grid--two grid--medium-gap">
- {% for funding in page.projectfunding_set.unique %}
- {% if funding.page.active and funding.page.live %}
+ {% for funding in page.projectfunding_set.unique %}
+ {% if funding.page.live %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="projects-toggle">
+ <label class="link link--button link--button__center show-more--button" for="projects-toggle">Show more</label>
+ {% endif %}
+ {% if forloop.counter0 < 10 %}
{% include "public_funds/includes/project_listing.html" with project=funding.page %}
+ {% else %}
+ {% include "public_funds/includes/project_listing.html" with project=funding.page class="show-more--target" %}
{% endif %}
- {% endfor %}
+ {% endif %}
+ {% endfor %}
</div>
</div>
</div>
@@ -16,8 +24,16 @@
<div class="wrapper--media-boxes">
<div class="grid grid--two grid--medium-gap">
{% for funding in page.funding_set.unique %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="fellows-toggle">
+ <label class="link link--button link--button__center show-more--button" for="fellows-toggle">Show more</label>
+ {% endif %}
{% if funding.page.active and funding.page.live %}
- {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific %}
+ {% if forloop.counter0 < 10 %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific %}
+ {% else %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific class="show-more--target"%}
+ {% endif %}
{% endif %}
{% endfor %}
</div>
diff --git a/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html b/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
index 1fb07e068..667d495ec 100644
--- a/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
+++ b/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
@@ -5,7 +5,15 @@
{% for person in page.reviewers.all %}
{% with person_page=person.reviewer.specific %}
{% if person_page.active and person_page.live %}
- {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="reviewers-toggle">
+ <label class="link link--button link--button__center show-more--button" for="reviewers-toggle">Show more</label>
+ {% endif %}
+ {% if forloop.counter0 < 10 %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific %}
+ {% else %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific class="show-more--target" %}
+ {% endif %}
{% endif %}
{% endwith %}
{% endfor %}
diff --git a/opentech/public/funds/templates/public_funds/includes/project_listing.html b/opentech/public/funds/templates/public_funds/includes/project_listing.html
index a6e573e90..cdf06d082 100644
--- a/opentech/public/funds/templates/public_funds/includes/project_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/project_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="media-box" href="{% pageurl project %}">
+<a class="media-box {{ class }}" href="{% pageurl project %}">
{% image project.icon max-210x235 as project_icon %}
{% include "utils/includes/media_box_icon.html" with page_icon=project_icon listing=True %}
@@ -10,4 +10,3 @@
{% endif %}
</div>
</a>
-
diff --git a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
index 82fdff035..1d439aeda 100644
--- a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="media-box" href="{% pageurl person %}">
+<a class="media-box {{ class }}" href="{% pageurl person %}">
{% image person.photo max-210x235 as person_photo %}
{% include "utils/includes/media_box_icon.html" with page_icon=person_photo listing=True %}
diff --git a/opentech/public/people/templates/people/includes/person_listing.html b/opentech/public/people/templates/people/includes/person_listing.html
index 86be4be58..9a6ce2e7b 100644
--- a/opentech/public/people/templates/people/includes/person_listing.html
+++ b/opentech/public/people/templates/people/includes/person_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="listing" href="{% pageurl person %}">
+<a class="listing {{ class }}" href="{% pageurl person %}">
<div class="listing__image listing__image--default">
{% if person.photo %}
{% image person.photo fill-180x180 %}
diff --git a/opentech/static_src/src/sass/public/components/_link.scss b/opentech/static_src/src/sass/public/components/_link.scss
index 825ea2670..b22db3c61 100644
--- a/opentech/static_src/src/sass/public/components/_link.scss
+++ b/opentech/static_src/src/sass/public/components/_link.scss
@@ -11,6 +11,11 @@
}
}
+ &__center {
+ display: block;
+ width: fit-content;
+ margin: 0 auto;
+ }
}
&--button-secondary {
diff --git a/opentech/static_src/src/sass/public/components/_show-more.scss b/opentech/static_src/src/sass/public/components/_show-more.scss
new file mode 100644
index 000000000..80bb2d4d4
--- /dev/null
+++ b/opentech/static_src/src/sass/public/components/_show-more.scss
@@ -0,0 +1,28 @@
+.show-more {
+ &--button {
+ cursor: pointer;
+ user-select: none;
+
+ @include media-query(tablet-portrait) {
+ grid-column: 1 / 3;
+ }
+ }
+
+ &--target {
+ display: none;
+ }
+
+ &--checkbox {
+ display: none;
+
+ &:checked {
+ & ~ .show-more--target {
+ display: flex;
+ }
+ & ~ .show-more--button {
+ display: none;
+ }
+ }
+ }
+
+}
diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss
index 7f09236fa..2c66fe8e0 100755
--- a/opentech/static_src/src/sass/public/main.scss
+++ b/opentech/static_src/src/sass/public/main.scss
@@ -35,6 +35,7 @@
@import 'components/rich-text';
@import 'components/section';
@import 'components/select2';
+@import 'components/show-more';
@import 'components/wrapper';
// Layout
--
GitLab