Add play button

app/assets/stylesheets/statistics.css.scss

@@ -10,3 +10,19 @@
 .clickable {
     cursor: pointer;
 }
+
+.flex-container {
+    display: flex;
+}
+
+.flex-item {
+    flex-grow: 1;
+}
+
+#play-button {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    margin-top: auto;
+    margin-bottom: auto;
+}

app/views/exercises/external_users/statistics.html.slim

@@ -21,14 +21,17 @@ h1 = "#{@exercise} (external user #{@external_user})"
     div class=(@exercise.hide_file_tree ? 'col-sm-12' : 'col-sm-9')
       #current-file.editor
 
-  #submissions-slider
+  .flex-container
-    input type='range' orient='horizontal' list='datapoints' min=0 max=submissions.length-1 value=0
+    button.btn.btn-default id='play-button'
-    datalist#datapoints
+      span.glyphicon.glyphicon-play
-      - index=0
+    #submissions-slider.flex-item
-      - submissions.each do |submission|
+      input type='range' orient='horizontal' list='datapoints' min=0 max=submissions.length-1 value=0
-        option data-submission=submission
+      datalist#datapoints
-          =index
+        - index=0
-        - index += 1
+        - submissions.each do |submission|
+          option data-submission=submission
+            =index
+          - index += 1
 
   #timeline
     .table-responsive