From 00dfdb2e1e95a319ddf180864d9fb5e5a82b3585 Mon Sep 17 00:00:00 2001
From: Nathan Leniz <terakilobyte@gmail.com>
Date: Sun, 25 Jan 2015 15:22:21 -0500
Subject: [PATCH] More layout improvements, adding in contextual icons for test
 success/failure and styling font of test output

---
 gulpfile.js                               |  2 +-
 public/css/main.less                      | 70 ++++++++++++-----------
 public/js/lib/bonfire/bonfireFramework.js |  6 +-
 views/bonfire/show.jade                   |  2 +-
 4 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index fb5377729d..70c59bf1fe 100644
--- a/gulpfile.js
+++ b/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',
diff --git a/public/css/main.less b/public/css/main.less
index 01adb80a6d..a69c239782 100644
--- a/public/css/main.less
+++ b/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
diff --git a/public/js/lib/bonfire/bonfireFramework.js b/public/js/lib/bonfire/bonfireFramework.js
index ea832a18d0..02f9230f13 100644
--- a/public/js/lib/bonfire/bonfireFramework.js
+++ b/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'));
         }
     };
diff --git a/views/bonfire/show.jade b/views/bonfire/show.jade
index d9965075dc..0224965ce0 100644
--- a/views/bonfire/show.jade
+++ b/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)};