From 85759996b4705cca1e564322ead4c73f4914ca23 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 9 Jan 2018 14:09:24 +0000
Subject: [PATCH] styling for the related content block
---
.../static_src/src/sass/components/_grid.scss | 13 ++++
.../static_src/src/sass/components/_icon.scss | 8 ++
.../templates/includes/relatedcontent.html | 78 ++++++++++---------
3 files changed, 63 insertions(+), 36 deletions(-)
diff --git a/opentech/static_src/src/sass/components/_grid.scss b/opentech/static_src/src/sass/components/_grid.scss
index a390e51aa..7ea30a2f5 100644
--- a/opentech/static_src/src/sass/components/_grid.scss
+++ b/opentech/static_src/src/sass/components/_grid.scss
@@ -55,5 +55,18 @@
grid-template-columns: 50% 50%;
}
}
+
+ &--max-three {
+ grid-template-columns: 1fr;
+ grid-gap: 30px;
+
+ @include media-query(mob-landscape) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @include media-query(tablet-portrait) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
}
}
diff --git a/opentech/static_src/src/sass/components/_icon.scss b/opentech/static_src/src/sass/components/_icon.scss
index 7db3b1eae..330542e1a 100644
--- a/opentech/static_src/src/sass/components/_icon.scss
+++ b/opentech/static_src/src/sass/components/_icon.scss
@@ -51,4 +51,12 @@
fill: $color--white;
}
}
+
+ &--card-pixels {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 35px;
+ height: 52px;
+ }
}
diff --git a/opentech/templates/includes/relatedcontent.html b/opentech/templates/includes/relatedcontent.html
index 439bcdf0e..71fd15281 100644
--- a/opentech/templates/includes/relatedcontent.html
+++ b/opentech/templates/includes/relatedcontent.html
@@ -1,41 +1,47 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% if related_documents or related_pages %}
- <section class="grid">
- {% for related_document in related_documents %}
- {% with document=related_document.document %}
- <div class="card">
- <a href="{{ document.url }}">
- <h2>
- {% if related_document.title %}
- {{ related_document.title }}
- ({{ document.file_extension }})
- {% else %}
- {{ document.filename }}
- {% endif %}
- </h2>
- </a>
- </div>
- {% endwith %}
- {% endfor %}
+ <div class="wrapper wrapper--breakout wrapper--dark-bg">
+ <div class="wrapper wrapper--medium">
+ <h2>You might also like...</h2>
+ <section class="grid grid--max-three">
+ {% for related_document in related_documents %}
+ {% with document=related_document.document %}
+ <div class="card">
+ <a href="{{ document.url }}">
+ <h2>
+ {% if related_document.title %}
+ {{ related_document.title }}
+ ({{ document.file_extension }})
+ {% else %}
+ {{ document.filename }}
+ {% endif %}
+ </h2>
+ </a>
+ </div>
+ {% endwith %}
+ {% endfor %}
- {% for related in related_pages %}
- {# a related object links to the original page (related.source_page) and a related one (related.page) #}
- {% if related.page.live %}
- {% with specific_related_page=related.page.specific %}
- <a class="card" href="{% pageurl specific_related_page %}">
- {% if specific_related_page.listing_image %}
- {% image specific_related_page.listing_image fill-450x300 %}
- {% endif %}
- <h2>
- {{ specific_related_page.listing_title|default:specific_related_page.title }}
- </h2>
- {% if specific_related_page.listing_summary or specific_related_page.introduction %}
- <p>{{ specific_related_page.listing_summary|default:specific_related_page.introduction }}</p>
- {% endif %}
- </a>
- {% endwith %}
- {% endif %}
- {% endfor %}
- </section>
+ {% for related in related_pages %}
+ {# a related object links to the original page (related.source_page) and a related one (related.page) #}
+ {% if related.page.live %}
+ {% with specific_related_page=related.page.specific %}
+ <a class="card" href="{% pageurl specific_related_page %}">
+ {% if specific_related_page.listing_image %}
+ {% image specific_related_page.listing_image fill-450x300 %}
+ {% endif %}
+ <h4>
+ {{ specific_related_page.listing_title|default:specific_related_page.title }}
+ </h4>
+ {% if specific_related_page.listing_summary or specific_related_page.introduction %}
+ <p class="card__teaser">{{ specific_related_page.listing_summary|default:specific_related_page.introduction|truncatechars_html:130 }}</p>
+ {% endif %}
+ <svg class="icon icon--card-pixels"><use xlink:href="#arrow-head-pixels"></use></svg>
+ </a>
+ {% endwith %}
+ {% endif %}
+ {% endfor %}
+ </section>
+ </div>
+ </div>
{% endif %}
--
GitLab