dividers for requests/detail panels

rails_panel/assets/javascripts/dividers.js

@@ -0,0 +1,92 @@
+var dividers = {
+
+  init: function() {
+    that = this;
+    this.initHorizontalDivider();
+    this.initVerticalDivider();
+    window.onresize = function(e) {
+      if (window.innerWidth > 1050) {
+        if ($('.split-view').data('layout') == 'horizontal') { 
+          $('.split-view-contents-requests').css({'width': '681px', 'height': '100%'});
+          $('.split-view-contents-details').css({'left': '680px', 'top':'0'});
+        }
+        $('.split-view').data('layout', 'vertical');
+      } else {
+        if ($('.split-view').data('layout') == 'vertical') { 
+          $('.split-view-contents-requests').css({'width': '100%', 'bottom': '50%', 'height': '50%'});
+          $('.split-view-contents-details').css({'left': '0', 'top':'50%'});
+        }
+        $('.split-view').data('layout', 'horizontal');
+      }
+    }
+  },
+
+  initVerticalDivider: function() {
+    that = this;
+    $(document).on('mousedown', '#vdivider', function(e) {
+      e.originalEvent.preventDefault(); // http://stackoverflow.com/a/9743380
+      $(this).data('p0', { x: e.pageX, y: e.pageY });
+    });
+    $(document).on('mousemove', function(e) {
+      var p0 = $('#vdivider').data('p0');
+      if (p0 !== undefined) {
+        that.resizeVerticalLayout(e);
+      }
+    });
+    $(document).on('mouseup', function(e) {
+      $('#vdivider').removeData();
+    });
+  },
+
+  initHorizontalDivider: function() {
+    that = this;
+    $(document).on('mousedown', '#hdivider', function(e) {
+      $(this).data('p0', { x: e.pageX, y: e.pageY });
+    });
+    $(document).on('mousemove', function(e) {
+      var p0 = $('#hdivider').data('p0');
+      if (p0 !== undefined) {
+        that.resizeHorizonalLayout(e);        
+      }
+    });
+    $(document).on('mouseup', function(e) {
+      $('#hdivider').removeData();
+    });
+  },
+
+  resizeVerticalLayout: function(e) {
+    var p0 = $('#vdivider').data('p0');
+    var p1 = { x: e.pageX};
+    var dx = p1.x - p0.x;
+
+    var currentWidth = $('.split-view-contents-requests').width();
+    var newWidth = currentWidth + dx;
+    var currentLeft = $('.split-view-contents-details').position().left;
+    if (newWidth < 462) {
+      newWidth = 462;
+    }
+    if (newWidth + 365 > window.innerWidth) {
+      newWidth = window.innerWidth - 365;
+    }
+    $('.split-view-contents-requests').width(newWidth);
+    $('.split-view-contents-details').css({'left': newWidth - 1 + 'px'});
+    $('#vdivider').data('p0', { x: newWidth });   
+  },
+
+  resizeHorizonalLayout: function(e) {
+    var p0 = $('#hdivider').data('p0');
+    var p1 = { y: e.pageY};
+    var dy = p1.y - p0.y;
+    var top = $('.split-view-contents-details').position().top + dy;
+    if (top < 88) {
+      top = 88;
+    }
+    if (window.innerHeight - top < 100) {
+      top = window.innerHeight - 100;
+    }
+    $('.split-view-contents-requests').css({'height':top + 'px'});
+    $('.split-view-contents-details').css({'top':top + 'px'});
+    $('#hdivider').data('p0', { y: top });   
+  }
+
+}

rails_panel/assets/javascripts/panel.js

@@ -17,10 +17,18 @@ clearData = function(scope) {
   });
 }
 
-$(function() {
+var panel = {
+
+  init: function() {
+    $('#tabs').tabs();
+    $('.stupidtable').stupidtable(); 
+    dividers.init();
+  },
 
-  $('#tabs').tabs();
-  $('.stupidtable').stupidtable(); 
+}
+
+$(function() {
+  panel.init();
 
   var scope = angular.element('.split-view').scope();
   new TransactionsCtrl(scope);

rails_panel/assets/stylesheets/panel.css

@@ -11,6 +11,11 @@
   bottom: 0;
 }
 
+#tabs, table, tbody, tr, th, .data-grid {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+}  
+
 .data-grid table {
   table-layout: fixed;
   border-spacing: 0;
@@ -157,7 +162,7 @@ table.header th {
 }
 
 
-@media screen and (max-width: 1039px) {
+@media screen and (max-width: 1050px) {
   .split-view-contents-requests {
     left: 0px;
     width: 680px;
@@ -169,22 +174,55 @@ table.header th {
     top:50%;
     width:100%;
   }
+
+  #hdivider {
+    background: #eee;
+    border-top: 1px solid #A3A3A3;
+    height: 3px;
+    cursor: ns-resize;
+  }
+
+  #vdivider {
+    display: none;
+  }
 }
 
-@media screen and (min-width: 1040px) {
+@media screen and (min-width: 1051px) {
   .split-view-contents-requests {
     bottom: none;
+    height: 100%;
     left: 0px;
-    width: 680px;
-    border-right: 1px solid #fff;
+    width: 681px;
   }
 
   .split-view-contents-details {
-    top:none;
+    top:0px;
+    height:auto;
     right: 0px;
     left: 680px;
     width: auto;
+    min-width: 365px;
+  }
+
+  #hdivider {
+    display:none;
   }
+
+  #vdivider {
+    background: #fff;
+    border-right: 1px solid rgb(179, 179, 179);
+    width: 1px;
+    float: left;
+    height: 100%;
+    cursor: ew-resize;
+  }
+
+  .data-grid table th.duration {
+    border-right: none;
+    width: 51px;
+  }
+
+
 }
 
 .tabbed-pane {
@@ -292,3 +330,4 @@ table#requests tr.selected {
   padding: 1px 5px;
   display: none;
 }
+

rails_panel/panel.html

@@ -13,6 +13,7 @@
     <script src="assets/javascripts/filters.js"></script>
     <script src="assets/javascripts/transactions.js"></script>
     <script src="assets/javascripts/development.js"></script>
+    <script src="assets/javascripts/dividers.js"></script>
     <script src="assets/javascripts/panel.js"></script>
   </head>
   <body>
@@ -59,12 +60,13 @@
           </div>
         </div>
       </div>
-
       <div class="split-view-contents split-view-contents-details">
         <div id="message-box">
           You are using outdated version of meta_request gem. Please upgrade the gem.
         </div>
+        <div id="vdivider"></div>
         <div id="tabs" class="tabbed-pane">
+          <div id="hdivider"></div>
           <div class="tabbed-pane-header">
             <div class="tabbed-pane-header-contents">
               <ul class="tabbed-pane-header-tabs">