Courses UI - Clean up details page summary

app/styles/courses/mock1/course-details.sass

@@ -1,16 +1,32 @@
 #course-details-view
 
   .concept-completion-container
-    position: relative
+    font-size: 10pt
-    .concept-completion-background
+
-      position: absolute
+  .summary-container
-      height: 100%
+    font-size: 14pt
-      left: 0px
+
-      top: 0px
+  .statistics-container
-      background-color: blue
+    font-size: 12pt
-      opacity: 0.25
+    td
-    .concept-completed-foreground
+      padding-right: 8px
-      font-size: 12pt
+
+  .table-concepts-summary
+    width: 100%
+
+  .concept-summary
+    width: 100%
+    background-color: white
+    cursor: default
+    display: inline-block
+    white-space: nowrap
+    font-size: 9pt
+    font-weight: normal
+    border: 1px solid gray
+    border-radius: 5px
+    margin: 0px
+    padding: 2px
+    background-color: white
 
   #editSettingsModal .modal-dialog
     background-color: white

app/templates/courses/mock1/course-details.jade

@@ -88,23 +88,42 @@ block content
 
 mixin progress-tab
   if instance.students
-    h3 Summary
+    .container-fluid.summary-container
-    - var averagePlaytime = Math.round(Math.random() * 30) + 30
+      .row
-    p
+        .col-md-6
-      strong(style='font-size:12pt;') Average Play Time
+          h3 Statistics
-    p #{averagePlaytime} minutes
+          table.statistics-container
-    p
+            tr
-      strong(style='font-size:12pt;') Concepts Covered
+              td Total students:
-    table.table.table-condensed
+              td #{instance.students.length}
-      each concept in courseConcepts
+            tr
-        - var conceptCompletion = Math.round(parseFloat(conceptsCompleted[concept]) / instance.students.length * 100)
+              td Average level play time:
-        if isNaN(conceptCompletion)
+              td #{stats.averageLevelPlaytime} seconds
-          - conceptCompletion = 0
+            tr
-        tr
+              td Total play time:
-          td.concept-completion-container
+              td #{stats.totalPlayTime} seconds
-              span.concept-completed-foreground(data-i18n="concepts." + concept)
+            tr
-              span.spl - #{conceptCompletion}%
+              td Average levels completed:
-              span.concept-completion-background(style="width:#{conceptCompletion}%;")
+              td #{stats.averageLevelsCompleted}
+            tr
+              td Total levels completed:
+              td #{stats.totalLevelsCompleted}
+            tr
+              td Last level completed:
+              td #{stats.lastLevelCompleted}
+        .col-md-6
+          h3 Concepts Covered
+          table.table-concepts-summary
+            each concept in courseConcepts
+              - var conceptCompletion = Math.round(parseFloat(conceptsCompleted[concept]) / instance.students.length * 100)
+              if isNaN(conceptCompletion)
+                - conceptCompletion = 0
+              tr
+                td.concept-completion-container
+                  span.concept-summary(style="width:#{conceptCompletion}%;")
+                    span.concept-completed-foreground(data-i18n="concepts." + concept)
+                    span.spl - #{conceptCompletion}%
+
     h3 Students
     table.table.table-condensed
       thead

app/views/courses/mock1/CourseDetailsView.coffee

@@ -47,6 +47,14 @@ module.exports = class CourseDetailsView extends RootView
         conceptsCompleted[concept]++
     context.conceptsCompleted = conceptsCompleted
 
+    stats =
+      averageLevelPlaytime: _.random(30, 240)
+      averageLevelsCompleted: _.random(1, @course.levels.length)
+    stats.totalPlayTime = context.instance.students?.length * stats.averageLevelPlaytime ? 0
+    stats.totalLevelsCompleted = context.instance.students?.length * stats.averageLevelsCompleted ? 0
+    stats.lastLevelCompleted = @course.levels[@maxLastStartedIndex] ? @course.levels[@course.levels.length - 1]
+    context.stats = stats
+
     context
 
   initData: ->