-
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${userName}
-
- |
- ${%logout}
-
-
-
-
-
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${userName}
+
+ |
+ ${%logout}
+
+
+
+
+
+
+
+
+
diff --git a/war/src/main/webapp/css/style.css b/war/src/main/webapp/css/style.css
index 1a99fc5d26c745d0f44d32b856d7a63bd93be91d..02fcd373ee2afd16cbad3f377dee3aa772aea28d 100644
--- a/war/src/main/webapp/css/style.css
+++ b/war/src/main/webapp/css/style.css
@@ -74,21 +74,32 @@ body {
background-color: #f6faf2;
}
+#side-panel {
+ z-index: 1;
+}
+#main-panel {
+ z-index: 0;
+}
+
#side-panel, #main-panel {
- margin: 0px 0px 40px 0px;
+ margin: 0px;
padding: 0px;
}
+.fixedGridLayout #side-panel, .fixedGridLayout #main-panel {
+ position: absolute;
+}
+
.fixedGridLayout #side-panel {
float:left;
- position: fixed;
width: 360px;
margin-left: 15px;
}
.fixedGridLayout #main-panel {
- margin-left: 370px;
+ padding-left: 370px;
margin-right: 15px;
+ width: 100%
}
#side-panel-content, #main-panel-content {
@@ -112,8 +123,6 @@ body {
}
#footer-container {
- position: absolute;
- bottom: 0;
width: 100%;
padding: 10px 0px;
border-top: 1px solid #d3d7cf;
diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
index 604e6a0b19c34f3da3ed3b44487ccf20470c7bef..53a7977ef0980d3e595708e8666686e7501db988 100644
--- a/war/src/main/webapp/scripts/hudson-behavior.js
+++ b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1931,9 +1931,6 @@ function updateBuildHistory(ajaxUrl,nBuild) {
}
window.setTimeout(updateBuilds, updateBuildsRefreshInterval);
- onPanelResize(function() {
- checkAllRowCellOverflows();
- });
onBuildHistoryChange(function() {
checkAllRowCellOverflows();
});
@@ -2005,43 +2002,68 @@ function removeZeroWidthSpaces(element) {
}
}
-function onPanelResize(handler) {
- Event.observe(window, 'jenkins:panelResized', handler);
-}
-function firePanelResized() {
- Event.fire(window, 'jenkins:panelResized');
-}
-
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 doPanelResize() {
+ 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);
- firePanelResized();
+ minPageBodyHeight = Math.max(minPageBodyHeight, sidePanelHeight);
+ minPageBodyHeight = Math.max(minPageBodyHeight, mainPanelHeight);
+
+ $(pageBody).setStyle({'min-height': minPageBodyHeight + 'px'});
+ $(sidePanel).setStyle({'min-height': minPageBodyHeight + 'px'});
+ $(mainPanel).setStyle({'min-height': minPageBodyHeight + 'px'});
}
- doPanelResize();
- Event.observe(window, 'resize', function() {
- doPanelResize();
- });
+ 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'
@@ -2053,6 +2075,44 @@ function getStyle(e,a){
return null;
}
+function ElementResizeTracker() {
+ this.trackedElements = [];
+
+ if(isRunAsTest) {
+ return;
+ }
+
+ var thisTracker = this;
+ function checkForResize() {
+ for (var i = 0; i < thisTracker.trackedElements.length; i++) {
+ var element = thisTracker.trackedElements[i];
+ var currDims = Element.getDimensions(element);
+ var lastDims = element.lastDimensions;
+ if (currDims.width !== lastDims.width || currDims.height !== lastDims.height) {
+ Event.fire(element, 'jenkins:resize');
+ }
+ element.lastDimensions = currDims;
+ }
+ setTimeout(checkForResize, 200);
+ }
+ checkForResize();
+}
+ElementResizeTracker.prototype.addElement = function(element) {
+ for (var i = 0; i < this.trackedElements.length; i++) {
+ if (this.trackedElements[i] === element) {
+ // we're already tracking it so no need to add it.
+ return;
+ }
+ }
+ this.trackedElements.push(element);
+}
+ElementResizeTracker.prototype.onResize = function(element, handler) {
+ element.lastDimensions = Element.getDimensions(element);
+ Event.observe(element, 'jenkins:resize', handler);
+ this.addElement(element);
+}
+var elementResizeTracker = new ElementResizeTracker();
+
/**
* Makes sure the given element is within the viewport.
*