# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1463397676 -3600
# Node ID 76a4878d0f1f05a957a06d0ce0f67a4221480d3e
# Parent  e157b2b88219c5c096c27008ed6878966be31395
Fix #4. Volume control shifts into feedback area if window.innerWidth < 1000.

diff -r e157b2b88219 -r 76a4878d0f1f css/core.css
--- a/css/core.css	Mon May 16 11:24:40 2016 +0100
+++ b/css/core.css	Mon May 16 12:21:16 2016 +0100
@@ -169,12 +169,25 @@
 	background-color: #000;
 }
 
-div#master-volume-holder {
-    width: 250px;
-    float: left;
+div.master-volume-holder-inline {
+    width: 100%;
+    padding: 5px;
+}
+
+div.master-volume-holder-float {
+    position: absolute;
+    top: 20px;
+    left: 50px;
+    width: 250px%;
+    padding: 5px;
+}
+
+div#master-volume-root {
+    margin:auto;
     border: black 1px solid;
     border-radius: 5px;
-    padding: 5px;
+    width: 250px;
+    height: 40px;
 }
 
 input#master-volume-control {
diff -r e157b2b88219 -r 76a4878d0f1f js/core.js
--- a/js/core.js	Mon May 16 11:24:40 2016 +0100
+++ b/js/core.js	Mon May 16 12:21:16 2016 +0100
@@ -1972,6 +1972,7 @@
 	this.resizeWindow = function(event)
 	{
 		popup.resize(event);
+        this.volume.resize();
 		for(var i=0; i<this.commentBoxes.length; i++)
 		{this.commentBoxes[i].resize();}
 		for(var i=0; i<this.commentQuestions.length; i++)
@@ -2569,8 +2570,11 @@
         // Volume does NOT reset to 0dB on each page load
         this.valueLin = 1.0;
         this.valueDB = 0.0;
+        this.root = document.createElement('div');
+        this.root.id = 'master-volume-root';
         this.object = document.createElement('div');
-        this.object.id = 'master-volume-holder';
+        this.object.className = 'master-volume-holder-float';
+        this.object.appendChild(this.root);
         this.slider = document.createElement('input');
         this.slider.id = 'master-volume-control';
         this.slider.type = 'range';
@@ -2613,10 +2617,18 @@
         title.style.fontSize = '0.75em';
         title.style.width = "100%";
         title.align = 'center';
-        this.object.appendChild(title);
+        this.root.appendChild(title);
         
-        this.object.appendChild(this.slider);
-        this.object.appendChild(this.valueText);
+        this.root.appendChild(this.slider);
+        this.root.appendChild(this.valueText);
+        
+        this.resize = function(event) {
+            if (window.innerWidth < 1000) {
+                this.object.className = "master-volume-holder-inline"
+            } else {
+                this.object.className = 'master-volume-holder-float';
+            }
+        }
     }
     
     this.calibrationModuleObject = null;