better margins for thermo and progress

This commit is contained in:
Adriaan Wormgoor 2013-10-16 23:32:50 +02:00
parent b89f2385b8
commit b2191217cb
4 changed files with 92 additions and 38 deletions

View File

@ -434,8 +434,16 @@ top: 0;
PROGRESSGUAGE AND THERMOMETER SHARED STYLES PROGRESSGUAGE AND THERMOMETER SHARED STYLES
*/ */
.progressbarAppear,.thermometerAppear { .progressbarAppear {
right: 1.5% !important; /*margin-right: 1.5% !important;
*/
right: -0.5% !important;
}
.thermometerAppear {
/*margin-right: 1.5% !important;
*/
right: -6.5% !important;
} }
/* /*
@ -446,19 +454,29 @@ PROGRESS GUAGE
.progressbarCanvasContainerParent { .progressbarCanvasContainerParent {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 5px;
} }
#progressbarCanvasContainer { #progressbarCanvasContainer {
position: relative; position: relative;
width: 50%; width: 50%;
float: right; float: right;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px; /*padding: 5px 0px 5px 5px;
*/
padding: 5px;
background-color: #fff;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -50%; right: -60%;
} }
#progressbarCanvas { #progressbarCanvas {
@ -469,13 +487,6 @@ PROGRESS GUAGE
width: 100%; width: 100%;
height: auto; height: auto;
background-color: #fff; background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }
/* /*
@ -486,19 +497,28 @@ THERMOMETER
.thermometerContainerParent { .thermometerContainerParent {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 5px;
} }
#thermometerContainer { #thermometerContainer {
position: relative; position: relative;
width: 45%; width: 45%;
float: right; float: right;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -45%; right: -55%;
} }
#thermometerCanvas { #thermometerCanvas {
@ -509,13 +529,6 @@ THERMOMETER
width: 100%; width: 100%;
height: auto; height: auto;
background-color: #fff; background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }
/* /*

2
css/styles.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -98,8 +98,25 @@ $(function() {
}, 1000); }, 1000);
//*/ //*/
} }
showhideInterval = setInterval(showOrHideThermo, 2500);
}); });
var showhideInterval;
var showOrHide = false;
function showOrHideThermo() {
console.log("f:showOrHideThermo()");
if (showOrHide) {
thermometer.hide();
progressbar.hide();
} else {
thermometer.show();
progressbar.show();
}
showOrHide = !showOrHide;
}
function settingsLoaded() { function settingsLoaded() {
console.log("settingsLoaded"); console.log("settingsLoaded");
console.log("autoHeatup: ",settings["printer.heatup.enabled"]); console.log("autoHeatup: ",settings["printer.heatup.enabled"]);

View File

@ -46,9 +46,13 @@
PROGRESSGUAGE AND THERMOMETER SHARED STYLES PROGRESSGUAGE AND THERMOMETER SHARED STYLES
*/ */
.progressbarAppear, .thermometerAppear { .progressbarAppear {
// margin-right: 1.5% !important; /*margin-right: 1.5% !important;*/
right: 1.5% !important; right: -.5% !important;
}
.thermometerAppear {
/*margin-right: 1.5% !important;*/
right: -6.5% !important;
} }
@ -60,14 +64,24 @@
.progressbarCanvasContainerParent { .progressbarCanvasContainerParent {
position:relative; position:relative;
width:100%; width:100%;
padding-top: 5px;
} }
#progressbarCanvasContainer { #progressbarCanvasContainer {
position: relative; position: relative;
width: 50%; width: 50%;
float:right; float:right;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
/*padding: 5px 0px 5px 5px;*/
padding: 5px;
background-color: #fff;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -50%; right: -60%;
} }
#progressbarCanvas { #progressbarCanvas {
@ -78,13 +92,13 @@
width: 100%; width: 100%;
height: auto; height: auto;
background-color: #fff; background-color: #fff;
border: solid #000; // border: solid #000;
border-width: 2px 0 2px 2px; // border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px; // border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px; // padding: 5px 0px 5px 5px;
//
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); // -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); // box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }
/* /*
@ -95,14 +109,24 @@
.thermometerContainerParent { .thermometerContainerParent {
position:relative; position:relative;
width:100%; width:100%;
padding-top: 5px;
} }
#thermometerContainer { #thermometerContainer {
position: relative; position: relative;
width: 45%; width: 45%;
float: right; float: right;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -45%; right: -55%;
} }
#thermometerCanvas { #thermometerCanvas {
@ -113,13 +137,13 @@
width: 100%; width: 100%;
height: auto; height: auto;
background-color: #fff; background-color: #fff;
border: solid #000; // border: solid #000;
border-width: 2px 0 2px 2px; // border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px; // border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px; // padding: 5px 0px 5px 5px;
//
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); // -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35); // box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }