meanTorrent/modules/core/client/views/home.client.view.html

<section ng-controller="HomeController as vm" ng-init="vm.initInfo();vm.getTopInfo();">
    <div class="backdrop">
        <div class="filter">
            <div class="container">
                <div ng-show="!vm.info_is_ready" class="text-center loading">
                    <h3 translate="LOADING_TOP" class="text-capitalize"></h3>
                </div>
                <div class="topone" ng-show="vm.info_is_ready">
                    <div class="col-md-4">
                        <img ng-src="{{vm.tmdbConfig.poster_img_base_url}}{{vm.movieinfo.poster_path}}" class="img-thumbnail center-block"
                             onload="this.style.opacity='1';">

                        <div class="down-torrent">
                            <button class="btn btn-success btn-block" translate="DOWNLOAD_TORRENT"></button>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <dl class="dl-horizontal">
                            <dt class="h-line">{{ 'TMDB_FIELDS.ORIGINAL_TITLE' | translate}}：</dt>
                            <dd class="h-line">{{vm.movieinfo.original_title}}</dd>

                            <dt class="h-line">{{ 'TMDB_FIELDS.TITLE' | translate}}：</dt>
                            <dd class="h-line">{{vm.movieinfo.title}}</dd>

                            <dt class="h-line">{{ 'TMDB_FIELDS.ORIGINAL_LANGUAGE' | translate}}：</dt>
                            <dd class="h-line">{{vm.movieinfo.original_language}}</dd>

                            <dt class="h-line">{{ 'TMDB_FIELDS.GENRES' | translate}}：</dt>
                            <dd class="h-line list-all-genres">
                                <span class="genres-item" ng-repeat="item in vm.movieinfo.genres">{{item.name}}</span>
                            </dd>

                            <dt class="h-line">{{ 'TMDB_FIELDS.PRODUCTION_COUNTRIES' | translate}}：</dt>
                            <dd class="h-line list-all-countries">
                                    <span class="country-item" ng-repeat="item in vm.movieinfo.production_countries">{{item.iso_3166_1}}</span>
                            </dd>

                            <!--<dt class="h-line">{{ 'TMDB_FIELDS.RELEASE_DATE' | translate}}：</dt>-->
                            <!--<dd class="h-line">{{vm.movieinfo.release_date}}</dd>-->

                            <!--<dt class="h-line">{{ 'TMDB_FIELDS.RUNTIME' | translate}}：</dt>-->
                            <!--<dd class="h-line">{{vm.movieinfo.runtime}}</dd>-->

                            <!--<dt class="h-line">{{ 'TMDB_FIELDS.BUDGET' | translate}}：</dt>-->
                            <!--<dd class="h-line">${{vm.movieinfo.budget}}</dd>-->

                            <!--<dt class="h-line">{{ 'TMDB_FIELDS.REVENUE' | translate}}：</dt>-->
                            <!--<dd class="h-line">${{vm.movieinfo.revenue}}</dd>-->

                            <dt class="h-line">{{ 'TMDB_FIELDS.VOTE_AVERAGE' | translate}}：</dt>
                            <dd class="h-line"><span
                                    class="torrent-votes"><kbd>IMDB</kbd></span> {{vm.movieinfo.vote_average}} / {{vm.movieinfo.vote_count}} {{ 'TMDB_FIELDS.VOTE_UNIT' | translate}}
                            </dd>

                            <dt class="h-line">{{ 'TMDB_FIELDS.OVERVIEW' | translate}}：</dt>
                            <dd class="h-line">{{vm.movieinfo.overview}}</dd>
                        </dl>
                        <legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.CAST"></legend>
                        <div class="row cast-list">
                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[0].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[0].name}}</strong></span>

                            </div>
                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[1].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[1].name}}</strong></span>

                            </div>
                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[2].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[2].name}}</strong></span>

                            </div>

                            <div class="clearfix visible-xs-block visible-sm-block"></div>

                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[3].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[3].name}}</strong></span>

                            </div>
                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[4].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[4].name}}</strong></span>

                            </div>
                            <div class="col-xs-4 col-md-2 text-center">
                                <img ng-src="{{vm.tmdbConfig.cast_img_base_url}}{{vm.movieinfo.credits.cast[5].profile_path}}"
                                     on-error-src="/./modules/core/client/img/default_face.jpg"
                                     class="img-circle img-thumbnail img-responsive center-block" onload="this.style.opacity='1';">
                                <span class="cast-xs-info"><strong>{{vm.movieinfo.credits.cast[5].name}}</strong></span>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <!--<legend class="xsmall-legend strong-legend text-uppercase" translate="MENU_TORRENTS_SUB.SUB_MOVIE"></legend>-->
            <div class="col-xs-4 col-sm-2">

            </div>
            <div class="col-xs-8 col-sm-10">
                <div class="row">
                    <div ng-repeat="item in vm.movieTopList">
                        <div data-ng-if="$index != 0 && $index % 2 == 0" class="clearfix visible-sm-block"></div>
                        <div data-ng-if="$index != 0 && $index % 4 == 0" class="clearfix visible-md-block visible-lg-block"></div>
                        <div class="col-sm-6 col-md-3">
                            <div class="thumbnail torrent-post-info" ng-click="vm.openTorrentInfo(item._id);">
                                <img ng-src="{{vm.tmdbConfig.poster_img_base_url}}{{item.torrent_img}}" alt="{{item.torrent_title}}"
                                     class="img-responsive">

                                <div class="torrent-user-info">
                                    <ul class="list-unstyled list-inline">
                                        <li title="{{ 'TITLE_ALT.SEEDS' | translate}}"><span
                                                class="glyphicon glyphicon-arrow-up torrent-up"></span><span>{{item.torrent_seeds}}</span></li>
                                        <li title="{{ 'TITLE_ALT.LEECHERS' | translate}}"><span
                                                class="glyphicon glyphicon-arrow-down torrent-down"></span><span>{{item.torrent_leechers}}</span></li>
                                        <li title="{{ 'TITLE_ALT.FINISHED' | translate}}" class="pull-right"><span
                                                class="glyphicon glyphicon-ok torrent-finished"></span><span>{{item.torrent_finished}}</span></li>
                                    </ul>
                                </div>

                                <div class="caption">
                                    <ul class="list-unstyled">
                                        <li style="white-space: nowrap; overflow:hidden; text-overflow: ellipsis;">
                                            <strong>{{item.torrent_title}}</strong>
                                        <li><span class="release-date">{{item.torrent_release}}</span>
                                            <span title="{{ 'TITLE_ALT.IMDB_VOTES' | translate}}"
                                                  class="pull-right torrent-votes"><kbd>IMDB</kbd> {{item.torrent_imdb_votes}}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>