unserver-unify/src/app/ofcourse/gsx/mobilelist.html

<div ng-controller="OfflineCoursesCtrl as ctrl">
  <div>
    <div class="side_header" ng-class="{ active : ctrl.showMobileSid }">
      <script id="menuTree.html" type="text/ng-template">
        <ul class="{(item.key==ctrl.option) ? 'active' : ''}} side-nav">
          <i class="sidebar_arrow {{item.items.length>0 ? 'fa fa-angle-right':''}}"  >
          </i>
          <a ng-click="ctrl.list(item.key)" class="{{(item.key==ctrl.option) ? 'active' : ''}} list">
            <span style="cursor: pointer;">
              {{item.title}} &nbsp;
              <span ng-if='item.value==0' class="itm_cntr" style="width:auto!important">
                ({{item.counter||0}})
              </span>
            </span>
          </a>
          <ul class="second_level">
            <li ng-repeat="item in item.items" ng-include="'menuTree.html'">
            </li>
          </ul>
        </ul>
      </script>
      <ul ng-class="{'sidebar_active':dropdown}">
        <li ng-class="{'sidebar_responsive_active':dropdown}">
          <ul class="list-group sidebar-nav-v1 gsx_sidebar">
            <li style="position:relative" class="list-group-item {(''==ctrl.option) ? 'active' : ''}} side-nav">
              <a class="{{(''== ctrl.option) ? 'active' : ''}} list" ng-click="ctrl.list('')">
                <span style="cursor: pointer;">
                  <strong style="float:left" translate="">
                    All Offline Courses
                  </strong>
                  <span class="itm_cntr"  style="width:auto!important">
                    &nbsp;&nbsp;({{totalCount||0}}) 
                  </span>
                </span>
              </a>
            </li>
            <li class="list-group-item" ng-include="'menuTree.html'" ng-repeat="item in catitems" style="position:relative">
            </li>
          </ul>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <button type="button" class="navbar-toggle" ng-class="{ active : ctrl.showMobileSid }" ng-click="ctrl.toggleSideBar()">
    <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" ng-class="{'enable': ctrl.q.length > 0}">
            <input class="form-control" type="text" ng-model="ctrl.q" placeholder="{{ 'search course' | translate }}" />
            <i class='fa fa-search' ng-click="ctrl.searchCourseByName(ctrl.q)">
            </i>
            <span class="input-group-btn">
              <button ng-show="ctrl.q.length >0" class="btn btn-default" type="button" ng-click="ctrl.clrCoursesSearchName()">
                <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="lcourse in ctrl.courses">
          <div class="thumbnails thumbnail-style thumbnail-kenburn overflow-hidden" ui-sref=".info({cid:lcourse._id})">
            <div class="thumbnail-img">
              <div class="overflow-hidden">
                <a href="javascript:;">
                  <img alt="{{ lcourse.name }}" class="img-responsive" ng-src="{{lcourse.photourl }}" title="{{ lcourse.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" href="javascript:;" class="hover-effect" target="_blank">
                    {{ lcourse.name }} 
                  </a>
                </h3>
                <p>
                  {{ lcourse.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" style="line-height:25px;"  ng-click="ctrl.nextPage()" translate>Load More</button>
          </div>
          <div class="clearfix margin-bottom-75"></div>
        </div>
    </div>
  </div>
</div>