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

<div class="row margin-bottom-20 headline_adjust" ng-if="ctrl.course.theme!='mobile'">
  <div class="col-md-12" ng-if="displayedDictions | notEmpty">
    <div class="headline">
      <h4>
        {{'Vocabulary'|translate}}
      </h4>
    </div>
    <div class="row equal-height-columns home_live_course glossary padding-left-15 margin-bottom-30">
      <div class="col-md-2 col-sm-3 col-xs-6 padding-left-0" ng-repeat="item in displayedDictions">
        <div class="home_promobg" style="margin-bottom: 0;">
          <img class="img-responsive" ng-src="{{item.icon? ctrl.dictionPicUrl + item.icon :  ctrl.imgdefault}}"/>
          <div class="service-block no-margin-bottom content-sm equal-height-column rgba-blue" style="height:100px;">
            <h2>
              <a href="{{ item.href }}" target="_blank">{{ item.name }}</a>
            </h2>
            <br>
            <p></p>
          </div>
          <div class="white-bg">
            <p><a href="{{ item.href }}" target="_blank">{{ item.description }}</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-12" ng-if="videoItems.length > 0">
    <!-- Live video course -->
    <div class="headline" id="livecourse" style="margin-bottom: 10px;">
      <h4 translate="">
        Video Class
      </h4>
      <a class="btn btn-default btn-sm pull-right hom_btn_aln" href="{{ appUrl }}/mymeetings">
        {{ 'View All' | translate }}
      </a>
    </div>
    <div class="row equal-height-columns home_live_course padding-left-15 margin-bottom-30" style="overflow:hidden;">
      <div class="col-sm-2 padding-left-0" ng-repeat="item in videoItems">
        <div class="home_promobg" style="margin-bottom: 0;">
          <img ng-if="item.type=='discuss'" src="/assets/images/livechat.jpg"/>
          <img ng-if="item.type=='audioppt'" src="/assets/images/img7.jpg"/>
          <img ng-if="item.type=='videoppt'" src="/assets/images/vprest.jpg"/>
          <img ng-if="item.type=='videocnfrnc'" src="/assets/images/minuteschat.jpg"/>
          <div class="service-block no-margin-bottom content-sm equal-height-column rgba-purple" ng-class="{'rgba-purple ':item.now,'rgba-yellow ':item.minutes,'rgba-blue ':item.hours}" style="min-height: 120px;">
            <span class="btn btn-yellow btn-xs class_status cursor-default" ng-if="item.now">
              Live
            </span>
            <span class="btn btn-orange btn-xs class_status cursor-default" ng-if="item.minutes || item.hours">
              Upcoming
            </span>
            <h2 class="heading-md font-light" style="height:25px; overflow:hidden;">
              {{item.name}}
            </h2>
            <!-- <p>
              {{item.creater}}
            </p> -->
          </div>
        </div>
        <div class="white-bg">
          <p class="pull-left" style="font-size:12px;">
            {{item.start|date:'MMM d, y h:mm a'}}
          </p>
          <a class="btn btn-u pull-right btn-xs" href="{{ item.href }}">
            {{'Join'|translate}}
          </a>
          <div class="clearfix">
          </div>
        </div>
      </div>
    </div>
    <!-- Live video course -->
  </div>
  <div class="col-md-12">
    <div class="headline" ng-if="ctrl.relatedcourses.length>0">
      <h4 translate="">
        Recommended Courses
      </h4>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 padding-right-0" ng-repeat="item in ctrl.relatedcourses track by $index">
        <div class="thumbnails thumbnail-style thumbnail-kenburn overflow-hidden relative">
          <div class="thumbnail-img">
            <div class="overflow-hidden text-center">
              <a ui-sref="index.courses.info({ cid: item._id })">
                <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.courseURL+item._id +'/'+ item.photo :  ctrl.imgdefault}}" style="height:125px;" title="{{ item.name }}"/>
              </a>
            </div>
          </div>
          <div class="list_rating" style="height:20px">
            <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.toString().substring(0,3)}}/5
              </span>
            </span>
          </div>
          <div class="clearfix">
          </div>
          <div class="caption overflow-hidden clst" style="height:42px">
            <h3 style="line-height:14px; margin-top:5px;">
              <a class="hover-effect" style="font-size:14px !important; line-height:14px; " ui-sref="index.courses.info({ cid: item._id })">
                {{ item.name }}
              </a>
            </h3>
          </div>
          <ul class="list-inline text-left" style="border-top:solid 1px white;padding-top: 5px;  margin-bottom: 0px;">
            <li class="padding-left-0">
              <span style="color:#555">
                {{item.creatorfullname||item.creater}}
              </span>
            </li>
            <li>
              <!-- display rating if any -->
            </li>
            <li class="pull-right" ng-if="ctrl.compareDate(item.created)" style="padding-right:10px;">
              <img src="assets/images/new.gif"/>
            </li>
            <li class="pull-right">
              <i class="fa fa-eye">
              </i>
              <span style="color:#555">
                {{item.visitercounter}}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>