add jquery ui for resize function

localjo · localjo · commit 7658148d43bd · 2014-07-11T16:29:01.000-04:00
diff --git a/bower.json b/bower.json
@@ -28,7 +28,8 @@
   "dependencies": {
     "bootstrap": "~3.2.0",
     "Inspector-JSON": "SparkartGroupInc/Inspector-JSON#e6bec9fe4cc7551cd46f44bafed6891620a5e47d",
-    "bootstrap-vertical-tabs": "~1.1.0"
+    "bootstrap-vertical-tabs": "~1.1.0",
+    "jquery.ui": "~1.11.0"
   },
   "resolutions": {
     "bootstrap": "~3.2.0"
diff --git a/views/devpanel.css b/views/devpanel.css
@@ -65,10 +65,14 @@ pre.scroll-panel {
 .sidetab-column {
   height: 100%;
   padding: 0;
-  position: static;
   border-right: 1px solid #a3a3a3;
   background: #e8e8e8;
   width: 200px;
+  max-width: 90%;
+}
+
+.ui-resizable-e {
+  cursor: ew-resize;
 }
 
 .nav-tabs>li>a {
diff --git a/views/devpanel.html b/views/devpanel.html
@@ -1,7 +1,11 @@
 <!doctype html>
 <html>
 <head>
+
+  <link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
+
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
+  <script src="../bower_components/jquery-ui/jquery-ui.js"></script>
   <script src="../node_modules/socket.io-client/socket.io.js"></script>
   <script src="devpanel.js"></script>
   <script src="../bower_components/Inspector-JSON/inspector-json.js"></script>
@@ -13,7 +17,7 @@
   <link href="devpanel.css" media="all" rel="stylesheet" type="text/css">
 </head>
 <body>
-  <div class="sidetab-column col-xs-3">
+  <div class="sidetab-column col-xs-3" id="sidePanel">
     <ul class="nav nav-tabs tabs-left" id="panelTabs">
       <li class="active"><a href="#context" data-toggle="tab"><span class="icon-json"></span> Context</a></li>
       <li><a href="#logs" data-toggle="tab"><span class="icon-console"></span> Logs</a></li>
diff --git a/views/devpanel.js b/views/devpanel.js
@@ -107,4 +107,5 @@ function clearLog() {
 window.onload = function() {
   var clearButton = document.querySelector('#logclear');
   clearButton.addEventListener('click', clearLog, false);
+  $('#sidePanel').resizable({ minWidth: 120, handles: 'e'});
 };
