Skip to content

Commit 30518db

Browse files
committed
added sticky div to help with UI
1 parent d373141 commit 30518db

File tree

5 files changed

+50
-4
lines changed

5 files changed

+50
-4
lines changed

changelog.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
<!-- Record your changes in the trunk here. -->
5656
<div id="trunk" style="display:none"><!--=TRUNK-BEGIN=-->
5757
<ul class=image>
58+
<li class=rfe>
59+
Update center UI improvement. "Install" button is now always visisble.
5860
<li class=rfe>
5961
Make the matrix configuration table looks like the rest of Jenkins tables.
6062
(<a href="https://issues.jenkins-ci.org/browse/JENKINS-10251">issue 10251</a>)

core/src/main/resources/hudson/PluginManager/table.jelly

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,12 @@ THE SOFTWARE.
136136
</table>
137137

138138
<j:if test="${!empty(list)}">
139-
<div style="margin-top:1em">
140-
<f:submit value="${%Install without restart}" name="dynamicLoad" />
141-
<span style="margin-left:2em;"></span>
142-
<f:submit value="${%Download now and install after restart}" />
139+
<div id="bottom-sticker" >
140+
<div style="background:white; padding:1em">
141+
<f:submit value="${%Install without restart}" name="dynamicLoad" />
142+
<span style="margin-left:2em;"></span>
143+
<f:submit value="${%Download now and install after restart}" />
144+
</div>
143145
</div>
144146
</j:if>
145147
<d:invokeBody />

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,15 @@ LABEL.attach-previous {
469469
margin-left: 0.5em;
470470
}
471471

472+
#bottom-sticker {
473+
width: 100%; /* it needs to occupy the entire width or else the underlying content will see through */
474+
}
475+
.bottom-sticker-top-edge {
476+
height:16px;
477+
background-image: url("../images/bottom-sticker-top-edge.png");
478+
background-repeat: repeat-x;
479+
}
480+
472481
/* ======================== error/warning message (mainly in the form.) Use them on block elements ======================== */
473482
.error {
474483
color: #CC0000;
Loading

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1233,6 +1233,39 @@ var hudsonRules = {
12331233
$(hidePreview).hide();
12341234
$(previewDiv).hide();
12351235
};
1236+
},
1237+
1238+
/*
1239+
Use on div tag to make it sticky visible on the bottom of the page.
1240+
When page scrolls it remains in the bottom of the page
1241+
Convenient on "OK" button and etc for a long form page
1242+
*/
1243+
"#bottom-sticker" : function(sticker) {
1244+
var DOM = YAHOO.util.Dom;
1245+
1246+
var shadow = document.createElement("div");
1247+
sticker.parentNode.insertBefore(shadow,sticker);
1248+
1249+
var topedge = document.createElement("div");
1250+
topedge.className = "bottom-sticker-top-edge";
1251+
sticker.insertBefore(topedge,sticker.firstChild);
1252+
1253+
function adjustSticker() {
1254+
shadow.style.height = sticker.offsetHeight + "px";
1255+
1256+
var viewport = DOM.getClientRegion();
1257+
var pos = DOM.getRegion(shadow);
1258+
1259+
sticker.style.position = "fixed";
1260+
sticker.style.bottom = Math.max(0, viewport.bottom - pos.bottom) + "px"
1261+
}
1262+
1263+
// react to layout change
1264+
Element.observe(window,"scroll",adjustSticker);
1265+
Element.observe(window,"resize",adjustSticker);
1266+
// initial positioning
1267+
Element.observe(window,"load",adjustSticker);
1268+
adjustSticker();
12361269
}
12371270
};
12381271

0 commit comments

Comments
 (0)