Merge pull request #1717 from recena/master

[JENKINS-28550] Unwanted effect rendering the pages

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

@@ -227,52 +227,45 @@ ${h.initPageVariables(context)}
     </div>
 
     <div id="page-body">
-      <div class="row">
-        <div id="side-panel">
-          <div id="side-panel-content">
-            <j:set var="mode" value="side-panel" />
-            <d:invokeBody />
+      <div id="side-panel">
+        <j:set var="mode" value="side-panel" />
+        <d:invokeBody />
+  
+        <!-- add YUI logger if debugging YUI -->
+        <j:if test="${h.yuiSuffix=='debug'}">
+        <div id="yui-logreader" style="margin-top:1em"/>
+          <script>
+            Behaviour.addLoadEvent(function(){
+              var logReader = new YAHOO.widget.LogReader("yui-logreader");
+              logReader.collapse();
+            });
+          </script>
+        </j:if>
+      </div>
+      <div id="main-panel">
+         <j:set var="mode" value="main-panel" />
+         <d:invokeBody/>
+      </div>
+    </div>
 
-            <!-- add YUI logger if debugging YUI -->
-            <j:if test="${h.yuiSuffix=='debug'}">
-              <div id="yui-logreader" style="margin-top:1em"/>
-              <script>
-                Behaviour.addLoadEvent(function(){
-                  var logReader = new YAHOO.widget.LogReader("yui-logreader");
-                  logReader.collapse();
-                });
-              </script>
+    <footer>
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-md-6" id="footer"></div>
+          <div class="col-md-18">
+            <span class="page_generated">${%Page generated}: <i:formatDate value="${h.getCurrentTime()}" type="both" dateStyle="medium" timeStyle="medium"/></span>
+            <span class="rest_api"><a href="api/">REST API</a></span>
+            <span class="jenkins_ver"><a href="${h.getFooterURL()}">Jenkins ver. ${h.version}</a></span>
+            <j:if test="${extensionsAvailable}">
+            <j:forEach var="pd" items="${h.pageDecorators}">
+              <st:include it="${pd}" page="footer.jelly" optional="true" />
+            </j:forEach>
             </j:if>
           </div>
         </div>
-
-        <div id="main-panel">
-          <div id="main-panel-content">
-            <j:set var="mode" value="main-panel" />
-            <d:invokeBody/>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="footer-container" class="hidden-xs">
-      <div id="footer">
-        <span class="page_generated">
-          ${%Page generated}:
-          <i:formatDate value="${h.getCurrentTime()}" type="both" dateStyle="medium" timeStyle="medium"/>
-        </span>
-        <span class="rest_api">
-          <a href="api/">REST API</a>
-        </span>
-        <span class="jenkins_ver">
-          <a href="${h.getFooterURL()}">Jenkins ver. ${h.version}</a>
-        </span>
-        <j:if test="${extensionsAvailable}">
-        <j:forEach var="pd" items="${h.pageDecorators}">
-          <st:include it="${pd}" page="footer.jelly" optional="true" />
-        </j:forEach>
-        </j:if>
       </div>
-    </div>
+    </footer>
+
   </body>
 </html>
 </j:jelly>

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

@@ -75,68 +75,77 @@ body {
 }
 
 #side-panel {
-  z-index: 1;
+  padding: 15px 15px 80px 15px;
+  float: left;
+  width: 320px;
 }
+
 #main-panel {
-  z-index: 0;
+  padding: 15px 15px 80px 15px;
+  margin-left: 320px;
 }
 
-#side-panel, #main-panel {
-  margin: 0px;
-  padding: 0px;
-}
+@media (max-width: 750px) {
+  #side-panel {
+    width: 100%;
+    float: none;
+    padding-bottom: 20px;
+  }
 
-.fixedGridLayout #side-panel, .fixedGridLayout #main-panel {
-  position: absolute;
+  #main-panel {
+    margin-left: 0;
+    width: 100%;
+  }
 }
 
-.fixedGridLayout #side-panel {
-  float:left;
-  width: 360px;
-  margin-left: 15px;
-}
+@media (min-width: 1170px) {
+  #side-panel {
+    width: 360px;
+  }
 
-.fixedGridLayout #main-panel {
-  padding-left: 370px;
-  margin-right: 15px;
-  width: 100%
+  #main-panel {
+    margin-left: 360px;
+  }
 }
 
-#side-panel-content, #main-panel-content {
-  margin: 15px
-}
+/* task */
 
 #tasks {
   margin-bottom: 20px;
 }
 
-#side-panel-content .pane-frame {
-  margin-bottom: 15px;
+#tasks .task {
+  margin-bottom: 4px;
+  font-size: 14px;
+  white-space: nowrap;
 }
 
-#side-panel-content .task {
-  margin-bottom: 3px;
-}
-#side-panel-content .task-link {
-  font-size: 1.1em;
-  vertical-align: middle;
+/* buildQueue */
+
+#buildQueue {
+  margin-bottom: 20px;
 }
 
-#footer-container {
-  width: 100%;
-  padding: 10px 0px;
+/* footer */
+
+footer {
+  padding: 10px 0;
+  background-color: #f6faf2;
   border-top: 1px solid #d3d7cf;
-}
-#footer {
-  margin: 0px 15px 0px 15px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 12px;
   text-align: right;
-  font-size: 8pt;
 }
 
-#footer span {
+footer span {
   margin-left: 15px;
+  line-height: 14px;
 }
 
+
 /* Fonts etc */
 
 body, table, form, input, td, th, p, textarea, select
@@ -150,7 +159,7 @@ body, table, form, td, th, p
   color: #333;
 }
 
-FORM {
+form {
   margin: 0;
 }
 
@@ -387,7 +396,6 @@ pre.console {
 /* tabBar */
 
 .tabBar {
-  clear: both;
   overflow: auto;
   position: relative;
   top: 1px;
@@ -492,11 +500,6 @@ pre.console {
 .main-table {
 }
 
-div.dashboard {
-  width: 100%;
-  clear:both;
-}
-
 /* pane */
 
 .pane-frame {

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

@@ -1932,6 +1932,8 @@ function updateBuildHistory(ajaxUrl,nBuild) {
             window.setTimeout(updateBuilds, updateBuildsRefreshInterval);
         }
     }
+
+    checkAllRowCellOverflows();
     window.setTimeout(updateBuilds, updateBuildsRefreshInterval);
 
     onBuildHistoryChange(function() {
@@ -2046,70 +2048,6 @@ function removeZeroWidthSpaces(element) {
     }
 }
 
-Element.observe(document, 'dom:loaded', function(){
-    if(isRunAsTest) {
-        return;
-    }
-
-    var pageHead = $('page-head');
-    var pageBody = $('page-body');
-    var sidePanel = $(pageBody).getElementsBySelector('#side-panel')[0];
-    var sidePanelContent = $(sidePanel).getElementsBySelector('#side-panel-content')[0];
-    var mainPanel = $(pageBody).getElementsBySelector('#main-panel')[0];
-    var mainPanelContent = $(mainPanel).getElementsBySelector('#main-panel-content')[0];
-    var pageFooter = $('footer-container');
-
-    function applyFixedGridLayout() {
-        var pageBodyWidth = Element.getWidth(pageBody);
-        if (pageBodyWidth > 768) {
-            pageBody.addClassName("fixedGridLayout");
-            pageBody.removeClassName("container-fluid");
-            sidePanel.removeClassName("col-sm-9");
-            mainPanel.removeClassName("col-sm-15");
-            return true; // It's a fixedGridLayout
-        } else {
-            pageBody.removeClassName("fixedGridLayout");
-            pageBody.addClassName("container-fluid");
-            sidePanel.addClassName("col-sm-9");
-            mainPanel.addClassName("col-sm-15");
-            return false; // It's not a fixedGridLayout
-        }
-    }
-
-    function applyFixedGridHeights() {
-        var windowHeight = document.viewport.getDimensions().height;
-        var headHeight = Element.getHeight(pageHead);
-        var footerHeight = Element.getHeight(pageFooter);
-        var sidePanelHeight = Element.getHeight(sidePanel);
-        var mainPanelHeight = Element.getHeight(mainPanel);
-        var minPageBodyHeight = (windowHeight - headHeight - footerHeight);
-
-        minPageBodyHeight = Math.max(minPageBodyHeight, sidePanelHeight);
-        minPageBodyHeight = Math.max(minPageBodyHeight, mainPanelHeight);
-
-        $(pageBody).setStyle({minHeight: minPageBodyHeight + 'px'});
-        $(sidePanel).setStyle({minHeight: minPageBodyHeight + 'px'});
-        $(mainPanel).setStyle({minHeight: minPageBodyHeight + 'px'});
-    }
-
-    var doPanelLayouts = function() {
-        // remove all style
-        pageBody.removeAttribute('style');
-        sidePanel.removeAttribute('style');
-        mainPanel.removeAttribute('style');
-        if (applyFixedGridLayout()) {
-            applyFixedGridHeights();
-        }
-    }
-
-    Event.observe(window, 'resize', doPanelLayouts);
-    elementResizeTracker.onResize(sidePanelContent, doPanelLayouts);
-    elementResizeTracker.onResize(mainPanelContent, doPanelLayouts);
-
-    doPanelLayouts();
-    fireBuildHistoryChanged();
-});
-
 // get the cascaded computed style value. 'a' is the style name like 'backgroundColor'
 function getStyle(e,a){
   if(document.defaultView && document.defaultView.getComputedStyle)