97 lines
2.9 KiB
Handlebars
97 lines
2.9 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="{{profile_image}}" alt="{{name}}" />
|
||
|
|
{{else}}
|
||
|
|
<span class="avatar-wrapper">{{> "icons/avatar"}}</span>
|
||
|
|
{{/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"><span class="avatar-wrapper">{{> "icons/avatar"}}</span></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;
|
||
|
|
var direction = 'left';
|
||
|
|
|
||
|
|
$('.author-list-item:first-child').addClass('first-child');
|
||
|
|
|
||
|
|
function makeSpaceForAvatar(avatar) {
|
||
|
|
if (avatar.hasClass('first-child')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.author-list-item').each(function(i, obj) {
|
||
|
|
|
||
|
|
if ($(this)[0] != avatar[0]) {
|
||
|
|
if (Number($(this).css('z-index')) > Number(avatar.css('z-index'))) {
|
||
|
|
$(this).children('.moving-avatar').addClass('left');
|
||
|
|
} else {
|
||
|
|
$(this).children('.moving-avatar').addClass('right');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.author-list-item').hover(function(){
|
||
|
|
var $this = $(this);
|
||
|
|
|
||
|
|
clearTimeout(hoverTimeout);
|
||
|
|
|
||
|
|
$('.author-card').removeClass('hovered');
|
||
|
|
$(this).children('.author-card').addClass('hovered');
|
||
|
|
|
||
|
|
makeSpaceForAvatar($this);
|
||
|
|
}, function() {
|
||
|
|
var $this = $(this);
|
||
|
|
|
||
|
|
$('.author-list-item').children('.moving-avatar').removeClass('left right');
|
||
|
|
|
||
|
|
hoverTimeout = setTimeout(function() {
|
||
|
|
$this.children('.author-card').removeClass('hovered');
|
||
|
|
}, 800);
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{{/contentFor}}
|