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

<div ng-controller="CoursesCtrl as ctrl">
  <div>
    <div class="side_header" ng-class="{ active : ctrl.showMobileSid }">
      <script id="menuTree.html" type="text/ng-template">
        <ul ng-class="{'active':item.key==ctrl.option}" class="side-nav">
          <i class="sidebar_arrow {{item.items.length>0 ? 'fa fa-angle-right':''}}"></i>
          <a ng-click="ctrl.list(item.key)" ng-class="{'active':item.key==ctrl.option}" class="list"><span style="cursor: pointer;"> {{item.key}} &nbsp;<span ng-if='item.counter' class="itm_cntr" style="width:auto!important">({{item.counter}})</span></span>
          </a>
          <ul class="second_level">
            <li ng-repeat="item in item.items" ng-include="'menuTree.html'"></li>
          </ul>
        </ul>
      </script>
      <ul ng-if="!loginService.school.coursebyDepartment">
        <li>
          <ul class="list-group sidebar-nav-v1">
            <li class="list-group-item ">
              <a class="form-inline" ng-click="ctrl.list('')" style="cursor:pointer; float:left;">
                <strong style="float:left">
                  {{'All Courses' | translate}}
                </strong>
                <div class="form-inline" style="float:left">
                  <strong>
                    ({{ctrl.totalCoursesCountUnderCat || 0}})
                  </strong>
                </div>
              </a>
            </li>
            <li class="list-group-item" ng-include="'menuTree.html'" ng-repeat="item in catitems" style="position:relative">
            </li>
          </ul>
        </li>
      </ul>
      <ul class="list-group sidebar-nav-v1" ng-if="loginService.school.coursebyDepartment">
        <li class="list-group-item" ng-class="{'active': ctrl.option == ''}">
          <a ng-click="ctrl.listdepartment('')" style="cursor:pointer;">
            <strong translate="">
              {{ {eng:'All',chn:'全部'} | trans }}
            </strong>
            <strong>
              ({{ctrl.totalCoursesCountUnderDepartment || 0}})
            </strong>
          </a>
        </li>
        <li class="list-group-item" ng-class="{'active': item.department == ctrl.department}" ng-repeat="item in ctrl.Departments">
          <a href="javascript:void(0)" ng-click="ctrl.listdepartment(item.department)">
            {{item.department}}
            <span class="itm_cntr" ng-if="item.counter" style="width:auto!important">
              ({{item.counter}})
            </span>
          </a>
        </li>
      </ul>
      <div class="clearfix">
      </div>
    </div>
    <button class="navbar-toggle" ng-class="{ active : ctrl.showMobileSid }" ng-click="ctrl.toggleSideBar()" type="button">
      <span class="sr-only">
        Toggle navigation
      </span>
      <span class="fa fa-bars">
      </span>
      <span class="fa fa-angle-left">
      </span>
    </button>
    <div class="forum">
      <div class="tag-box tag-box-v6 text-right mbl_srch side_menu">
        <div class="form-inline">
          <div class="input-group">
            <input class="form-control" ng-model="ctrl.q" placeholder="{{ 'search course' | translate }}" type="text"/>
            <i class="fa fa-search" ng-click="ctrl.searchCourseByName(ctrl.q)">
            </i>
            <span class="input-group-btn">
              <button class="btn btn-default" ng-click="q=''" ng-show="q.length > 0" type="button">
                <i class="fa fa-remove">
                </i>
              </button>
            </span>
          </div>
        </div>
        <div class="clearfix">
        </div>
      </div>
      <div class="course_category">
        <a class="fa fa-bars" ng-click="ctrl.toggleSideBar()">
        </a>
      </div>
      <div class="row">
        <div class="margin-bottom-60">
        </div>
        <div class="col-xs-12" ng-repeat="item in setting.items">
          <div class="thumbnails thumbnail-style thumbnail-kenburn overflow-hidden" ui-sref="{{item.courseurl}}({ cid: item._id,cs:getCheckSum(item._id)  })">
            <div class="thumbnail-img">
              <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)}}" title="{{ item.name }}"/>
                </a>
              </div>
            </div>
            <div class="mbl_list_right">
              <div class="clearfix">
              </div>
              <div class="caption overflow-hidden clst" style="height:54px">
                <h3>
                  <a class="hover-effect" ui-sref="{{ ctrl.inspectorFlag|| item.privacy=='public' ? 'index.courses.course':'index.courses.info'}}({ cid: item._id ,cs:getCheckSum(item._id)})">
                    {{ item.name }}
                  </a>
                </h3>
                <p>
                  {{ item.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-12" ng-if="setting.totalCount > setting.items.length">
          <div class="clearfix margin-bottom-20">
          </div>
          <div class="col-xs-12">
            <button class="btn btn-u btn-block" ng-click="ctrl.nextPage()" style="line-height:25px;" translate="">
              Load More
            </button>
          </div>
          <div class="clearfix margin-bottom-75">
          </div>
        </div>
        <div class="col-xs-12" ng-if="setting.totalCount == setting.items.length">
          <div class="margin-bottom-60">
          </div>
        </div>
      </div>
      <div class="clearfix">
      </div>
      <h3 class="row text-center" ng-if="setting.items.length == 0" translate="">
        No Result!
      </h3>
      <ul class="course_filter">
        <li class="hottest" ng-class="{'active': ctrl.sortmethod == 'visitercounter'}" ng-click="ctrl.getHotestCourses()">
          <i class="fa fa-fire color-red">
          </i>
          <span translate="">
            Hot
          </span>
        </li>
        <li class="latest" ng-class="{'active': ctrl.sortmethod == 'update'}" ng-click="ctrl.getNewCourses()">
          <i class="fa fa-clock-o color-orange">
          </i>
          <span translate="">
            Latest
          </span>
        </li>
        <li class="topest" ng-class="{'active': ctrl.sortmethod == 'top'}" ng-click="ctrl.getTopCourses()">
          <i class="fa fa-graduation-cap color-purple">
          </i>
          <span translate="">
            Top
          </span>
        </li>
        <li class="recommended" ng-class="{'active': ctrl.sortmethod == 'position'}" ng-click="ctrl.getPositionCourses()" style="font-size: 11px;">
          <i class="fa fa-thumbs-up color-blue">
          </i>
          <span translate="">
            Recommended
          </span>
        </li>
        <li class="hottest" ng-class="{'active': ctrl.sortmethod == 'star'}" ng-click="ctrl.getStarCourses()">
          <i class="fa fa-star color-yellow">
          </i>
          <span translate="">
            Star
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>