line numbers

app/assets/javascripts/application.js

@@ -14,6 +14,7 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require modernizr-lite/modernizr
+//= require jquery-linedtextareaV0.1/jquery-linedtextarea
 //= require button-group
 //= require form-animation
 //= require summary-edit

app/assets/javascripts/live-coder.js

@@ -118,10 +118,18 @@ $(function(){
     $("[data-id='live-coder-finish-later']").addClass("hidden");
     $('.js-error').addClass('hidden');
     updateResults();
+	  $(".code-input textarea").linedtextarea();
   });
 
   $("[data-id=live-coder]").each(function(){
     updateResults();
   });
 
+
+  //simple live coder for summary page
+  $("[data-id=live-coder-no-js]").addClass('hidden');
+  $("[data-id=live-coder]").removeClass('hidden');
+
+	$(".code-input textarea").linedtextarea();
+
 });

app/assets/javascripts/summary-edit.js

@@ -78,7 +78,7 @@ var cancelClickHandler = function(e) {
   $('.success, .error').remove();
   $('.button-edit, .submit-button').removeClass('disabled-button');
   thisEd.removeClass('editable');
-  thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer">' + $.trim(thisEd.data('answer')) + '</p>');
+  thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.data('answer')) + '</p>');
   thisEd.find('.answer-block, .code-answer').prop('disabled', true);
   thisEd.find('.button-edit').show();
   thisEd.find('.button-save, .button-cancel').hide();
@@ -119,7 +119,7 @@ var saveClickHandler = function(e) {
   if(data == '') {
     $(thisEd).before('<div class="error">Please select or enter a value.</div>');
   } else {
-    thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer">' + $.trim(thisEd.find('textarea').val()) + '</p>');
+    thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.find('textarea').val()) + '</p>');
     $.ajax({
       type: "POST",
       url: "assets/update_from_summary.php",

app/assets/stylesheets/molecules/_admin.scss

@@ -6,10 +6,6 @@ main {
   .savecancel {
     @include span-columns(12);
   }
-  .error {
-    background-color: transparent;
-    color: $accent-color-1;
-  }
   label.error {
     text-align: right;
     padding-top: 0;

app/assets/stylesheets/molecules/_livecoder.scss

@@ -2,12 +2,14 @@
   margin: 10px 0;
 
   textarea {
-    border: 1px solid black;
-    min-height: 200px;
-    padding: 10px;
-    width: 100%;
-    margin-bottom: 0;
     background-color: #fff;
+    border: 1px solid black;
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 10px;
+    // line-height: 1.6em;
+    margin-bottom: 0;
+    min-height: 205px;
+    width: 100%;
 
     &[disabled] {
       background-color: #ddd;
@@ -15,6 +17,11 @@
   }
 }
 
+.code-input textarea,
+.questions_tpl .code-input textarea {
+  padding: 4px 0.2rem 0 2rem;
+}
+
 .code-input ~ button {
   margin-left: 0;
   clear: both;
@@ -58,3 +65,72 @@ iframe {
     }
   }
 }
+
+
+
+// jQuery Lined Textarea Plugin
+//   http://alan.blog-city.com/jquerylinedtextarea.htm
+//
+// Copyright (c) 2010 Alan Williamson
+//
+// Released under the MIT License:
+// http://www.opensource.org/licenses/mit-license.php
+//
+// Usage:
+//   Displays a line number count column to the left of the textarea
+//
+//   Class up your textarea with a given class, or target it directly
+//   with JQuery Selectors
+//
+//   $(".lined").linedtextarea({
+//   	selectedLine: 10,
+//    selectedClass: 'lineselect'
+//   });
+
+.linedwrap {
+	border: 1px solid black;
+	padding: 0;
+  position: relative;
+}
+
+.linedtextarea {
+	padding: 0;
+	margin: 0;
+}
+
+.linedtextarea textarea, .linedwrap .codelines .lineno {
+	font-size: 10pt;
+  font-family: "Lucida Console", Monaco, monospace;
+	line-height: normal !important;
+}
+
+.linedtextarea textarea {
+	padding-right: 0.3em;
+	padding-top: 0.3em;
+	border: 0;
+}
+
+.linedwrap .lines {
+	margin-top: 0px;
+	overflow: hidden;
+	border-right: 1px solid #c0c0c0;
+	margin-right: 10px;
+  position: absolute;
+  left: 0.3rem;
+}
+
+.linedwrap .codelines {
+	padding-top: 5px;
+}
+
+.linedwrap .codelines .lineno {
+	color:#AAAAAA;
+	padding-right: 0.5em;
+	padding-top: 0.0em;
+	text-align: right;
+	white-space: nowrap;
+}
+
+.linedwrap .codelines .lineselect {
+	color: red;
+}

app/assets/stylesheets/pages/_error.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.warning {
+  @extend .error;
+  background-color: #f39c12;
+}
+
 @media only screen and (min-width: $desktop) {
   .error-header {
     .page-title {

app/assets/stylesheets/templates/_summary.scss

@@ -43,13 +43,28 @@
   margin-top: 3rem;
 }
 
+@keyframes success-fadeout {
+  0% { opacity: 1; max-height: 40px; }
+  85% { opacity: 0; max-height: 40px; padding: .5rem 0; margin-bottom: .5rem; }
+  100% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
+}
+
 .success {
+    box-sizing: border-box;
     text-align: center;
     background-color: $accent-color-3;
     color: #fff;
     padding-top: .5rem;
     padding-bottom: .5rem;
     margin-bottom: .5rem; 
+    animation-name: success-fadeout;
+    animation-duration: 1.5s;
+    animation-delay: 2s;
+    animation-fill-mode: forwards;
+}
+
+.text-answer.answer-container {
+  white-space: pre-line;
 }
 
 @media only screen and (min-width: $tablet) {

bower.json

@@ -13,7 +13,8 @@
     "jquery-validate": "",
     "tota11y": "",
     "jquery-mockjax": "^2.1.1",
-    "modernizr-lite": "*"
+    "modernizr-lite": "*",
+    "jquery-linedtextareaV0.1": "*"
   },
   "ignore": [
     "**/.*",