diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index d06a457..f663725 100644 --- a/app/assets/javascripts/application.js +++ b/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 diff --git a/app/assets/javascripts/live-coder.js.erb b/app/assets/javascripts/live-coder.js similarity index 95% rename from app/assets/javascripts/live-coder.js.erb rename to app/assets/javascripts/live-coder.js index 54c90fa..ee256c6 100644 --- a/app/assets/javascripts/live-coder.js.erb +++ b/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(); + }); diff --git a/app/assets/javascripts/summary-edit.js b/app/assets/javascripts/summary-edit.js index 0102519..55e2915 100644 --- a/app/assets/javascripts/summary-edit.js +++ b/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('

' + $.trim(thisEd.data('answer')) + '

'); + thisEd.find('textarea:not(.code-answer)').replaceWith('

' + $.trim(thisEd.data('answer')) + '

'); 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('
Please select or enter a value.
'); } else { - thisEd.find('textarea:not(.code-answer)').replaceWith('

' + $.trim(thisEd.find('textarea').val()) + '

'); + thisEd.find('textarea:not(.code-answer)').replaceWith('

' + $.trim(thisEd.find('textarea').val()) + '

'); $.ajax({ type: "POST", url: "assets/update_from_summary.php", diff --git a/app/assets/stylesheets/molecules/_admin.scss b/app/assets/stylesheets/molecules/_admin.scss index 2915318..3225489 100644 --- a/app/assets/stylesheets/molecules/_admin.scss +++ b/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; diff --git a/app/assets/stylesheets/molecules/_livecoder.scss b/app/assets/stylesheets/molecules/_livecoder.scss index 9d3609f..56ef959 100644 --- a/app/assets/stylesheets/molecules/_livecoder.scss +++ b/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,7 +17,12 @@ } } -.code-input ~ button { +.code-input textarea, +.questions_tpl .code-input textarea { + padding: 4px 0.2rem 0 2rem; +} + +.code-input ~ button { margin-left: 0; clear: both; display: block; @@ -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; +} diff --git a/app/assets/stylesheets/pages/_error.scss b/app/assets/stylesheets/pages/_error.scss index 3d16f4e..8c6c12b 100644 --- a/app/assets/stylesheets/pages/_error.scss +++ b/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 { diff --git a/app/assets/stylesheets/templates/_summary.scss b/app/assets/stylesheets/templates/_summary.scss index 5a9a343..042a741 100644 --- a/app/assets/stylesheets/templates/_summary.scss +++ b/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) { diff --git a/bower.json b/bower.json index f607884..5539cbc 100644 --- a/bower.json +++ b/bower.json @@ -13,7 +13,8 @@ "jquery-validate": "", "tota11y": "", "jquery-mockjax": "^2.1.1", - "modernizr-lite": "*" + "modernizr-lite": "*", + "jquery-linedtextareaV0.1": "*" }, "ignore": [ "**/.*",