diff --git a/controllers/controller.js b/controllers/controller.js index c785d53..be4510c 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -14,6 +14,11 @@ var Controller = function() { this.name(this.propertyName); this.domElement.appendChild(this.propertyNameElement); + this.timeElement = document.createElement('div'); + this.timeElement.setAttribute('class', 'guidat-time'); + this.domElement.appendChild(this.timeElement); + + GUI.makeUnselectable(this.domElement); }; diff --git a/gui.css b/gui.css index d33d588..c48caa1 100644 --- a/gui.css +++ b/gui.css @@ -1,10 +1,10 @@ #guidat { position: fixed; - top: 0; - right: 0; - width: auto; + bottom: 0; + width: 100%; + left: 0; + z-index: 1001; - text-align: right; } .guidat * { @@ -12,13 +12,21 @@ margin: 0px; } +.guidat-time { +width: 75%; +float: right; +margin-top: -3px; +margin-right: -2px; +margin-left: 3px; +background-color: #555; +border-bottom: 1px solid #666; +height: 31px; +} + .guidat { color: #fff; opacity: 0.97; text-align: left; - float: right; - margin-right: 20px; - margin-bottom: 20px; background-color: #fff; } @@ -105,7 +113,7 @@ a.guidat-toggle:hover { border: 0; color: #1ed36f; margin-right: 2px; -width: 148px; + width: 10.5%; } .guidat-controller.boolean { @@ -117,7 +125,7 @@ width: 148px; } .guidat-controller.number input[type=text] { - width: 35px; + width: 3%; margin-left: 5px; margin-right: 2px; color: #00aeff; @@ -157,7 +165,7 @@ width: 148px; .guidat-slider-bg { background-color: #222; cursor: ew-resize; - width: 40%; + width: 7%; margin-top: 2px; float: right; height: 21px; diff --git a/gui.js b/gui.js index 326ed84..cb9cffd 100644 --- a/gui.js +++ b/gui.js @@ -23,7 +23,6 @@ var GUI = function() { var _this = this; var open = false; - var width = 280; // Prevents checkForOverflow bug in which loaded gui appearance // settings are not respected by presence of scrollbar. @@ -37,7 +36,7 @@ var GUI = function() { this.domElement = document.createElement('div'); this.domElement.setAttribute('class', 'guidat'); - this.domElement.style.width = width+'px'; + this.domElement.style.width = "100%";//width+'px'; var controllerContainer = document.createElement('div'); controllerContainer.setAttribute('class', 'guidat-controllers'); @@ -112,7 +111,7 @@ var GUI = function() { curControllerContainerHeight += dmy; controllerContainer.style.height = openHeight+'px'; width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); - _this.domElement.style.width = width+'px'; + //_this.domElement.style.width = width+'px'; checkForOverflow(); }; @@ -444,7 +443,7 @@ var GUI = function() { width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]); - _this.domElement.style.width = width+"px"; + //_this.domElement.style.width = width+"px"; openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]); explicitOpenHeight = true; diff --git a/index.html b/index.html index 00632bf..783b71f 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,10 @@ var fizzyText = new FizzyText("gui-dat"); var gui = new GUI(); - var gui2 = new GUI(); - + // Text field gui.add(fizzyText, "message"); - gui2.add(window, "onload"); // Sliders with min and max gui.add(fizzyText, "maxSize", 0.5, 7);