2017-07-21 22:40:01 +02:00
|
|
|
<script src="/vendors/masonry/masonry.pkgd.min.js"></script>
|
|
|
|
|
2017-07-12 01:55:03 +02:00
|
|
|
<div class="full">
|
|
|
|
<h2>Trending</h2>
|
2017-07-21 22:40:01 +02:00
|
|
|
<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
|
|
|
|
{{#each trendingAssets}}
|
|
|
|
{{#unless this.nsfw}}
|
2017-07-25 09:22:50 +02:00
|
|
|
<a href="/{{this.name}}/{{this.claimId}}">
|
2017-07-20 19:15:20 +02:00
|
|
|
{{#ifConditional this.fileType '===' 'video/mp4'}}
|
2017-07-28 05:04:22 +02:00
|
|
|
<video class="grid-item trending-video" controls onloadeddata="resetLayout()">
|
|
|
|
<source src="/media/{{this.fileName}}" >
|
2017-07-20 19:15:20 +02:00
|
|
|
{{!--fallback--}}
|
|
|
|
Your browser does not support the <code>video</code> element.
|
|
|
|
</video>
|
|
|
|
{{else}}
|
2017-07-28 05:04:22 +02:00
|
|
|
<img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetLayout()"/>
|
2017-07-20 19:15:20 +02:00
|
|
|
{{/ifConditional}}
|
|
|
|
</a>
|
2017-07-21 22:40:01 +02:00
|
|
|
{{/unless}}
|
2017-07-28 05:04:22 +02:00
|
|
|
|
2017-07-20 19:15:20 +02:00
|
|
|
{{/each}}
|
2017-07-21 22:40:01 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2017-07-28 05:04:22 +02:00
|
|
|
|
2017-07-21 22:40:01 +02:00
|
|
|
<script>
|
|
|
|
var elem = document.querySelector('.grid');
|
|
|
|
var msnry = new Masonry( elem, {
|
|
|
|
itemSelector: '.grid-item'
|
|
|
|
});
|
2017-07-28 05:04:22 +02:00
|
|
|
|
|
|
|
function resetLayout() {
|
|
|
|
console.log('resetting layout');
|
|
|
|
msnry.layout();
|
2017-07-21 22:40:01 +02:00
|
|
|
}
|
2017-07-28 05:04:22 +02:00
|
|
|
</script>
|
|
|
|
|