unserver-unify/src/app/teacher/list.html

<div class="news_page" ng-controller="TeachersCtrl as ctrl">
  <div class="col-md-3">
    <div class="profile sidebar no-wrap">
      <div class="panel no-bg ongoing margin-bottom-20">
        <div class="panel-heading overflow-h">
          <h2 class="panel-title heading-sm pull-left">
            <i class="fa fa-star" style="color:#e8e800"></i>
            <span>
              {{ {eng:'Top',chn:'优秀'}|trans }} {{'Rated' | translate}} <span translate="course.teachers"></span>
            </span>
          </h2>
        </div>
        <ul>
          <li class="profile-event text-center" style="color:#e67e22" ng-if="!ctrl.items || ctrl.items.length < 1"  translate>
          There is no Rating for teachers
          </li>
          <li class="profile-event" ng-repeat="teacher in ctrl.items | orderBy:'-rating' |limitTo:5" ui-sref=".detail.summary({teacherloginname : teacher.username,cs:getCheckSum(teacher.username)})">
            <div class="col-lg-3 col-md-3 padding-left-0">
              <a ui-sref=".detail.summary({teacherloginname : teacher.username,cs:getCheckSum(teacher.username)})">
                <img ng-src="{{ teacher.teacherimgurl }}" style="width: 100%;" title="{{teacher.name}}"/>
              </a>
            </div>
            <div class="overflow-h">
              <h3 class="heading-xs">
                <a title="{{ item.name }}" ui-sref=".detail.summary({teacherloginname : teacher.username,cs:getCheckSum(teacher.username)})">
                  <b>{{ teacher.name }}</b><br>{{ teacher.title }}
                </a>
              </h3>
              <div class="item-date font-12 pull-right" ng-if="teacher.rating">
                <span>
                  <i class="fa fa-star">
                  </i>
                  {{teacher.rating | number:1}}
                </span>
              </div>
            </div>
          </li>
        </ul>
        <div class="clearfix">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="srch_total" style="margin-bottom: 10px;">
        <div class="form-inline pull-left ipad_count_aln" style="padding-left:15px">
          {{"Total"| translate}}:
          <span class="badge badge-green rounded-2x">
            {{totalCount}}
          </span>
        </div>
      </div>
    </div>
    <div class="home_teacher_section inside">
      <div class="row">
        <div class="col-sm-4 col-md-4 col-xs-12 " dir-paginate="teacher in ctrl.items |  itemsPerPage: ctrl.pagesize" pagination-id="news" total-items="ctrl.totalCount">
          <div class="u-shadow-v11 u-shadow-v21--hover text-center g-transition-0_3">
            <div class="g-bg-white g-pa-20" style="padding-bottom: 0 !important;">
              <span class="follow_icon" ng-if="teacher.follow" translate="">Following</span>
              <div class="g-width-130 g-height-130 mx-auto mb-4">
                <a ui-sref=".detail.summary({teacherloginname : teacher.username,cs:getCheckSum(teacher.username)})">
                  <img class="img-fluid g-brd-around g-brd-3 g-brd-gray-light-v3 rounded-circle" ng-src="{{ teacher.teacherimgurl }}" title="{{ teacher.name }}"/>
                </a>
              </div>
              <h3 class="h5">
                <a ui-sref=".detail.summary({teacherloginname : teacher.username,cs:getCheckSum(teacher.username)})">
                  {{ teacher.name }}
                </a>
              </h3>
              <span class="d-block g-color-gray-dark-v5 g-font-size-16 mb-1">
                {{ teacher.title }}
              </span>
              <span class="average teacher_rating" style="height: 38px; float: left;" ng-if="!teacher.rating">
              </span>
              <span class="average teacher_rating" ng-if="teacher.rating">
                <average-star-rating rating-value="teacher.rating" max="5">
                </average-star-rating>
                <span style="line-height:28px; position: relative; top:-9px;">
                  {{ teacher.rating | number: 1 }}/5
                </span>
              </span>
              <span class="average dummy_avg teacher_rating" ng-if="!teacher.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>
              <div class="clearfix"></div>
               <ul class="info_line">
                <li>
                  <i class="fa fa-book">&nbsp;</i>
                  {{'Courses' | translate}}: {{teacher.courses||0}}
                </li>
                <li>
                  <i class="fa fa-user-plus">&nbsp;</i>
                  {{'Following' | translate}}: {{teacher.follower_count||0}}
                </li>
              </ul> 
              <div class="clearfix"></div>
            </div>
            <div class="g-bg-secondary g-px-20 g-py-10" style="min-height: 60px;">
              <span class="d-block clamped clamped-2">{{ teacher.description }}</span>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="margin-bottom-20"></div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
      <div class="text-right pagination_aln" ng-if="ctrl.totalCount > ctrl.pagesize">
        <dir-pagination-controls boundary-links="true"  pagination-id="news" on-page-change="ctrl.pageChanged(newPageNumber)" template-url="components/content/dirPagination.tpl.html">
        </dir-pagination-controls>
      </div>
  </div>
</div>