manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

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

Browse source 
Feature/redo controls layout

This MR should fix #9 .

See merge request !29
This commit is contained in:
Manuel Friedli 2014-10-21 23:56:19 +02:00
commit ae911be61d
3 changed files with 20 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

39
css/uhr.css
View file

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

16
js/uhr.js
View file

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

2
manifest.appcache
View file

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