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

34
css/uhr.css
View file

@ -211,46 +211,28 @@ 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;
}
background-color: #fff;
display: inline-block;
padding: 0.5em;
position: sticky;
bottom: 0;
}
.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;

16
js/uhr.js
View file

@ -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() {