me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ensure cover images show in article carousel

Browse Source
This commit is contained in:
Matthew Grove
2019-03-06 18:23:13 +00:00
parent 55ac39b145
commit d903886346
9 changed files with 178 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
_includes/article-carousel.html
View File

@@ -24,26 +24,28 @@
{% assign article_list_displayed = true %} {% assign article_list_displayed = true %}
{% endif %} {% endif %}
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<h2 class="mdc-typography--headline6">{{ article.title }}</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time> <h3 class="mdc-typography--subtitle2">
| by {{ article.authors }} <time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
</h3> | by {{ article.authors }}
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} { .{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg"); background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
} }
</style> </style>
</div>
</div> </div>
{% assign break = true %} {% assign break = true %}
{% break %} {% break %}

38
_site/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html
View File

@@ -461,26 +461,28 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-what-is-in-the-patients-best-interest-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-what-is-in-the-patients-best-interest-html"></div>
<h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest’?</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest’?</h2>
<time class="timeago" datetime="2019-03-06T11:46:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Aadith C <time class="timeago" datetime="2019-03-06T11:46:00">Wednesday 6 March 2019</time>
</h3> | by Aadith C
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/what-is-in-the-patients-best-interest.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/what-is-in-the-patients-best-interest.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-what-is-in-the-patients-best-interest-html { .-articles-2019-03-06-what-is-in-the-patients-best-interest-html {
background-image: url("/images/2019-03-06-what-is-in-the-patients-best-interest--cover.jpg"); background-image: url("/images/2019-03-06-what-is-in-the-patients-best-interest--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

38
_site/articles/2019/03/06/finished-product.html
View File

@@ -452,26 +452,28 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-young-reporter-team-ready-to-go-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-young-reporter-team-ready-to-go-html"></div>
<h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2>
<time class="timeago" datetime="2019-03-06T09:36:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Mr Baldock <time class="timeago" datetime="2019-03-06T09:36:00">Wednesday 6 March 2019</time>
</h3> | by Mr Baldock
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/young-reporter-team-ready-to-go.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/young-reporter-team-ready-to-go.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-young-reporter-team-ready-to-go-html { .-articles-2019-03-06-young-reporter-team-ready-to-go-html {
background-image: url("/images/2019-03-06-young-reporter-team-ready-to-go--cover.jpg"); background-image: url("/images/2019-03-06-young-reporter-team-ready-to-go--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

38
_site/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html
View File

@@ -465,26 +465,28 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-whats-next-for-reading-prison-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-whats-next-for-reading-prison-html"></div>
<h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2>
<time class="timeago" datetime="2019-03-06T10:38:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Tom S-R, Ben S-R <time class="timeago" datetime="2019-03-06T10:38:00">Wednesday 6 March 2019</time>
</h3> | by Tom S-R, Ben S-R
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/whats-next-for-reading-prison.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/whats-next-for-reading-prison.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-whats-next-for-reading-prison-html { .-articles-2019-03-06-whats-next-for-reading-prison-html {
background-image: url("/images/2019-03-06-whats-next-for-reading-prison--cover.jpg"); background-image: url("/images/2019-03-06-whats-next-for-reading-prison--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

38
_site/articles/2019/03/06/what-is-in-the-patients-best-interest.html
View File

@@ -373,26 +373,28 @@ It is standard protocol in the NHS that doctors must consult with the patient an
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html"></div>
<h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2>
<time class="timeago" datetime="2019-03-06T14:14:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Aadith C, Adit S, Adi V <time class="timeago" datetime="2019-03-06T14:14:00">Wednesday 6 March 2019</time>
</h3> | by Aadith C, Adit S, Adi V
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html { .-articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html {
background-image: url("/images/2019-03-06-book-week-real-life-issues-inspire-sarah-govett--cover.jpg"); background-image: url("/images/2019-03-06-book-week-real-life-issues-inspire-sarah-govett--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

38
_site/articles/2019/03/06/whats-next-for-reading-prison.html
View File

@@ -349,26 +349,28 @@ Under the plan, the main theatre would operate on a commercial basis with the re
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></div>
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
<time class="timeago" datetime="2019-03-06T14:38:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Tom S-R, Ben S-R <time class="timeago" datetime="2019-03-06T14:38:00">Wednesday 6 March 2019</time>
</h3> | by Tom S-R, Ben S-R
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html { .-articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html {
background-image: url("/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever--cover.jpg"); background-image: url("/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

38
_site/articles/2019/03/06/young-reporter-team-ready-to-go.html
View File

@@ -254,26 +254,28 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></div> <div class="mdc-card">
<div class="mdc-card-content"> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></div>
<h2 class="mdc-typography--headline6">The Finished Product</h2> <div class="mdc-card-content">
<h3 class="mdc-typography--subtitle2"> <h2 class="mdc-typography--headline6">The Finished Product</h2>
<time class="timeago" datetime="2019-03-06T15:52:00">Wednesday 6 March 2019</time> <h3 class="mdc-typography--subtitle2">
| by Mr Baldock <time class="timeago" datetime="2019-03-06T15:52:00">Wednesday 6 March 2019</time>
</h3> | by Mr Baldock
</div> </h3>
<div class="mdc-card__actions"> </div>
<div class="mdc-card__action-buttons"> <div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/finished-product.html';">Read</button> <div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/03/06/finished-product.html';">Read</button>
</div>
</div> </div>
</div>
<style> <style>
.-articles-2019-03-06-finished-product-html { .-articles-2019-03-06-finished-product-html {
background-image: url("/images/2019-03-06-finished-product--cover.jpg"); background-image: url("/images/2019-03-06-finished-product--cover.jpg");
} }
</style> </style>
</div>
</div> </div>

34
_site/css/article-page.css
View File

@@ -15,27 +15,31 @@
/* adjust video dimensions depending on screen size */ /* adjust video dimensions depending on screen size */
iframe { iframe {
width: 100%; width: 100%;
height: calc(68.8vw / 16 * 9); height: calc(68.8vw / 16 * 9);
} }
@media screen and (max-width: 1550px) { @media screen and (max-width: 1550px) {
iframe { iframe {
width: 100%; width: 100%;
height: calc(70vw / 16 * 9 - 6px); height: calc(70vw / 16 * 9 - 6px);
} }
}
@media screen and (max-width: 800px) {
iframe {
height: calc(90vw / 16 * 9 - 5px);
}
.mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 1.5rem;
line-height: 1.625rem;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(93.5vw / 16 * 9);
} }
}
@media screen and (max-width: 600px) {
iframe {
height: calc(93.5vw / 16 * 9);
}
} }

34
css/article-page.css
View File

@@ -15,27 +15,31 @@
/* adjust video dimensions depending on screen size */ /* adjust video dimensions depending on screen size */
iframe { iframe {
width: 100%; width: 100%;
height: calc(68.8vw / 16 * 9); height: calc(68.8vw / 16 * 9);
} }
@media screen and (max-width: 1550px) { @media screen and (max-width: 1550px) {
iframe { iframe {
width: 100%; width: 100%;
height: calc(70vw / 16 * 9 - 6px); height: calc(70vw / 16 * 9 - 6px);
} }
}
@media screen and (max-width: 800px) {
iframe {
height: calc(90vw / 16 * 9 - 5px);
}
.mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 1.5rem;
line-height: 1.625rem;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(93.5vw / 16 * 9);
} }
}
@media screen and (max-width: 600px) {
iframe {
height: calc(93.5vw / 16 * 9);
}
} }