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
-    .concept-completion-background
-      position: absolute
-      height: 100%
-      left: 0px
-      top: 0px
-      background-color: blue
-      opacity: 0.25
-    .concept-completed-foreground
-      font-size: 12pt
+    font-size: 10pt
+
+  .summary-container
+    font-size: 14pt
+
+  .statistics-container
+    font-size: 12pt
+    td
+      padding-right: 8px
+
+  .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
-    - var averagePlaytime = Math.round(Math.random() * 30) + 30
-    p
-      strong(style='font-size:12pt;') Average Play Time
-    p #{averagePlaytime} minutes
-    p
-      strong(style='font-size:12pt;') Concepts Covered
-    table.table.table-condensed
-      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-completed-foreground(data-i18n="concepts." + concept)
-              span.spl - #{conceptCompletion}%
-              span.concept-completion-background(style="width:#{conceptCompletion}%;")
+    .container-fluid.summary-container
+      .row
+        .col-md-6
+          h3 Statistics
+          table.statistics-container
+            tr
+              td Total students:
+              td #{instance.students.length}
+            tr
+              td Average level play time:
+              td #{stats.averageLevelPlaytime} seconds
+            tr
+              td Total play time:
+              td #{stats.totalPlayTime} seconds
+            tr
+              td Average levels completed:
+              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: ->