Browse Source

Split out different byline templates into separate files

master
John O'Nolan 2 years ago
parent
commit
98e9c12018
3 changed files with 127 additions and 138 deletions
  1. +96
    -0
      partials/byline-multiple.hbs
  2. +23
    -0
      partials/byline-single.hbs
  3. +8
    -138
      post.hbs

+ 96
- 0
partials/byline-multiple.hbs View 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
- 0
partials/byline-single.hbs View 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}}

+ 8
- 138
post.hbs View File

@@ -47,102 +47,22 @@ into the {body} of the default.hbs template --}}

<footer class="post-full-footer">

{{!-- 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>
{{!-- 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. --}}

</section>

{{!-- If there is a single author for the post, display her/his information --}}
{{#has author="count:>1"}}
{{> "byline-multiple"}}
{{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}}
{{> "byline-single"}}
{{/has}}

</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">
<div id="disqus_thread"></div>
<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>
If you want to embed comments, this is a good place to do it!
</section>
--}}

@@ -272,55 +192,5 @@ $(document).ready(function () {
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}}

Loading…
Cancel
Save