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

first version of re-done config area. needs testing on mobile and other

Browse source 
browsers than firefox.
This commit is contained in:
Manuel Friedli 2014-10-19 18:25:36 +02:00
parent e9d0d57c15
commit f6904bfdd5
2 changed files with 18 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/uhr.css
View file

@ -211,46 +211,28 @@ 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;
@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() {