GenZmeY/casper-i18n
1
0
Fork 0
mirror of https://github.com/GenZmeY/casper-i18n.git synced 2025-07-12 08:46:05 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Multiple authors in Casper (#448)

Browse Source
This commit is contained in:
Peter Zimon
2018-04-10 20:19:29 +02:00
committed by John O'Nolan
parent 8e865b797b
commit 79e113226c
6 changed files with 430 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
post.hbs
View File

@ -46,27 +46,81 @@ into the {body} of the default.hbs template --}}
{{/if}}
<footer class="post-full-footer">
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}}
<section class="author-card">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<section class="author-card-content">
<h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
{{#if bio}}
<p>{{bio}}</p>
{{else}}
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
{{/if}}
{{!-- If there are multiple authors for the post, display all of their avatars in a stack --}}
{{#has author="count:>1"}}
<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>
</section>
<div class="post-full-footer-right">
<a class="author-card-button" href="{{url}}">Read More</a>
</div>
{{/author}}
{{!-- If there is a single author for the post, display her/his information --}}
{{else}}
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}}
<section class="author-card">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span>
{{/if}}
<section class="author-card-content">
<h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
{{#if bio}}
<p>{{bio}}</p>
{{else}}
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
{{/if}}
</section>
</section>
<div class="post-full-footer-right">
<a class="author-card-button" href="{{url}}">Read More</a>
</div>
{{/author}}
{{/has}}
</footer>
{{!--
@ -216,6 +270,57 @@ $(document).ready(function () {
window.addEventListener('resize', onResize, false);
update();
});
// 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}}