Small refactor of multi-authors

This commit is contained in:
John O'Nolan
2018-04-12 10:05:40 +02:00
parent 98e9c12018
commit 6e3399366d
5 changed files with 65 additions and 142 deletions

View File

@ -14,7 +14,7 @@
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span>
<div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}}
<h2>{{name}}</h2>
</div>
@ -31,7 +31,7 @@
{{#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>
<a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
</li>
@ -50,27 +50,6 @@
$(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);
@ -80,12 +59,9 @@ $(document).ready(function () {
$('.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);

View File

@ -27,9 +27,9 @@
</div>
{{#if profile_image}}
<span class="profile-image-wrapper"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></span>
<a href="{{url}}" class="static-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
{{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span>
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}}
</li>
{{/foreach}}