ncp-web: replace textarea with div for outputv0.53.19

4 files changed, 50 insertions, 27 deletions

diff --git a/changelog.md b/changelog.md
index 732d2e3f..6be44ab0 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,21 @@
 
-[v0.53.12](https://github.com/nextcloud/nextcloudpi/commit/4e597b9) (2018-04-03) ncp-web: added nc-config and helper buttons
+[v0.53.20](https://github.com/nextcloud/nextcloudpi/commit/b0fbe28) (2018-04-04) ncp-web: replace textarea with div for output
+
+[v0.53.19](https://github.com/nextcloud/nextcloudpi/commit/b92ba98) (2018-04-04) ncp-web: check for updates upon first run
+
+[v0.53.18](https://github.com/nextcloud/nextcloudpi/commit/e7b76b6) (2018-04-04) ncp-web: refresh sidebar after launching actions
+
+[v0.53.17](https://github.com/nextcloud/nextcloudpi/commit/1c7b7f5) (2018-04-04) ncp-web: reload ncp-web after nc-update
+
+[v0.53.16](https://github.com/nextcloud/nextcloudpi/commit/ad31dd7) (2018-04-04) ncp-web: implement is_active()
+
+[v0.53.15](https://github.com/nextcloud/nextcloudpi/commit/c2e8a36) (2018-04-04) docker: add column command
+
+[v0.53.14](https://github.com/nextcloud/nextcloudpi/commit/ce7f125) (2018-04-04) ncp-web: fix scroll bar
+
+[v0.53.13](https://github.com/nextcloud/nextcloudpi/commit/3458642) (2018-04-04) ncp-web: fix ncp-app selection
+
+[v0.53.12](https://github.com/nextcloud/nextcloudpi/commit/c809f93) (2018-04-03) ncp-web: added nc-config and helper buttons
 
 [v0.53.11](https://github.com/nextcloud/nextcloudpi/commit/42adfb3) (2018-04-03) ncp-web: fix glitch showing power dialog
 
diff --git a/ncp-web/index.php b/ncp-web/index.php
index 642688f3..bee9bce4 100644
--- a/ncp-web/index.php
+++ b/ncp-web/index.php
@@ -185,7 +185,7 @@ HTML;
                   <div id="circle-retstatus" class="icon-red-circle"></div>
                 </div>
             </form>
-            <textarea readonly id="details-box" class="outputbox" rows="12"></textarea>
+            <div id="details-box" class="outputbox"></div>
           </div>
         </div>
 
diff --git a/ncp-web/ncp.css b/ncp-web/ncp.css
index df5dc661..f3a6496a 100644
--- a/ncp-web/ncp.css
+++ b/ncp-web/ncp.css
@@ -1308,3 +1308,10 @@ a#versionlink:hover {
  height:1px;
  overflow:hidden
 }
+
+#details-box {
+  background-color: #fbfbfb;
+  border: solid 1px lightgray;
+  color: #565656;
+  overflow: auto;
+}
diff --git a/ncp-web/ncp.js b/ncp-web/ncp.js
index 6ef408fa..2d82c91f 100644
--- a/ncp-web/ncp.js
+++ b/ncp-web/ncp.js
@@ -27,6 +27,26 @@ function switch_to_section( name )
   selectedID = null;
 }
 
+function open_menu()
+{
+  if ( $('#app-navigation').get('$width') != '250px' )
+  {
+    $('#overlay').show();
+    $('#overlay').on('|click', close_menu );
+    $('#app-navigation').animate( {$width: '250px'}, 150 );
+  }
+}
+
+function close_menu()
+{
+  if ( $('#app-navigation').get('$width') == '250px' )
+  {
+    $('#app-navigation').animate( {$width: '0px'}, 150 );
+    $('#overlay').hide();
+    $.off( close_menu );
+  }
+}
+
 function set_sidebar_click_handlers()
 {
   // Show selected option configuration box
@@ -108,9 +128,9 @@ $(function()
         return;
       }
 
-      var textarea = $('#details-box');
-      textarea.fill( textarea.text() + e.data + '\n' );
-      textarea[0].scrollTop = textarea[0].scrollHeight;
+      var box = $$('#details-box');
+      $('#details-box').ht( box.innerHTML + e.data + '<br>' );
+      box.scrollTop = box.scrollHeight;
     }, false);
 
   set_sidebar_click_handlers();
@@ -147,8 +167,8 @@ $(function()
     // reset box
     $('#details-box').fill();
     $('#details-box').show();
-    $('#details-box').set( {$height: '0px'} );
-    $('#details-box').animate( {$height: '500px'}, 150 );
+    $('#details-box').set( {$height: '0vh'} );
+    $('#details-box').animate( {$height: '50vh'}, 150 );
     $('#circle-retstatus').hide();
 
     $( 'input' , '#config-box-wrapper' ).set('@disabled',true);
@@ -213,26 +233,6 @@ $(function()
 
   function hide_overlay(e) { $('#overlay').hide() }
 
-  function open_menu()
-  {
-    if ( $('#app-navigation').get('$width') != '250px' )
-    {
-      $('#overlay').show();
-      $('#overlay').on('|click', close_menu );
-      $('#app-navigation').animate( {$width: '250px'}, 150 );
-    }
-  }
-
-  function close_menu()
-  {
-    if ( $('#app-navigation').get('$width') == '250px' )
-    {
-      $('#app-navigation').animate( {$width: '0px'}, 150 );
-      $('#overlay').hide();
-      $.off( close_menu );
-    }
-  }
-
   function close_menu_on_click_out(e) { close_menu(); }
 
   function enable_slide_menu()