Merge branch 'feature/redo-controls-layout' into 'develop'

Feature/redo controls layout

This MR should fix #9 .

See merge request !29

css/uhr.css

@@ -211,46 +211,29 @@ a.uhr-configlink {
     height: 24px;
     display: inline-block;
     margin: 2px;
+    vertical-align: top;
 }
 
 .uhr-controlpanel {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-}
-
-@media (max-width: 400px) {
-    .uhr-controlpanel .content {
-        height: 100%;
-    }
-}
-
-@media (min-width: 401px) {
-    .uhr-controlpanel .content {
-        margin-left: auto;
-        margin-right: auto;
-        width: 10em;
-        top: 1em;
-        border-radius: 0.5em;
-        box-shadow: 0 0 1em black;
-    }
+    border-radius: 0.5em;
+    box-shadow: 0 0 1em black;
+    background-color: #fff;
+    display: inline-block;
+    padding: 0.5em;
+    position: sticky;
+    bottom: 0;
+    margin-left: 1em;
 }
 
 .uhr-controlpanel .content {
-    background-color: #fff;
-    padding: 2em;
     position: relative;
 }
-
 a.uhr-closecontrolpanel {
     cursor: pointer;
     display: inline-block;
     position: absolute;
-    right: 3px;
-    top: 3px;
+    right: 0;
+    top: -1em;
     width: 24px;
     height: 24px;
     background: url("../resources/close.png") no-repeat;

js/uhr.js

@@ -140,8 +140,8 @@
         }
     };
     // private helper methods (not exported)
-    var showConfigScreen = function showConfigScreen() {
-        $('#uhr-controlpanel' + this.id).fadeIn('fast');
+    var toggleConfigScreen = function toggleConfigScreen() {
+        $('#uhr-controlpanel' + this.id).toggle('fast');
     };
     // set up
     var setupHTML = function setupHTML() {
@@ -158,11 +158,6 @@
         setWidth.bind(this)(this.options.width);
 
         if (this.options.controls) {
-            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
-            configlink.on('click', function() {
-                showConfigScreen.bind(this)();
-            }.bind(this));
-            e.after(configlink);
             var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
             var content = $('<div class="content"></div>');
             controlpanel.append(content);
@@ -201,11 +196,16 @@
             }
             var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
             closebutton.on('click', function() {
-                $('#uhr-controlpanel' + this.id).fadeOut('fast');
+                $('#uhr-controlpanel' + this.id).hide('fast');
             }.bind(this));
             content.append(closebutton);
             e.after(controlpanel);
             controlpanel.hide();
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
+            configlink.on('click', function() {
+                toggleConfigScreen.bind(this)();
+            }.bind(this));
+            e.after(configlink);
         }
     };
     var wireFunctionality = function wireFunctionality() {

manifest.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 6.4-SNAPSHOT 20141018-1
+# 6.4-SNAPSHOT 20141019-1
 
 css/uhr.css
 css/uhr-black.css