note widget: whitespace and resize the textarea to reveal full content

2 files changed, 27 insertions, 22 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index 402c3f473..abaf03038 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -65,7 +65,7 @@ li:hover .widget-nav-pills-icons {
 	padding: 5px;
 	width: 100%;
 	resize: vertical;
-	height: 250px;
+	min-height: 250px;
 }
 
 /* saved searches */
diff --git a/view/tpl/notes.tpl b/view/tpl/notes.tpl
index 0e8c8017c..f9fed1feb 100644
--- a/view/tpl/notes.tpl
+++ b/view/tpl/notes.tpl
@@ -1,27 +1,32 @@
 <div class="widget">
-<script>
-var noteSaveTimer = null;
-$(document).on('focusout',"#note-text",function(e){
-	if(noteSaveTimer)
-		clearTimeout(noteSaveTimer);
-	notePostFinal();
-	noteSaveTimer = null;
-});
+	<h3>{{$banner}}</h3>
+	<textarea name="note_text" id="note-text">{{$text}}</textarea>
+	<script>
+		var noteSaveTimer = null;
+		var noteText = $('#note-text');
 
-$(document).on('focusin',"#note-text",function(e){
-	noteSaveTimer = setTimeout(noteSaveChanges,10000);
-});
+		$(document).ready(function(){
+			noteText.height(noteText[0].scrollHeight);
+		});
 
-function notePostFinal() {
-	$.post('notes/sync', { 'note_text' : $('#note-text').val() });
-}
+		$(document).on('focusout',"#note-text",function(e){
+			if(noteSaveTimer)
+				clearTimeout(noteSaveTimer);
+			notePostFinal();
+			noteSaveTimer = null;
+		});
 
-function noteSaveChanges() {
-	$.post('notes', { 'note_text' : $('#note-text').val() });
-	noteSaveTimer = setTimeout(noteSaveChanges,10000);
-}
-</script>
+		$(document).on('focusin',"#note-text",function(e){
+			noteSaveTimer = setTimeout(noteSaveChanges,10000);
+		});
 
-<h3>{{$banner}}</h3>
-<textarea name="note_text" id="note-text">{{$text}}</textarea>
+		function notePostFinal() {
+			$.post('notes/sync', { 'note_text' : $('#note-text').val() });
+		}
+
+		function noteSaveChanges() {
+			$.post('notes', { 'note_text' : $('#note-text').val() });
+			noteSaveTimer = setTimeout(noteSaveChanges,10000);
+		}
+	</script>
 </div>