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

<div class="col-lg-12" ng-controller="CourseInfoCtrl as ctrl">
  <!-- Original code -->
  <div class="tag-box theme_red row" style="padding-top:0; padding-bottom:0;">
    <div class="row" ng-if="ctrl.course.photo || ctrl.course.video || ctrl.course.youtube">
      <div class="media_container">
        <!-- show photo if don't have video -->
        <img ng-if="!ctrl.course.video && !ctrl.course.youtube" ng-src="{{ctrl.course.photo ? ctrl.coursePhotoUrl + ctrl.course.photo : ctrl.imgdefault }}" style="width:100%" title="{{ ctrl.course.name }}"/>
        <!-- show video if video available -->
        <div class="videogular-container" ng-if="ctrl.course.video">
          <videogular vg-theme="ctrl.outlinemp4config.theme">
            <vg-media vg-src="ctrl.outlinemp4config.sources">
            </vg-media>
            <vg-controls vg-autohide="true" vg-autohide-time="1000">
              <vg-play-pause-button>
              </vg-play-pause-button>
              <vg-time-display>
                {{ currentTime | date:'mm:ss' }}
              </vg-time-display>
              <vg-scrub-bar>
                <vg-scrub-bar-current-time>
                </vg-scrub-bar-current-time>
              </vg-scrub-bar>
              <vg-time-display>
                {{ totalTime | date:'mm:ss' }}
              </vg-time-display>
              <vg-volume>
                <vg-mute-button>
                </vg-mute-button>
                <vg-volume-bar>
                </vg-volume-bar>
              </vg-volume>
              <vg-fullscreen-button>
              </vg-fullscreen-button>
            </vg-controls>
            <vg-buffering>
            </vg-buffering>
            <vg-overlay-play>
            </vg-overlay-play>
          </videogular>
        </div>
        <div class="videoWrapper" ng-if="ctrl.course.youtube">
          <iframe ng-src="{{youtubeUrl}}">
          </iframe>
        </div>
      </div>
    </div>
    <div class="row">
      <ul class="middle_tab" ng-init="showTab = 0">
        <li class="active" ng-class="{'active': showTab == 0}" style="">
          <a class="btn" ng-click="showTab=0">
            Description
          </a>
        </li>
        <li ng-class="{'active': showTab == 1}" style="">
          <a class="btn" ng-click="showTab=1">
            Content ({{ctrl.course.contents.length || 0}})
          </a>
        </li>
        <li ng-class="{'active': showTab == 2}" style="">
          <a class="btn" ng-click="showTab=2">
            Related Courses ({{ ctrl.relatedcourses.length || 0}})
          </a>
        </li>
      </ul>
    </div>
  </div>
  <span class="mbl_sticky_bottom" ng-if="!ctrl.mycourseFlag">
    <span ng-if="ctrl.course.privacy=='fee'">
      <button class="btn btn-info" ng-click="ctrl.paypalPurchase()" ng-if="loginService.isLogged">
        <span ng-if="ctrl.course.price">
          ${{ctrl.course.price}}
        </span>
        <span ng-if="!ctrl.course.price">
          Free
        </span>
        {{'Buy Now'|translate}}
      </button>
      <span ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged">
        <button class="btn btn-info btn-block" ng-click="lctrl.showCourseLoginDialog()">
          {{'Buy Now'|translate}}
          <span ng-if="ctrl.course.price">
            (${{ctrl.course.price}})
          </span>
          <span ng-if="!ctrl.course.price">
            (Free)
          </span>
        </button>
      </span>
    </span>
    <span class="mbl_sticky_bottom" ng-if="loginService.isLogged&& ctrl.course.privacy!='fee'">
      <button class="btn btn-info" ng-click="ctrl.enroll()" ng-if="!ctrl.enrollinprocess&&!ctrl.course.price" translate="">
        Enroll Now
      </button>
      <button class="pending_alert btn btn-default" ng-if="ctrl.enrollinprocess" translate="">
        Pending for approval!
      </button>
    </span>
  </span>
  <span class="mbl_sticky_bottom" ng-if="ctrl.mycourseFlag">
    <button class="btn btn-info pull-right" translate="" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.courses.course({cid:ctrl.id,cs:getCheckSum(ctrl.id)})">
      Enter
    </button>
  </span>
  <span class="mbl_sticky_bottom" ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged  && ctrl.course.privacy!='fee'">
    <button class="btn btn-info btn-block" ng-click="lctrl.showCourseLoginDialog()" translate="">
      Enroll Now
    </button>
  </span>
  <div class="clearfix">
  </div>
  <!-- Tab 1 Starts -->
  <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == '0'}">
    <div class="tag-box row" style="margin-bottom: 20px;">
      <div class="row">
        <div class="forum">
          <div class="content_heading_sec">
            <div class="margin-bottom-10 blog-info" style="border:none;">
              <strong>
                {{ ctrl.course.name }}
              </strong>
              <div class="clearfix">
              </div>
              <span class="date_sml_aln" title="Submit">
                {{ctrl.course.update||ctrl.course.created | date: 'yyyy-MM-dd'}}
              </span>
              <span>
                <i class="fa fa-eye">
                </i>
                {{ctrl.course.visitercounter}}
              </span>
              <mybookmark ng-if="!currentSchool.apiOptions.hdbftp">
              </mybookmark>
              <div class="clearfix">
              </div>
              <span class="avrg_aln" ng-if="ctrl.inspectorFlag">
                <div class="average" ng-if="averageRating">
                  <average-star-rating max="5" rating-value="averageRating">
                  </average-star-rating>
                  <span>
                    {{averageRating}}/5
                  </span>
                  <span class="list_reviews ng-binding">
                    <a ng-click="ctrl.getAssessmentResult()">
                      ({{ctrl.course.ratingcounter}} {{'reviews'|translate}})
                    </a>
                  </span>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="pull-right" ng-if="ctrl.course.assessment">
        </div>
        <div class="tag-box tag-box-v2">
          <div ng-if="!ctrl.course.detail">
            <img alt="{{ item.name }}" ng-src="{{ctrl.course.photo ? ctrl.coursePhotoUrl + ctrl.course.photo : ctrl.imgdefault }}" style="width:100%"/>
          </div>
          <div class="inner_content unformat" ng-model="ctrl.course.detail" ta-bind="">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="margin-bottom-20">
        <div class="headline" ng-if="ctrl.editors&&ctrl.editors.length>0">
          <h4 translate="course.teachers">
            Teachers
          </h4>
        </div>
        <div class="teacher_container">
          <div ng-repeat="editor in ctrl.editors">
            <div>
              <div class="teacher_block margin-bottom-0">
                <div class="col-md-4 col-xs-3 no-padding">
                  <a ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged">
                    <img ng-click="lctrl.showCourseLoginDialog()" ng-src="{{editor.photourl }}" style="max-height:120px;" title="{{ editor.name || editor.username }}" width="85"/>
                  </a>
                  <a ng-if="loginService.isLogged" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.teacher.detail.summary({teacherloginname : editor.username,cs:getCheckSum(editor.username)})">
                    <img ng-src="{{editor.photourl }}" style="max-height:120px;" title="{{ editor.name || editor.username }}" width="85"/>
                  </a>
                </div>
                <div class="col-md-8 col-xs-9 padding-left-0">
                  <h3 style="margin-top:0px;">
                    <a class="cursor-pointer" ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged">
                      <span ng-click="lctrl.showCourseLoginDialog()">
                        {{ editor.name || editor.username }}
                      </span>
                    </a>
                    <a ng-if="loginService.isLogged" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.teacher.detail.summary({teacherloginname : editor.username,cs:getCheckSum(editor.username)})">
                      {{ editor.name || editor.username }}
                    </a>
                  </h3>
                  <p>
                    <b>
                      <span>
                        {{editor.title}}
                      </span>
                    </b>
                  </p>
                  <p>
                    {{editor.description}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top:20px;">
      <div class="margin-bottom-30" ng-if="ctrl.course.theme!='mobile' && ctrl.commentscount>0">
        <div class="profile">
          <div class="panel-heading overflow-h">
            <h2 class="panel-title heading-sm pull-left">
              <i class="fa fa-comments">
              </i>
              {{'Users Comments' | translate }}
              <span>
                ({{ctrl.commentscount}})
              </span>
            </h2>
          </div>
          <div class="panel-body white-bg">
            <div class="media media-v2" ng-repeat="topic in ctrl.coursetopics">
              <a class="pull-left" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.setting.profile({ id: topic.author.loginname ,cs:getCheckSum(topic.author.loginname)})">
                <img class="media-object rounded-x img_res_adj" height="80" ng-src="{{ topic.avatar_url }}" title="{{ topic.authorname }}" width="80"/>
              </a>
              <div class="media-body">
                <h4 class="media-heading">
                  <strong>
                    <a ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.setting.profile({ id: topic.author.loginname ,cs:getCheckSum(topic.author.loginname)})">
                      {{ topic.author.fullname }}
                    </a>
                  </strong>
                  @{{ topic.author.loginname }}
                  <small>
                    {{ topic.create_at | date: 'short' }}
                  </small>
                  <a class="pull-right color-red" ng-click="ctrl.delete(topic)" ng-if="loginService.user&&loginService.user.is_admin||loginService.user.grole=='admin'" style="margin-top:15px;">
                    <i class="fa fa-remove expand-list rounded-x">
                    </i>
                  </a>
                </h4>
                <p style="margin-right: 30px;">
                  {{topic.content}}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ng-if="displayedStudents | notEmpty">
        <div class="margin-bottom-20">
          <div class="headline">
            <h4>
              Community
            </h4>
            <b style="color:#fff;">
              ({{displayedStudents.length}})
            </b>
          </div>
          <div class="community_img" ng-repeat="student in displayedStudents">
            <img class="img-responsive" ng-src="{{ student.avatar_url }}" style="width:100%;"/>
          </div>
          <div class="clearfix">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 1 Ends -->
  <!-- Tab 2 Starts -->
  <div class="col-xs-12 no-padding course_content" ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == '1'}">
    <div class="margin-bottom-10 row">
      <ul class="profile crsr" >
        <li class=" profile-post {{ctrl.getlistcolor($index,item.level)}}" ng-class="{active:showSec ==  item,'second-level': item.level,'': !item.level}" ng-click="ctrl.handleContentClick()" ng-repeat="item in tablelist">
          <div class="news-title" ng-if="item.id">
            <span class="profile-post-numb">
              {{ item.idx }}
            </span>
            <div class="profile-post-in">
              <h3 class="heading-xs">
                {{ item.title }}
              </h3>
              <p>
                {{item.description ? item.description : item.title}}
              </p>
            </div>
          </div>
          <div ng-if="!item.id">
            <span class="profile-post-numb">
              {{ item.idx }}
            </span>
            <div class="profile-post-in">
              <h3 class="heading-xs">
                {{ item.title }}
              </h3>
              <p>
                {{item.description ? item.description : item.title}}
              </p>
            </div>
          </div>
        </li>
        <li ng-if="tablelist.length <= 0">
          {{ {eng:'No content', chn:'未添加课程内容'}|trans }}
        </li>
      </ul>
      <div class="col-lg-12 col-xs-12 no-padding" ng-if="!tablelist||tablelist.length<1 && !_user ">
        <div class="headline">
          <h4 translate="">
            Please login to get more Info!
          </h4>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 2 Ends -->
  <!-- Tab 3 Starts -->
  <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == '2'}">
    <div class="row margin-bottom-20">
      <div class="no_record" ng-if="ctrl.relatedcourses.length <= 0" translate="">
        No related course
      </div>
      <div class="row">
        <div class="col-xs-12" ng-repeat="item in ctrl.relatedcourses">
          <div class="thumbnails img_hgt thumbnail-style thumbnail-kenburn overflow-hidden">
            <div class="thumbnail-img">
              <div class="overflow-hidden text-center">
                <a ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.courses.info({ cid: item._id,cs:getCheckSum(item._id) })">
                  <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.courseURL+item._id +'/'+ item.photo :  ctrl.imgdefault}}" title="{{ item.name }}"/>
                </a>
                <!--a ng-if="!ctrl.inspectorFlag && item.privacy!='public' && (!item.did || ctrl.mydepartments.indexOf(item.did) == -1)" class="btn-more prvt_btn hover-effect" ui-sref="index.courses.info({ cid: item._id })">{{ {eng:'Private ...', chn:'私有课程...'}|trans }}</a>
                <a ng-if=" ctrl.inspectorFlag || (item.did && ctrl.mydepartments.indexOf(item.did) > -1) || item.privacy=='public'" class="btn-more hover-effect" ui-sref="index.courses.course({ cid: item._id })">{{'More'|translate}} +</a-->
              </div>
            </div>
            <div class="mbl_list_right">
              <div class="caption overflow-hidden clst hgt_22" style="height:22px">
                <h3 style="line-height:14px; margin-top:0px;">
                  <a class="hover-effect" style="font-size:14px !important; line-height:14px;" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.courses.info({ cid: item._id,cs:getCheckSum(item._id) })">
                    {{ item.name }}
                  </a>
                </h3>
                <div class="list_rating">
                  <span class="average dummy_avg" ng-if="!item.rating">
                    <div class="average-rating-container">
                      <ul class="rating background" style="top:0;">
                        <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>
                  <!--span class="list_reviews">&nbsp;({{item.ratingcounter||0}} reviews)</span-->
                </div>
              </div>
              <div class="clearfix">
              </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>
  </div>
  <!-- Tab 3 Ends -->
  <div class="footer_text margin-bottom-40">
    {{'Powered by' | translate }}
    <a class="color" href="http://bamboosys.com/" target="_blanck">
      {{'BambooCloud' | translate }}
      <sup>
        ®
      </sup>
    </a>
    {{'Online Learning Platform' | translate }}
    <div class="clearfix">
    </div>
    <a href="http://bamboosys.com/" target="_blanck">
      www.bamboosys.com
    </a>
  </div>
  <div class="clearfix">
  </div>
  <!-- End of origianl code -->
</div>