partials/byline-multiple.hbs

   1 <section class="post-full-authors">
   2
   3     <div class="post-full-authors-content">
   4         <p>This post was a collaboration between</p>
   5         <p>{{authors}}</p>
   6     </div>
   7
   8     <ul class="author-list">
   9     {{#foreach authors}}
  10         <li class="author-list-item">
  11
  12             <div class="author-card">
  13                 <div class="basic-info">
  14                     {{#if profile_image}}
  15                         <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  16                     {{else}}
  17                         <div class="author-profile-image">{{> "icons/avatar"}}</div>
  18                     {{/if}}
  19                     <h2>{{name}}</h2>
  20                 </div>
  21                 <div class="bio">
  22                     {{#if bio}}
  23                         <p>{{bio}}</p>
  24                         <p><a href="{{url}}">More posts</a> by {{name}}.</p>
  25                     {{else}}
  26                         <p>Read <a href="{{url}}">more posts</a> by this author.</p>
  27                     {{/if}}
  28                 </div>
  29             </div>
  30
  31             {{#if profile_image}}
  32                 <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
  33             {{else}}
  34                 <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
  35             {{/if}}
  36
  37         </li>
  38     {{/foreach}}
  39
  40     </ul>
  41
  42 </section>
  43
  44 {{#contentFor "scripts"}}
  45 <script>
  46 // Adds delay to author card dropups to disappear. This gives enough
  47 // time for the user to interact with the author card while they move
  48 // the mouse from the avatar to the card. Also makes space for the
  49 // interacted avatar.
  50 $(document).ready(function () {
  51
  52     var hoverTimeout;
  53
  54     $('.author-list-item').hover(function(){
  55         var $this = $(this);
  56
  57         clearTimeout(hoverTimeout);
  58
  59         $('.author-card').removeClass('hovered');
  60         $(this).children('.author-card').addClass('hovered');
  61
  62     }, function() {
  63         var $this = $(this);
  64
  65         hoverTimeout = setTimeout(function() {
  66             $this.children('.author-card').removeClass('hovered');
  67         }, 800);
  68     });
  69
  70 });
  71 </script>
  72 {{/contentFor}}