Retro/pcjs
Watch
1
0
Fork
You've already forked pcjs
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made sticky machine support adjustable through CSS instead of hard-coded

Browse source
This commit is contained in:
Jeff Parsons 2017-01-03 15:39:14 -08:00 • committed by Jeff Parsons
commit 82506638f8
2 changed files with 17 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
modules/shared/lib/sticky.js
View file

@ -53,18 +53,12 @@ function addStickyMachine(idMachine)
if (topMachine < 0) {
topMachine = findTop(machine);
}
machine.className = machine.className.replace(/pcjs-machine-(floating|sticky) /g, '');
if (window.pageYOffset <= topMachine) {
machine.style.position = 'relative';
machine.style.zIndex = 'auto';
machine.style.backgroundColor = '';
machine.style.paddingRight = 0;
machine.className = 'pcjs-machine-floating ' + machine.className;
if (machineSibling) machineSibling.style.paddingTop = 0;
} else {
machine.style.position = 'fixed';
machine.style.zIndex = 1;
machine.style.backgroundColor = '#404040';
machine.style.paddingRight = '16px';
machine.style.top = 0;
machine.className = 'pcjs-machine-sticky ' + machine.className;
if (machineSibling) machineSibling.style.paddingTop = machine.offsetHeight + 'px';
}
if (prevOnScroll) prevOnScroll();
@ -83,7 +77,7 @@ function addStickyMachine(idMachine)
*/
function commandMachine(idMachine, typeComponent, sCommand, sValue)
{
console.log("commandMachine('" + idMachine + "','" + typeComponent + "','" + sCommand + "','" + sValue + "')");
}
/**

14
modules/shared/templates/components.css
View file

@ -228,7 +228,19 @@
.pcjs-copyright a {
text-decoration: none;
}
.pcjs-machine-floating {
position: relative;
z-index: auto;
background-color: transparent;
padding-right: 0;
}
.pcjs-machine-sticky {
position: fixed !important;
z-index: 1 !important;
background-color: #404040 !important;
padding-right: 16px !important;
top: 0 !important;
}
@media screen and (max-width: 800px) {
.pcjs-textarea {
width: 100% !important;