75 lines
2.2 KiB
Handlebars
75 lines
2.2 KiB
Handlebars
<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="{{img_url profile_image size="xs"}}" 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="{{img_url profile_image size="xs"}}" 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}}
|