Skip to content
Snippets Groups Projects
Commit 85759996 authored by Chris Lawton's avatar Chris Lawton
Browse files

styling for the related content block

parent 425d5041
No related branches found
Tags v1.27.0
No related merge requests found
Hide whitespace changes
Inline Side-by-side
opentech/static_src/src/sass/components/_grid.scss
+ 13
− 0
View file @ 85759996
...@@ -55,5 +55,18 @@ ...@@ -55,5 +55,18 @@
grid-template-columns: 50% 50%; 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);
}
}
} }
} }
opentech/static_src/src/sass/components/_icon.scss
+ 8
− 0
View file @ 85759996
...@@ -51,4 +51,12 @@ ...@@ -51,4 +51,12 @@
fill: $color--white; fill: $color--white;
} }
} }
&--card-pixels {
position: absolute;
right: 0;
bottom: 0;
width: 35px;
height: 52px;
}
} }
opentech/templates/includes/relatedcontent.html
+ 42
− 36
View file @ 85759996
{% load wagtailcore_tags wagtailimages_tags %} {% load wagtailcore_tags wagtailimages_tags %}
{% if related_documents or related_pages %} {% if related_documents or related_pages %}
<section class="grid"> <div class="wrapper wrapper--breakout wrapper--dark-bg">
{% for related_document in related_documents %} <div class="wrapper wrapper--medium">
{% with document=related_document.document %} <h2>You might also like...</h2>
<div class="card"> <section class="grid grid--max-three">
<a href="{{ document.url }}"> {% for related_document in related_documents %}
<h2> {% with document=related_document.document %}
{% if related_document.title %} <div class="card">
{{ related_document.title }} <a href="{{ document.url }}">
({{ document.file_extension }}) <h2>
{% else %} {% if related_document.title %}
{{ document.filename }} {{ related_document.title }}
{% endif %} ({{ document.file_extension }})
</h2> {% else %}
</a> {{ document.filename }}
</div> {% endif %}
{% endwith %} </h2>
{% endfor %} </a>
</div>
{% endwith %}
{% endfor %}
{% for related in related_pages %} {% for related in related_pages %}
{# a related object links to the original page (related.source_page) and a related one (related.page) #} {# a related object links to the original page (related.source_page) and a related one (related.page) #}
{% if related.page.live %} {% if related.page.live %}
{% with specific_related_page=related.page.specific %} {% with specific_related_page=related.page.specific %}
<a class="card" href="{% pageurl specific_related_page %}"> <a class="card" href="{% pageurl specific_related_page %}">
{% if specific_related_page.listing_image %} {% if specific_related_page.listing_image %}
{% image specific_related_page.listing_image fill-450x300 %} {% image specific_related_page.listing_image fill-450x300 %}
{% endif %} {% endif %}
<h2> <h4>
{{ specific_related_page.listing_title|default:specific_related_page.title }} {{ specific_related_page.listing_title|default:specific_related_page.title }}
</h2> </h4>
{% if specific_related_page.listing_summary or specific_related_page.introduction %} {% if specific_related_page.listing_summary or specific_related_page.introduction %}
<p>{{ specific_related_page.listing_summary|default:specific_related_page.introduction }}</p> <p class="card__teaser">{{ specific_related_page.listing_summary|default:specific_related_page.introduction|truncatechars_html:130 }}</p>
{% endif %} {% endif %}
</a> <svg class="icon icon--card-pixels"><use xlink:href="#arrow-head-pixels"></use></svg>
{% endwith %} </a>
{% endif %} {% endwith %}
{% endfor %} {% endif %}
</section> {% endfor %}
</section>
</div>
</div>
{% endif %} {% endif %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment