spee.ch/views/channel.handlebars

{{> navBar}}
<div class="row row--padded">
    <div class="row">
        {{#ifConditional this.totalPages '===' 0}}
            <p>There is no content in {{this.channelName}}:{{this.longChannelClaimId}} yet.  Upload some!</p>
        {{/ifConditional}}
        {{#ifConditional this.totalPages '>=' 1}}
            <p>Below are the contents for {{this.channelName}}:{{this.longChannelClaimId}}</p>
            <div class="grid">
                {{#each this.claims}}
                    {{> gridItem}}
                {{/each}}
            </div>
        {{/ifConditional}}
        {{#ifConditional this.totalPages '>' 1}}
        <div class="row">
            <div class="column column--3 align-content--left">
                <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelClaimId}}?p=1">First [1]</a>
            </div><div class="column column--4 align-content-center">
                {{#if this.previousPage}}
                    <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelClaimId}}?p={{this.previousPage}}">Previous</a>
                {{else}}
                    <a disabled>Previous</a>
                {{/if}}
                |
                {{#if this.nextPage}}
                    <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelClaimId}}?p={{this.nextPage}}">Next</a>
                {{else}}
                    <a disabled>Next</a>
                {{/if}}
            </div><div class="column column--3 align-content-right">
                <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelClaimId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
            </div>
        </div>
        {{/ifConditional}}
    </div>
</div>

<script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script>
<script src="/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
    // init masonry with element
    var grid = document.querySelector('.grid');
    var msnry;

    imagesLoaded( grid, function() {
        msnry = new Masonry( grid, {
            itemSelector: '.grid-item',
            columnWidth: 3,
            percentPosition: true
        });
    });


</script>