changeset 3132:38d2150045f5

#286 reformatted the horizontal sliders to use grids

--- a/css/core.css	Thu Feb 21 12:01:34 2019 +0000
+++ b/css/core.css	Thu Feb 21 12:55:05 2019 +0000
@@ -221,6 +221,7 @@
     float: left;
     margin: 0px;
     padding: 0px;
+    background-color: rgba(0,0,0,0);
 }
 span#master-volume-feedback {
     height: 25px;

--- a/interfaces/horizontal-sliders.css	Thu Feb 21 12:01:34 2019 +0000
+++ b/interfaces/horizontal-sliders.css	Thu Feb 21 12:55:05 2019 +0000
@@ -1,6 +1,6 @@
 /*
  * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own!
- * 
+ *
  */
 
 body {
@@ -51,19 +51,18 @@
     border: solid;
     border-width: 1px;
     border-color: black;
-    padding: 2px;
     margin-left: 94px;
     margin-bottom: 25px;
+    display: grid;
+    grid-template-columns: 113px 1fr 107px;
 }
 div.track-slider-title {
-    float: left;
-    padding-top: 40px;
-    width: 100px;
+    padding-top: 30px;
 }
 button.track-slider-button {
-    float: left;
-    width: 100px;
-    height: 94px;
+    width: 90px;
+    height: 74px;
+    margin: 10px;
 }
 div#outside-reference-holder {
     display: flex;
@@ -78,14 +77,11 @@
 div.track-slider-playing {
     background-color: rgba(255, 201, 201, 0.5);
 }
-input.track-slider-range {
-    float: left;
-    margin: 2px 10px;
-}
 input[type=range] {
     height: 94px;
     padding: 0px;
     color: rgb(255, 144, 144);
+    background-color: rgba(0,0,0,0);
 }
 input[type=range]::-webkit-slider-runnable-track {
     cursor: pointer;

--- a/interfaces/horizontal-sliders.js	Thu Feb 21 12:01:34 2019 +0000
+++ b/interfaces/horizontal-sliders.js	Thu Feb 21 12:55:05 2019 +0000
@@ -257,16 +257,18 @@
 
     this.holder = document.createElement('div');
     this.title = document.createElement('div');
+    this.titleH4 = document.createElement('h4');
     this.slider = document.createElement('input');
     this.play = document.createElement('button');
 
     this.holder.className = 'track-slider';
     this.holder.style.width = window.innerWidth - 200 + 'px';
+    this.title.appendChild(this.titleH4);
     this.holder.appendChild(this.title);
     this.holder.appendChild(this.slider);
     this.holder.appendChild(this.play);
     this.holder.setAttribute('trackIndex', audioObject.id);
-    this.title.textContent = label;
+    this.titleH4.textContent = label;
     this.title.className = 'track-slider-title';
 
     this.slider.type = "range";
@@ -274,7 +276,6 @@
     this.slider.min = "0";
     this.slider.max = "1";
     this.slider.step = "0.01";
-    this.slider.style.width = window.innerWidth - 420 + 'px';
     this.slider.onchange = function () {
         var time = audioEngineContext.timer.getTestTime();
         var id = Number(this.parentNode.getAttribute('trackIndex'));
@@ -299,7 +300,6 @@
     };
     this.resize = function (event) {
         this.holder.style.width = window.innerWidth - 200 + 'px';
-        this.slider.style.width = window.innerWidth - 420 + 'px';
     };
     this.enable = function () {
         // This is used to tell the interface object that playback of this node is ready
@@ -376,7 +376,6 @@
 
     var numObj = document.getElementsByClassName('track-slider').length;
     var totalHeight = (numObj * 125) - 25;
-    document.getElementById('scale-holder').style.width = window.innerWidth - 220 + 'px';
     // Cheers edge for making me delete a canvas every resize.
     var canvas = document.getElementById('scale-canvas');
     var new_canvas = document.createElement("canvas");