More layout improvements, adding in contextual icons for test success/failure and styling font of test output

gulpfile.js

@@ -5,7 +5,7 @@ var gulp = require('gulp'),
     sync = require('browser-sync'),
     reload = sync.reload,
     inject = require('gulp-inject'),
-    reloadDelay = 3000;
+    reloadDelay = 1000;
 
 var paths = {
     server: './app.js',

public/css/main.less

@@ -538,37 +538,6 @@ thead {
   }
 }
 
-form.code span {
-  font-size: 14px;
-  font-family: "Ubuntu Mono";
-  padding-bottom: 0px;
-  margin-bottom: 0px;
-  height: auto;
-}
-
-.big-error-icon {
-  font-size: 32px;
-  color: @brand-danger;
-}
-
-.big-success-icon {
-  font-size: 32px;
-  color: @brand-primary;
-}
-
-.test-output {
-  font-size: 14px;
-  font-family: "Ubuntu Mono";
-}
-
-#mainEditorPanel .panel-body {
-  padding-bottom: 0px;
-}
-
-div.CodeMirror-scroll {
-  padding-bottom: 100px;
-}
-
 .embed-responsive-twitch-chat {
   padding-bottom: 117%;
 }
@@ -595,8 +564,45 @@ div.CodeMirror-scroll {
   margin-bottom: 5px;
 }
 
+
+
+/**
+ * Bonfire styling
+ */
+
+form.code span {
+  font-size: 14px;
+  font-family: "Ubuntu Mono";
+  padding-bottom: 0px;
+  margin-bottom: 0px;
+  height: auto;
+}
+
+.big-error-icon {
+  font-size: 40px;
+  color: @brand-danger;
+}
+
+.big-success-icon {
+  font-size: 40px;
+  color: @brand-primary;
+}
+
+.test-output {
+  font-size: 15px;
+  font-family: "Ubuntu Mono";
+}
+
+#mainEditorPanel .panel-body {
+  padding-bottom: 0px;
+}
+
+div.CodeMirror-scroll {
+  padding-bottom: 100px;
+}
+
 .test-vertical-center {
-  margin: 8px;
+  margin-top: 15px;
 }
 
 //uncomment this to see the dimensions of all elements outlined in red

public/js/lib/bonfire/bonfireFramework.js

@@ -175,14 +175,14 @@ var createTestDisplay = function() {
     }
     for (var i = 0; i < userTests.length;i++) {
         var test = userTests[i];
-        var testDoc = document.createElement("li");
+        var testDoc = document.createElement("div");
         if (test.err != null) {
             $(testDoc)
-                .html("<i class='ion-close-circled big-error-icon col-xs-2'></i>" + test.text + "\n" + test.err).addClass('test-output col-xs-10')
+                .html("<div class='row'><div class='col-xs-1 text-center'><i class='ion-close-circled big-error-icon'></i></div><div class='col-xs-11 test-output wrappable'>" + test.text + "</div><div class='col-xs-11 test-output wrappable'>" + test.err + "</div></div>")
                 .prependTo($('#testSuite'))
         } else {
             $(testDoc)
-                .html("<i class='ion-checkmark-circled big-success-icon col-xs-2'></i><div class='test-vertical-center'>" + test.text + "</div>").addClass('test-output col-xs-10')
+                .html("<div class='row'><div class='col-xs-1 text-center'><i class='ion-checkmark-circled big-success-icon'></i></div><div class='col-xs-11 test-output test-vertical-center wrappable'>" + test.text + "</div></div>")
                 .appendTo($('#testSuite'));
         }
     };

views/bonfire/show.jade

@@ -47,7 +47,7 @@ block content
                         .form-group.codeMirrorView
                             textarea#codeOutput
                     br
-                    ul#testSuite.list-group
+                    #testSuite
                     br
                     script(type="text/javascript").
                         var tests = !{JSON.stringify(tests)};