weflock/partials/byline-multiple.hbs

<section class="post-full-authors">

    <div class="post-full-authors-content">
        <p>This post was a collaboration between</p>
        <p>{{authors}}</p>
    </div>

    <ul class="author-list">
    {{#foreach authors}}
        <li class="author-list-item">

            <div class="author-card">
                <div class="basic-info">
                    {{#if profile_image}}
                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
                    {{else}}
                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
                    {{/if}}
                    <h2>{{name}}</h2>
                </div>
                <div class="bio">
                    {{#if bio}}
                        <p>{{bio}}</p>
                        <p><a href="{{url}}">More posts</a> by {{name}}.</p>
                    {{else}}
                        <p>Read <a href="{{url}}">more posts</a> by this author.</p>
                    {{/if}}
                </div>
            </div>

            {{#if profile_image}}
                <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
            {{else}}
                <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
            {{/if}}

        </li>
    {{/foreach}}

    </ul>

</section>

{{#contentFor "scripts"}}
<script>
// Adds delay to author card dropups to disappear. This gives enough
// time for the user to interact with the author card while they move
// the mouse from the avatar to the card. Also makes space for the
// interacted avatar.
$(document).ready(function () {

    var hoverTimeout;

    $('.author-list-item').hover(function(){
        var $this = $(this);

        clearTimeout(hoverTimeout);

        $('.author-card').removeClass('hovered');
        $(this).children('.author-card').addClass('hovered');

    }, function() {
        var $this = $(this);

        hoverTimeout = setTimeout(function() {
            $this.children('.author-card').removeClass('hovered');
        }, 800);
    });

});
</script>
{{/contentFor}}