Split out different byline templates into separate files
This commit is contained in:
John O'Nolan
parent
986a954f33
commit
98e9c12018
3 changed files with 127 additions and 138 deletions
96
partials/byline-multiple.hbs
Normal file
96
partials/byline-multiple.hbs
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
<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}}
|
||||||
23
partials/byline-single.hbs
Normal file
23
partials/byline-single.hbs
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{{!-- 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}}
|
||||||
146
post.hbs
146
post.hbs
|
|
@ -47,102 +47,22 @@ into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
<footer class="post-full-footer">
|
<footer class="post-full-footer">
|
||||||
|
|
||||||
{{!-- If there are multiple authors for the post, display all of their avatars in a stack --}}
|
{{!-- There are two options for how we display the byline/author-info.
|
||||||
|
If the post has more than one author, we load a specific template
|
||||||
|
from includes/byline-multiple.hbs, otherwise, we just use the
|
||||||
|
default byline. --}}
|
||||||
|
|
||||||
{{#has author="count:>1"}}
|
{{#has author="count:>1"}}
|
||||||
|
{{> "byline-multiple"}}
|
||||||
<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>
|
|
||||||
|
|
||||||
{{!-- If there is a single author for the post, display her/his information --}}
|
|
||||||
{{else}}
|
{{else}}
|
||||||
|
{{> "byline-single"}}
|
||||||
{{!-- 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}}
|
{{/has}}
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
{{!--
|
{{!--
|
||||||
|
|
||||||
If you use Disqus comments, just uncomment this block.
|
|
||||||
The only thing you need to change is "test-apkdzgmqhj" - which
|
|
||||||
should be replaced with your own Disqus site-id.
|
|
||||||
|
|
||||||
<section class="post-full-comments">
|
<section class="post-full-comments">
|
||||||
<div id="disqus_thread"></div>
|
If you want to embed comments, this is a good place to do it!
|
||||||
<script>
|
|
||||||
var disqus_config = function () {
|
|
||||||
this.page.url = '{{url absolute="true"}}';
|
|
||||||
this.page.identifier = 'ghost-{{comment_id}}';
|
|
||||||
};
|
|
||||||
(function() {
|
|
||||||
var d = document, s = d.createElement('script');
|
|
||||||
s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
|
|
||||||
s.setAttribute('data-timestamp', +new Date());
|
|
||||||
(d.head || d.body).appendChild(s);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</section>
|
</section>
|
||||||
--}}
|
--}}
|
||||||
|
|
||||||
|
|
@ -271,56 +191,6 @@ $(document).ready(function () {
|
||||||
|
|
||||||
update();
|
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>
|
</script>
|
||||||
{{/contentFor}}
|
{{/contentFor}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue