hummingbird-me/hummingbird

View on GitHub
frontend/app/templates/anime/index.hbs

Summary

Maintainability
Test Coverage
{{!--
{{#if showEpisodes}}
<div class="episode-bar">
  <div class="container">
    <h2 class="grey-title">
      {{#link-to 'episodes'}}
        Episodes
        <i class="fa fa-angle-right"></i>
      {{/link-to}}
    </h2>
    <div class="language-dropdown dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Subbed
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dubbed</a></li>
      </ul>
    </div>
      <ul class="episode-thumbs block-grid-5">
        {{#each episodesPreview}}
          <li class="block-grid-item">
            <div class="thumbnail">
              {{#link-to 'episodes.show' this}}
                <img {{bind-attr src=thumbnail}}>
                <div class="description">
                  <div class="title">Episode {{number}}</div>
                </div>
                <div class="play-icon">
                  <i class="fa fa-play"></i>
                </div>
              {{/link-to}}
            </div>
          </li>
        {{/each}}
      </ul>
  </div>
</div>
{{/if}}
<div class="container">
  <div class="series-reviews">
    <h2 class="grey-title">
      {{#link-to 'reviews.index'}}
        {{#if recentlyStartedAiring}}
          First Impressions
        {{else}}
          Reviews
        {{/if}}
        <i class="fa fa-angle-right"></i>
      {{/link-to}}
    </h1>
    <div class="review-listing">
      {{partial "anime/trending_reviews"}}
    </div>
  </div>
  <div class="series-gallery">
    <h2 class="grey-title">
      Screencaps
    </h1>
    <div class="gallery">
      <ul class="block-grid-2">
        {{#each imageURL in screencaps}}
          <li class="block-grid-item"><img {{bind-attr src=imageURL}}></li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>
--}}

<div class="container">
  {{#if showReviewNag}}
    <!-- Review Nag -->
    <div class="review-nag">
      <span class="nag-text">
        <span class="extended-nag">Wow, you've already finished this anime!</span> Have you considered writing a review?</span> <a {{bind-attr href=newReviewURL}}>Write One</a>
    </div>
  {{/if}}
  <!-- Left side start -->
  <div class="series-column">
    <div class="series-panel">

      <div class="poster-container">
        <div class="poster-actions">
          <img class="series-poster" {{bind-attr src=model.posterImage}}>
          <a data-tooltip="Watch Trailer"{{bind-attr class=":trailer-link model.hasTrailer::hide"}} {{action "openModal" "youtube" this}}>
            <i {{bind-attr class=":fa :fa-youtube-play"}}></i>
          </a>
          {{#if libraryEntryExists}}
            {{#if model.libraryEntry.isFavorite}}
              <a data-tooltip="You favorited this!" {{bind-attr class=":favorite-link"}} {{action "toggleFavorite"}}>
                <i {{bind-attr class=":fa :fa-heart"}}></i>
              </a>
            {{else}}
              <a data-tooltip="Favorite this?"{{bind-attr class=":favorite-link"}} {{action "toggleFavorite"}}>
                <i {{bind-attr class=":fa :fa-heart-o"}}></i>
              </a>
            {{/if}}
          {{/if}}
        </div>
      </div>

      <div class="series-info">

        <h3 class="series-title">
          {{model.canonicalTitle}}
          {{#if model.alternateTitle}}
            <small class="alternate-title">
              {{model.alternateTitle}}
            </small>
          {{/if}}
        </h3>

        <div class="series-infobar">{{partial "anime/infobar"}}</div>

        <div class="synopsis">
          <p>{{{truncate-text text=model.synopsis length=200 breakLines=true}}}</p>
        </div>

        <div class="genres">
          <h5 class="small-label">Genres:</h5>
          <ul class="inline-list">
            {{#each model.genres as |genre|}}
              <li>{{genre}}</li>
            {{/each}}
          </ul>
        </div>

        <div class="studios">
          <h5 class="small-label">Studios:</h5>
          <ul class="inline-list">
            {{#each model.producers as |producer|}}
              <li>{{producer.name}}</li>
            {{/each}}
          </ul>
        </div>

        {{#if currentUser.isSignedIn}}
          <div {{bind-attr class=":user-actions libraryEntryExists::no-entry"}}>
            <div class="btn-group">

              <button {{bind-attr class=":library-button :library-entry :dropdown-toggle"}} type="button" data-toggle="dropdown">
                {{#if libraryEntryExists}}
                  {{model.libraryEntry.status}}&nbsp;&nbsp;<i {{bind-attr class=":fa :fa-caret-down"}}></i>
                {{else}}
                  Add to Library&nbsp;&nbsp;<i {{bind-attr class=":fa :fa-caret-down"}}></i>
                {{/if}}
              </button>

              <ul class="dropdown-menu">
                <li><a {{action "setLibraryStatus" "Currently Watching"}}>Currently Watching</a></li>
                <li><a {{action "setLibraryStatus" "Plan to Watch"}}>Plan to Watch</a></li>
                <li><a {{action "setLibraryStatus" "Completed"}}>Completed</a></li>
                <li><a {{action "setLibraryStatus" "On Hold"}}>On Hold</a></li>
                <li><a {{action "setLibraryStatus" "Dropped"}}>Dropped</a></li>
                <li><a {{action "removeFromLibrary"}}>Remove from Library</a></li>
              </ul>
            </div>
            {{#if libraryEntryExists}}
              <div class="personal-rating active">
                {{awesome-rating type=currentUser.ratingType editable="true" action="setLibraryRating" rating=model.libraryEntry.rating}}
              </div>
            {{/if}}
          </div>
        {{/if}}
      </div>
    </div>
    <!-- End series panel -->

    <div class="series-panel">
      <div class="panel-title has-button">
        <h4>Cast</h4>
        <div class="cast-language">
          <div class="btn-group">
            <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              {{language}}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              {{#each model.languages as |language|}}
                <li role="presentation">
                  <a role="menuitem" {{action "setLanguage" language}}>
                    {{language}}
                  </a>
                </li>
              {{/each}}
            </ul>
          </div>
        </div>
      </div>
      <div class="series-cast">
        <ul class="cast">
          {{partial "anime/cast"}}
        </ul>

        <div class="view-more">
          {{#if showFullCast}}
            {{#if fullCast}}
              <a {{action "showLessCast"}}>View Less Cast</a>
            {{else}}
              <i class="fa fa-spinner fa-spin"></i> Loading...
            {{/if}}
          {{else}}
            <a {{action "showMoreCast"}}>View More Cast</a>
          {{/if}}
        </div>
      </div>
    </div>
    <!-- End cast -->

    <div class="series-panel">
      <div class="panel-title has-button">
        <h4>Quotes</h4>
      </div>

      {{partial "anime/featured_quotes"}}

      <div class="view-more">
        {{#link-to 'anime.quotes'}}View More Quotes{{/link-to}}
      </div>
    </div>

    <div class="series-panel">
      <div class="panel-title">
        <h4>Franchise</h4>
      </div>
      {{partial "anime/franchise"}}
    </div>
  </div>
  <!-- Left side End -->

  <!-- Right Side Start -->
  {{#unless notYetAired}}
    <div class="community-column">
      {{#if roundedBayesianRating}}
        <div class="hb-score">
          <h3>Hummingbird Score: <span class="highlight">{{roundedBayesianRating}}</span></h3>
        </div>
      {{/if}}
      <div class="histogram">
        {{community-rating model.communityRatings}}
        <div class="rating-legend">
          <span class="lowest-rating">
            <i class="fa fa-star-half-o"></i>
            <i class="fa fa-long-arrow-right"></i>
          </span>
          <span class="highest-rating">
            <i class="fa fa-long-arrow-left"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </span>
        </div>
      </div>
      <div class="reviews">
        <h4>Reviews:</h4>
        {{#if model.trendingReviews}}
          <div class="review-links">
            <a {{bind-attr href=fullReviewsURL}}>View All</a> ยท <a {{bind-attr href=newReviewURL}}>Write One</a>
          </div>
        {{/if}}
        {{partial "anime/trending_reviews"}}
      </div>
    </div>
  {{/unless}}
</div>