unserver-unify/src/app/mystudy/activity_summary.html

<div class="myspace my_space" ng-controller="MySpaceSummaryCtrl as ctrl">
  <div class="panel panel-body" style="padding:0;">
    <div class="row row_adjst">
      <div class="col-md-6 g-mb-30 g-mb-0--md" ng-if="currentSchool.courseFlag">
        <div class="g-bg-white g-color-grey g-pa-25">
          <header class="d-flex text-uppercase g-mb-40">
            <i class="fa fa-book fa-3x align-self-center display-4 g-mr-20">
            </i>
            <div class="g-line-height-1">
              <h4 class="h3 g-font-size-18" translate="">
                Learning
              </h4>
              <div class="js-counter" data-comma-separated="true">
                <a ui-sref="index.myspace.mycourses">
                  <span class="g-font-size-30">
                    {{ (ctrl.courseResult.courses)?ctrl.courseResult.courses - ctrl.user.summary.cert:0 }}
                  </span>
                  {{'Ongoing Courses' | translate}}
                </a>
              </div>
            </div>
          </header>
          <div class="d-flex justify-content-between g-mb-25 progress_box">
            <div class="col-md-4 text-center" uib-tooltip="{{ ctrl.courseResult.doneassignments||0 | number:0 }} {{'out of' | translate}} {{ ctrl.courseResult.assignments||0 | number:0 }} {{'Assignment' | translate}} {{'completed' | translate}}">
              <div class="c100 orange mini2 center p{{ctrl.courseResult.doneassignments / ctrl.courseResult.assignments * 100 || 0 | number:0}}">
                <span>{{ctrl.courseResult.doneassignments / ctrl.courseResult.assignments * 100 || 0 | number:0}}<span>%</span></span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <span class="h5">
                <div class="margin-bottom-10"></div>
                <b class="color-green">{{ ctrl.courseResult.doneassignments||0 }}</b> / 
                <b>{{ ctrl.courseResult.assignments||0 }}</b>
              </span>
              <p class="font-12">{{'Assignment' | translate}}</p>
            </div>
            <div class="col-md-4 text-center" uib-tooltip="{{ ctrl.courseResult.doneexams||0 | number:0 }} {{'out of' | translate}} {{ ctrl.courseResult.exams||0 | number:0 }} {{'Exams' | translate}} {{'completed' | translate}}">
              <div class="c100 green mini2 center p{{ctrl.courseResult.doneexams / ctrl.courseResult.exams * 100 ||0 | number:0}}">
                <span>{{ ctrl.courseResult.doneexams / ctrl.courseResult.exams * 100 ||0 | number:0 }}<span>%</span></span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <span class="h5">
                <div class="margin-bottom-10"></div>
                <b class="color-green">{{ ctrl.courseResult.doneexams||0 }}</b> / 
                <b>{{ ctrl.courseResult.exams||0 }}</b>
              </span>
              <p class="font-12">{{'Exam' | translate}}</p>
            </div>
            <div class="col-md-4 text-center" uib-tooltip="{{ ctrl.user.summary.cert || 0 }} {{'out of' | translate}} {{ ctrl.courseResult.courses || 0 }} {{'Courses' | translate}} {{'completed' | translate}}">
              <!-- uib-tooltip="{{ ctrl.courseResult.progressScore||0 | number:0 }} {{'out of' | translate}} {{ ctrl.courseResult.totalresources||0 | number:0 }} {{'Resources' | translate}} {{'completed' | translate}}" -->
              <div class="c100 pink mini2 center p{{ctrl.courseResult.completeness|number:0}}">
                <span>{{ (ctrl.courseResult.courses)?(ctrl.user.summary.cert / ctrl.courseResult.courses  *100 ||0):0 |number:0}}<span>%</span></span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <span class="h5">
                <div class="margin-bottom-10"></div>
                <!-- <b class="color-green">{{ ctrl.courseResult.progressScore||0 | number:0}}</b> / 
                <b>{{ ctrl.courseResult.totalresources||0 | number:0}}</b> -->
                <b class="color-green">{{ (ctrl.courseResult.courses)?ctrl.user.summary.cert:0 || 0 }}</b> / 
                <b>{{ ctrl.courseResult.courses || 0 }}</b>
              </span>
              <p class="font-12">{{'Completed' | translate}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6" ng-if="ctrl.showActivity && loginService.subDomain!='hdb'">
        <div class="g-bg-white g-color-grey g-pa-25">
          <header class="d-flex text-uppercase g-mb-40">
            <i class="fa fa-bell-o fa-3x align-self-center display-4 g-mr-20">
            </i>
            <div class="g-line-height-1">
              <h4 class="h3 g-font-size-18">
                {{'Duration' | translate}}
              </h4>
              <div class="js-counter color-green" data-comma-separated="true">
                <span class="g-font-size-30">
                  {{(ctrl.user.totaltime/60) |number:0}}
                </span>
                {{'Mins' | translate}}
              </div>
            </div>
          </header>
          <div class="d-flex justify-content-between g-mb-25 progress_box">
            <div class="col-md-4 text-center">
              <div class="c100 orange mini2 center">
                <span>{{ctrl.user.summary.blog || 0}}</span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <div class="margin-bottom-10"></div>
              <p class="font-12">{{'Blogs' | translate}}</p>
            </div>
            <div class="col-md-4 text-center">
              <div class="c100 green mini2 center">
                <span>{{ctrl.user.summary.bbs || 0}}</span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <div class="margin-bottom-10"></div>
              <p class="font-12">{{'BBS' | translate}}</p>
              <div class="margin-bottom-30"></div>
            </div>
            <div class="col-md-4 text-center">
              <div class="c100 pink mini2 center">
                <span>{{ctrl.user.summary.topic || 0}}</span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <div class="margin-bottom-10"></div>
              <p class="font-12">{{'Course Forum' | translate}}</p>
            </div>
          </div>
          <!-- <small class="g-font-size-12">16% higher than last month</small> -->
        </div>
      </div>
      <div class="col-md-6 g-mb-30 g-mb-0--md" ng-if="currentSchool.jobFlag">
        <div class="g-bg-white g-color-grey g-pa-25">
          <header class="d-flex text-uppercase g-mb-40">
            <i class="fa fa-briefcase fa-3x align-self-center display-4 g-mr-20">
            </i>
            <div class="g-line-height-1">
              <h4 class="h3 g-font-size-18" translate="">
                Jobs
              </h4>
              <div class="js-counter" data-comma-separated="true">
                <a ui-sref="index.myspace.jobs">
                  <span class="g-font-size-30">
                    {{ctrl.JobResult.companys}}
                  </span>
                  {{'Company' | translate}}
                </a>
              </div>
            </div>
          </header>
          <div class="d-flex justify-content-between g-mb-25 progress_box">
            <div class="col-md-offset-3 col-md-4 text-center" uib-tooltip="{{ ctrl.JobResult.applications||0 | number:0 }} {{'out of' | translate}} {{ ctrl.JobResult.jobs||0 | number:0 }} {{'Applied' | translate}} {{'jobs' | translate}}">
              <div class="c100 orange mini2 center p{{ctrl.JobResult.applications / ctrl.JobResult.jobs * 100 || 0 | number:0}}">
                <span>{{ctrl.JobResult.applications / ctrl.JobResult.jobs * 100 || 0 | number:0}}<span>%</span></span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="pfill"></div>
                </div>
              </div>
              <span class="h5">
                <div class="margin-bottom-10"></div>
                <b class="color-green">{{ctrl.JobResult.applications}}</b> / 
                <b>{{ctrl.JobResult.jobs}}</b>
              </span>
              <p class="font-12">{{'Applied jobs' | translate}}</p>
            </div>
          </div>
        </div>
      </div>      
      <div class="margin-bottom-10"></div>
      <div class="relative col-md-12" ng-if="loginService.school.myspaceCalendarFlag&&ctrl.eventsready">
        <div class="col-md-12" style="padding-top: 5px;">
          <div class="calendar" calendar="myCalendar" ng-model="eventSources" ui-calendar="ctrl.uiConfig.calendar">
          </div>
        </div>
      <div class="margin-bottom-10"></div>
      </div>

      <div class="col-md-12" ng-if="ctrl.ongoingCourses.length > 0">
        <a ui-sref="index.myspace.mycourses" class="pull-right" translate="">view all</a>
        <h4 translate="">
          {{'Ongoing Courses'|translate}}
        </h4>
      </div>
      <div class="col-md-12" ng-if="ctrl.ongoingCourses.length > 0">
        <div class="col-md-6">
          <b class="pull-left font-12 color-orange" translate="">Score</b>
          <b class="pull-right font-12 color-blue" style="margin-right: 35px;" translate="">Progress</b>
          <div class="margin-bottom-10"></div>
          <div class="overview_progress_holder" style="line-height: 2em;" ng-repeat="item in ctrl.ongoingCourses | limitTo:ctrl.courseDivideCount:0">
            <div class="c100 orange mini center pull-left" ng-class="'p' + ((ctrl.progress[item._id]?ctrl.progress[item._id].course_score:0)|number:0)">
              <span>{{ ((ctrl.progress[item._id])?ctrl.progress[item._id].course_score:0) | number:0 }}</span>
              <div class="slice">
                <div class="bar"></div>
                <div class="pfill"></div>
              </div>
            </div>
            <div class="overview_label">
               <span><a ui-sref="index.myspace.mycourses.result({ cid : item._id })">{{ item.name }}</a></span><span class="percent">{{ item.progress || 0 }} %</span>
            </div>
            <div class="overview_progress">
              <ul class="progress_back">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <ul class="progress_front" ng-style=" { 'width' : ((item.progress)?item.progress:0)+'%' }">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <!-- ngIf: ctrl.history.progress.examscores -->
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <b class="pull-left font-12 color-orange" translate="">Score</b>
          <b class="pull-right font-12 color-blue" style="margin-right: 35px;" translate="">Progress</b>
          <div class="margin-bottom-10"></div>
          <div class="overview_progress_holder" style="line-height: 2em;" ng-repeat="item in ctrl.ongoingCourses | limitTo:5:ctrl.courseDivideCount">
            <div class="c100 orange mini center pull-left" ng-class="'p' + ((ctrl.progress[item._id]?ctrl.progress[item._id].course_score:0)|number:0)">
              <span>{{ ((ctrl.progress[item._id])?ctrl.progress[item._id].course_score:0) | number:0 }}</span>
              <div class="slice">
                <div class="bar"></div>
                <div class="pfill"></div>
              </div>
            </div>
            <div class="overview_label">
               <span><a ui-sref="index.myspace.mycourses.result({ cid : item._id })">{{ item.name }}</a></span><span class="percent">{{ item.progress || 0 }}%</span>
            </div>
            <div class="overview_progress">
              <ul class="progress_back">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <ul class="progress_front" ng-style=" { 'width' : ((item.progress)?item.progress:0)+'%' }">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <!-- ngIf: ctrl.history.progress.examscores -->
            </div>
          </div>
        </div>
      </div>
      <div class="margin-bottom-10"></div>
      </div>
      <div class="relative col-md-12">
        <div class="clearfix"></div>
        <div class="row">
          <div class="col-md-6">
            <div>
            <!-- <div ng-if="activitydata"> -->
              <h4 translate="">
                {{'Activity By Day'|translate}}
              </h4>
              <div class="flot-chart hgt_auto">
                <canvas chart-data="activitydata" chart-options="options" tc-chartjs-line="">
                </canvas>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div>
            <!-- <div ng-if="categorydata"> -->
              <h4 translate="">
                {{'Activity By Category'|translate}}
              </h4>
              <div class="flot-chart hgt_auto">
                <canvas chart-data="categorydata" chart-options="options" tc-chartjs-line="">
                </canvas>
              </div>
            </div>
          </div>
        </div>
        <!-- <div ng-if="(ctrl.assignments.length||ctrl.exams.length) && loginService.subDomain!='hdb'">
          <h2 style="margin: 0 0 10px; color: #fff;">
            {{'Top Tasks' | translate}}
          </h2>
        </div>
        <div class="row">
          <div class="col-lg-6 g-mb-20 g-mb-0--lg" ng-if="ctrl.assignments.length && loginService.subDomain!='hdb'">
            <div class="card border-0">
              <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                <h3 class="h6 mb-0">
                  <i class="fa fa-tasks">
                  </i>
                  {{'Assignments' | translate}}  |  {{ ctrl.totalAssignments }}
                </h3>
                <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5">
                  <a ui-sref="index.myspace.assignments" uib-tooltip="{{'View All' | translate}}" tooltip-placement="top-right" class="fa fa-ellipsis-v g-color-black"></a>
                </span>
              </div>
              <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-400 g-pa-0 mCustomScrollbar _mCS_2 mCS-autoHide" style="overflow: visible;">
                <div class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
                  <div class="mCSB_container" dir="ltr" id="mCSB_2_container" style="position:relative; top:0; left:0;">
                    <ul class="list-unstyled">
                      <li class="media g-brd-around g-brd-gray-light-v4 g-brd-left-3 g-brd-blue-left rounded g-pa-20 g-mb-10" ng-repeat="ass in ctrl.assignments">
                        <div class="media-body">
                          <div class="justify-content-between" style="border-bottom:solid 1px #ddd; margin-bottom: 10px;">
                            <h5 class="h6 g-font-weight-600 g-color-black" style="margin: 0;">
                              <a ui-sref="index.myspace.assignments.detail({ aid: ass._id })">
                                {{ ass.title }}
                              </a>
                            </h5>
                            <h4 class="small text-nowrap color-blue" ng-if="ass.stop">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ ass.stop | date: 'yyyy-MM-dd' }}
                            </h4>
                            <h4 class="small text-nowrap color-grey" style="margin:7px 0;" ng-if="!ass.stop">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ {eng:'Not specified',chn:'未指明日期'} | trans }}
                            </h4>
                          </div>
                          <p class="clamped clamped-3" ng-bind-html="ass.content">
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6" ng-if="ctrl.exams.length && loginService.subDomain!='hdb'">
            <div class="card border-0">
              <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                <h3 class="h6 mb-0">
                  <i class="fa fa-pencil-square-o">
                  </i>
                  {{'Exam' | translate}}  |  {{ ctrl.totalExams }}
                </h3>
                <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5">
                  <a ui-sref="index.myspace.exams" uib-tooltip="{{'View All' | translate}}" tooltip-placement="top-right" class="fa fa-ellipsis-v g-color-black"></a>
                </span>
              </div>
            </div>
            <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-400 g-pa-0 mCustomScrollbar _mCS_3 mCS-autoHide" style="overflow: visible;">
              <div class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
                <div class="mCSB_container" dir="ltr" id="mCSB_3_container" style="position:relative; top:0; left:0;">
                  <ul class="list-unstyled">
                    <li class="d-flex justify-content-start g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-10" ng-repeat="exam in ctrl.exams">
                      <div class="g-mt-2" style="width: 100%">
                        <div class="align-self-center g-px-10">
                          <h5 class="h6 g-font-weight-600 g-color-black">
                            <span class="g-mr-5">
                              <a examid="{{exam._id}}" redirect-to-exam="" type="myspaceexam">
                                {{ exam.name }}
                              </a>
                            </span>
                            <span class="small text-nowrap g-color-blue pull-right" style="font-size: 12px;" ng-if="exam.stop">
                              <b>{{'End Date' | translate}}: </b>
                              {{ exam.stop | date: 'yyyy-MM-dd' }}
                            </span>
                            <span class="small text-nowrap color-grey pull-right" style="font-size: 12px;" ng-if="!exam.stop">
                              <b>{{'End Date' | translate}}: </b>
                              {{ {eng:'Not specified',chn:'未指明日期'} | trans }}
                            </span>
                          </h5>
                          <p class="clamped clamped-3">
                            {{exam.description}}
                          </p>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6" ng-if="self.blogs | notEmpty">
            <div class="card border-0">
              <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                <h3 class="h6 mb-0">
                  <i class="fa fa-pencil-square-o">
                  </i>
                  {{'Blogs' | translate}}  |  {{self.blogs.length}}
                </h3>
                <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5">
                  <a ui-sref="index.myspace.blogs" uib-tooltip="{{'View All' | translate}}" tooltip-placement="top-right" class="fa fa-ellipsis-v g-color-black"></a>
                </span>
              </div>
            </div>
            <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-400 g-pa-0 mCustomScrollbar _mCS_3 mCS-autoHide" style="overflow: visible;">
              <div class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
                <div class="mCSB_container" dir="ltr" id="mCSB_3_container" style="position:relative; top:0; left:0;">
                  <ul class="list-unstyled">
                    <li class="d-flex justify-content-start g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-10" ng-repeat="topic in self.blogs">
                      <div class="g-mt-2">
                        <img class="g-width-50 g-height-50 rounded-circle" ng-src="{{topic.fullavatar}}" />
                      </div>
                      <div class="align-self-center g-px-10">
                        <h5 class="h6 g-font-weight-600 g-color-black">
                          <span class="g-mr-5" translate="">
                            Blogs
                          </span>
                          <span class="small text-nowrap g-color-blue">
                          </span>
                        </h5>
                        <p class="clamped clamped-3">
                          {{topic.title}}
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 g-mb-20 g-mb-0--lg" ng-if="ctrl.bbss | notEmpty">
            <div class="card border-0">
              <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                <h3 class="h6 mb-0">
                  <i class="fa fa-tasks">
                  </i>
                  {{'BBS' | translate}}  |  {{ctrl.bbss.length}}
                </h3>
                <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5">
                  <a ui-sref="index.myspace.bbs" uib-tooltip="{{'View All' | translate}}" tooltip-placement="top-right" class="fa fa-ellipsis-v g-color-black"></a>
                </span>
              </div>
              <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-400 g-pa-0 mCustomScrollbar _mCS_2 mCS-autoHide" style="overflow: visible;">
                <div class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
                  <div class="mCSB_container" dir="ltr" id="mCSB_2_container" style="position:relative; top:0; left:0;">
                    <ul class="list-unstyled">
                      <li class="media g-brd-around g-brd-gray-light-v4 g-brd-left-3 g-brd-blue-left rounded g-pa-20 g-mb-10" ng-repeat="topic in ctrl.bbss">
                        <div class="d-flex g-mt-2 g-mr-15">
                          <img alt="Image Description" class="g-width-40 g-height-40 rounded-circle" ng-src="{{topic.photourl}}" />
                        </div>
                        <div class="media-body">
                          <div class="d-flex justify-content-between">
                            <h5 class="h6 g-font-weight-600 g-color-black">
                              <a ui-sref="index.bbs.tab.detail({ id: topic._id })">
                                {{topic.title}}
                              </a>
                            </h5>
                            <span class="small text-nowrap g-color-blue pull-right" style="font-size: 12px;" ng-if="topic.create_at">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ topic.create_at | date: 'yyyy-MM-dd' }}
                            </span>
                            <span class="small text-nowrap color-grey pull-right" style="font-size: 12px;" ng-if="!topic.create_at">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ {eng:'Not specified',chn:'未指明日期'} | trans }}
                            </span>
                          </div>
                          <p class="clamped clamped-3" ng-bind-html="topic.content">
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 g-mb-20 g-mb-0--lg" ng-if="ctrl.topics | notEmpty">
            <div class="card border-0">
              <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                <h3 class="h6 mb-0">
                  <i class="fa fa-tasks">
                  </i>
                  {{'Course Forum' | translate}}  |  {{ctrl.topics.length}}
                </h3>
                <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5">
                  <a ui-sref="index.myspace.forums" uib-tooltip="{{'View All' | translate}}" tooltip-placement="top-right" class="fa fa-ellipsis-v g-color-black"></a>
                </span>
              </div>
              <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-400 g-pa-0 mCustomScrollbar _mCS_2 mCS-autoHide" style="overflow: visible;">
                <div class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0">
                  <div class="mCSB_container" dir="ltr" id="mCSB_2_container" style="position:relative; top:0; left:0;">
                    <ul class="list-unstyled">
                      <li class="media g-brd-around g-brd-gray-light-v4 g-brd-left-3 g-brd-blue-left rounded g-pa-20 g-mb-10" ng-repeat="topic in ctrl.topics">
                        <div class="d-flex g-mt-2 g-mr-15">
                          <img alt="Image Description" class="g-width-40 g-height-40 rounded-circle" ng-src="{{topic.photourl}}" />
                        </div>
                        <div class="media-body">
                          <div class="d-flex justify-content-between">
                            <h5 class="h6 g-font-weight-600 g-color-black">
                              <a ui-sref="index.forums.detail({ id: topic._id })">
                                {{topic.title}}
                              </a>
                            </h5>
                            <span class="small text-nowrap g-color-blue pull-right" style="font-size: 12px;" ng-if="topic.update_at">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ topic.update_at | date: 'yyyy-MM-dd' }}
                            </span>
                            <span class="small text-nowrap color-grey pull-right" style="font-size: 12px;" ng-if="!topic.update_at">
                              <b>{{'Due Date' | translate}}: </b>
                              {{ {eng:'Not specified',chn:'未指明日期'} | trans }}
                            </span>
                          </div>
                          <p class="clamped clamped-3" ng-bind-html="topic.content">
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="clearfix">
      </div>
    </div>
  </div>
</div>