[JENKINS-25971] use css only to size left and right panels

Was using JS to size panels. This change only effects screens > 768px. Less than 768px is responsive.

core/src/main/resources/lib/layout/layout.jelly

@@ -217,9 +217,9 @@ ${h.initPageVariables(context)}
       </l:breadcrumbBar>
     </div>
 
-    <div id="page-body" class="container-fluid">
+    <div id="page-body">
       <div class="row">
-        <div id="side-panel" class="col-sm-9 col-md-7 col-lg-6 col-xlg-4">
+        <div id="side-panel">
           <div id="side-panel-content">
             <j:set var="mode" value="side-panel" />
             <d:invokeBody />
@@ -237,7 +237,7 @@ ${h.initPageVariables(context)}
           </div>
         </div>
 
-        <div id="main-panel" class="col-sm-15 col-md-17 col-lg-18 col-xlg-20">
+        <div id="main-panel">
           <div id="main-panel-content">
             <j:set var="mode" value="main-panel" />
             <d:invokeBody/>

war/src/main/webapp/css/style.css

@@ -79,6 +79,18 @@ body {
   padding: 0px;
 }
 
+.fixedGridLayout #side-panel {
+  float:left;
+  position: fixed;
+  width: 360px;
+  margin-left: 15px;
+}
+
+.fixedGridLayout #main-panel {
+  margin-left: 370px;
+  margin-right: 15px;
+}
+
 #side-panel-content, #main-panel-content {
   margin: 15px
 }

war/src/main/webapp/scripts/hudson-behavior.js

@@ -2017,7 +2017,6 @@ Element.observe(document, 'dom:loaded', function(){
         return;
     }
 
-    var fixedSidePanelWidth = 360;
     var pageBody = $('page-body');
     var sidePanel = $(pageBody).getElementsBySelector('#side-panel')[0];
     var mainPanel = $(pageBody).getElementsBySelector('#main-panel')[0];
@@ -2025,11 +2024,15 @@ Element.observe(document, 'dom:loaded', function(){
     function doPanelResize() {
         var pageBodyWidth = Element.getWidth(pageBody);
         if (pageBodyWidth > 768) {
-            $(sidePanel).setAttribute('style', 'width: ' + fixedSidePanelWidth + 'px;');
-            $(mainPanel).setAttribute('style', 'width: ' + (pageBodyWidth - fixedSidePanelWidth - 5) + 'px;');
+            pageBody.addClassName("fixedGridLayout");
+            pageBody.removeClassName("container-fluid");
+            sidePanel.removeClassName("col-sm-9");
+            mainPanel.removeClassName("col-sm-15");
         } else {
-            $(sidePanel).removeAttribute('style');
-            $(mainPanel).removeAttribute('style');
+            pageBody.removeClassName("fixedGridLayout");
+            pageBody.addClassName("container-fluid");
+            sidePanel.addClassName("col-sm-9");
+            mainPanel.addClassName("col-sm-15");
         }
 
         firePanelResized();