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
No related tags found
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 @@
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 @@
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 %}
{% 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 %}
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