Initial commit

[editorial.git] / partials / byline-multiple.hbs

diff --git a/partials/byline-multiple.hbs b/partials/byline-multiple.hbs
new file mode 100644 (file)
index 0000000..e1c9d15
--- /dev/null
+++ b/partials/byline-multiple.hbs
@@ -0,0 +1,72 @@
+<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}}
+                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
+                    {{/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 author-profile-image">{{> "icons/avatar"}}</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;
+
+    $('.author-list-item').hover(function(){
+        var $this = $(this);
+
+        clearTimeout(hoverTimeout);
+
+        $('.author-card').removeClass('hovered');
+        $(this).children('.author-card').addClass('hovered');
+
+    }, function() {
+        var $this = $(this);
+
+        hoverTimeout = setTimeout(function() {
+            $this.children('.author-card').removeClass('hovered');
+        }, 800);
+    });
+
+});
+</script>
+{{/contentFor}}