unserver-unify/src/app/course/categorylist.html

<div ng-controller="CoursesCateCtrl as ctrl">
  <div class="category_filter" ng-class="{'t6_category' : loginService.school.theme=='t6'}">
    <div class="container relative">
      <ul class="relative">
        <li ng-repeat="(key, value) in ctrl.topCate" ng-if="$index < 8" ng-click="ctrl.headerCateSearch(key)">
          <a href="javascript:void(0);">{{ key }}</a>
        </li> 
      </ul>
        <!-- <li ng-repeat="key in ctrl.topCate | limitTo:8">
          <a href="">{{ key }}</a>
        </li>  -->     
        <div class="category_list_more">
          <a href=""><i class="fa fa-ellipsis-v"></i></a>
          <ul>
            <li ng-repeat="(key, value) in ctrl.topCate" ng-click="ctrl.headerCateSearch(key)" class="transition">
              <a href="">{{ key }}</a>
            </li>
          </ul>
        </div>
    </div>
  </div>
  <div class="container">
    <ul class="category_breadcrumb">
      <li>
        <a ng-if="(ctrl.breadKrumKey.length!=0||ctrl.items.length!=0)" style="cursor: pointer;" ng-click="ctrl.allCategory()">All</a>
        <span ng-if="ctrl.breadKrumKey.length==0&&ctrl.items.length==0">All</span>
      </li>
      <li style="cursor: pointer;" ng-repeat="key in ctrl.breadKrumKey" ng-click="ctrl.breadSearch($index)">
        <a ng-if="($index!=(ctrl.breadKrumKey.length-1)||ctrl.items.length!=0)">{{ key }}</a>
        <span ng-if="($index==(ctrl.breadKrumKey.length-1)&&ctrl.items.length==0)">{{ key }}</span>
      </li>
      <li ng-if="ctrl.items.length!=0">        
        <span>Courses</span>
      </li>
    </ul>
    <div class="tab-content">
      <div class="row category_courselist category_list">
          <div class="col-lg-12">
            <div class="col-md-3 col-sm-4 col-xs-6 padding-left-0 padding-right-8" ng-repeat="cat in catitems" ng-click="ctrl.searchCategory(cat.key)">
              <div class="home_category" style="background: url('{{ ctrl.cateInfos[cat.fullkey].photo? ctrl.catePhotoUrl+ctrl.cateInfos[cat.fullkey].photo : ctrl.defaultpic }}') no-repeat center center; background-size: cover;">
                <div class="category_content">
                  <h4>{{ cat.key }}</h4>
                  <div class="cat_info">
                    <p><b>{{'Category' | translate}}: </b> {{ cat.items.length || 0 }}</p>
                    <p><b>{{'Course' | translate}}: </b> {{ cat.counter || 0 }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6 padding-left-0 padding-right-8" ng-if="catitems.length!=0&&ctrl.showCoursesFolder" ng-click="ctrl.showCourses();">
              <div class="home_category" style="background: url('{{ ctrl.defaultpic }}') no-repeat center center; background-size: cover;">
                <div class="category_content">
                  <h4 translate="" ng-if="ctrl.breadKrumKey.length==0">All Courses</h4>
                  <h4 translate="" ng-if="ctrl.breadKrumKey.length!=0">Courses</h4>
                </div>
              </div>
            </div>
          </div>
      </div>
      <div class="clearfix"></div>
    <div class="col-md-12 no_record" translate="" ng-if="catitems.length==0&&setting.totalCount==0">
      No Record
    </div>
    <div class="row" ng-if="catitems.length==0&&ctrl.breadKrumKey.length==0">
      <div class="input-group col-lg-3 col-md-3 col-sm-3 pull-right">
        <input class="form-control" ng-model="ctrl.q" placeholder="{{ 'search course' | translate }}" type="text"/>
        <span class="input-group-btn">
          <button class="btn btn-primary srch_btn" ng-click="ctrl.searchCourseByName(ctrl.q)" type="button">
            <i class="fa fa-search">
            </i>
          </button>
        </span>
      </div>
    </div>
    <div class="clearfix">
    </div>
    <div ng-if="catitems.length==0" class="row">      
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" current-page="setting.currentPage" dir-paginate="item in setting.items | itemsPerPage: setting.pageSize" pagination-id="setting.listName" total-items="setting.totalCount">
        <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden relative">
          <span class="new_course" ng-if="item.newflag" translate="">
            New Course
          </span>
          <div class="thumbnail-img">
            <div ng-if="item.completed == true" class="completed_status transition" translate="">Completed</div>
            <div class="overflow-hidden text-center">
              <a ui-sref="{{item.courseurl}}({ cid: item._id ,cs:getCheckSum(item._id)})">
                <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.coursePhotoUrl+item._id +'/'+ item.photo : (item.mvpic? ctrl.subjectPicUrl+ item.mvpic : ctrl.defaultpic)}}" style="height:135px;" title="{{ item.name }}"/>
              </a>
              <span class="badge badge-warning list_micro" ng-if="item.singlesection">
                {{'Micro'|translate}}
              </span>
              <a class="btn-more hover-effect" ui-sref="{{item.courseurl}}({ cid: item._id ,cs:getCheckSum(item._id) })">
                <span class="btn-more prvt_btn" ng-if="item.privacy=='private'" translate="">
                  Private ...
                </span>
                <span class="btn-more prvt_btn" ng-if="item.privacy=='member'">
                  {{ {eng:'Member ...', chn:'会员课程...'}|trans }}
                </span>
                <!-- <span class="btn-more" ng-if="item.privacy=='public'">
                  {{'More'|translate}} +
                </span> -->
              </a>
            </div>
          </div>
          <div class="list_rating">
            <span class="average dummy_avg" ng-if="!item.rating">
              <div class="average-rating-container">
                <ul class="rating background">
                  <li class="star">
                    <i class="fa fa-star">
                    </i>
                  </li>
                  <li class="star">
                    <i class="fa fa-star">
                    </i>
                  </li>
                  <li class="star">
                    <i class="fa fa-star">
                    </i>
                  </li>
                  <li class="star">
                    <i class="fa fa-star">
                    </i>
                  </li>
                  <li class="star">
                    <i class="fa fa-star">
                    </i>
                  </li>
                </ul>
              </div>
            </span>
            <span class="average" ng-if="item.rating">
              <average-star-rating max="5" rating-value="item.rating">
              </average-star-rating>
              <span ng-if="item.rating">
                {{item.rating|number :2}}/5
              </span>
            </span>
            <span class="list_reviews">
              ({{item.ratingcounter||0}} {{'reviews'|translate}})
            </span>
          </div>
          <div class="clearfix">
          </div>
          <div class="caption overflow-hidden clst">
            <h3>
              <a class="hover-effect" ui-sref="{{item.courseurl}}({ cid: item._id,cs:getCheckSum(item._id)  })">
                {{ item.name }}
              </a>
            </h3>
            <p class="product_price" ng-if="item.price">
              {{ctrl.currency}} {{ item.price | number : 2 }}
            </p>
            <p class="product_price" ng-if="!item.price && currentSchool.paymentFlag && lcourse.privacy=='fee'">
              {{ctrl.currency}} {{'Free' | translate}}
            </p>
            <p>
              {{ item.description }}
            </p>
          </div>
          <ul class="list-inline text-left course_btm" ng-style="coursebtmStyle">
            <li class="padding-left-0">
              <span ng-if="loginService.subDomain != 'caregiverasia'" uib-tooltip="{{'Enrolled Users' | translate}}">
                <i class="fa fa-users">
                </i>
                <span>
                  {{item.enrolledcounter}}
                </span>
              </span>
              &nbsp;
              <span uib-tooltip="{{'Views' | translate}}">
                <i class="fa fa-eye">
                </i>
                <span>
                  {{item.visitercounter}}
                </span>
              </span>
            </li>
            <li class="pull-right" ng-if="item.privacy!='fee'">
              <span uib-tooltip="{{'Creater' | translate}}">
                {{item.creatorfullname||item.creater}}
              </span>
            </li>
            <li class="pull-right list_price" ng-if="item.privacy=='fee'">
              <span ng-if="item.price" uib-tooltip="{{'Price' | translate}}">
                ${{item.price}}
              </span>
              <span ng-if="!item.price" uib-tooltip="{{'Price' | translate}}">
                Free
              </span>
            </li>
          </ul>
        </div>
        <div class="ribbon-horizontal-right margin-right-10 missedAnswer" ng-if="item.infoOnlyFlag && currentSchool.infoOnlyCourseFlag">
          <ul class="crs_info list-inline">
            <li>
              <i class="fa fa-users">
              </i>
              {{'Classroom' | translate }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row" ng-if="catitems.length==0">
      <!-- ng-if="(catitems.length==0&&setting.totalCount >setting.pageSize)" -->
      <div class="col-md-12 forum">
        <div class="text-right pagination_aln">
          <dir-pagination-controls boundary-links="true" class="with-others" on-page-change="ctrl.pageChanged(newPageNumber)" pagination-id="setting.listName" template-url="components/content/dirPagination.tpl.html">
          </dir-pagination-controls>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>