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

Merge branch 'feature/cssdynamic' of /var/lib/git/repositories/manuel/uhr into develop

This commit is contained in:
Manuel Friedli 2013-11-30 19:30:34 +01:00
parent 46eef92c4a cc7c805168
commit acc2c780b2
3 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -37,7 +37,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
new Uhr($('#uhr'), { new Uhr($('#uhr'), {
layout: 'de_CH', layout: 'de_CH',
theme: 'black', theme: 'black',
status: 'on' status: 'on',
width: '20em'
}); });
</script> </script>
</body> </body>

29
uhr.css
View File

@ -20,11 +20,8 @@ body {
font-family: 'Uhrenfont', sans-serif; font-family: 'Uhrenfont', sans-serif;
} }
.uhr { .uhr {
padding: 3em;
position: relative; position: relative;
margin: 0; margin: 0;
width: 40em;
height: 40em;
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.uhr .reflection { .uhr .reflection {
@ -42,11 +39,12 @@ body {
.uhr .letterarea { .uhr .letterarea {
display: block; display: block;
position: absolute; position: absolute;
top: 5em; top: 12%;
bottom: 5em; bottom: 12%;
left: 5em; left: 12%;
right: 5em; right: 12%;
overflow: hidden; overflow: hidden;
font-size: 200%;
} }
.item { .item {
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s; transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
@ -64,20 +62,20 @@ body {
box-shadow: 0 0 0.2em #eee; box-shadow: 0 0 0.2em #eee;
} }
.dot1 { .dot1 {
top: 1.5em; top: 3.75%;
left: 1.5em; left: 3.75%;
} }
.dot2 { .dot2 {
top: 1.5em; top: 3.75%;
right: 1.5em; right: 3.75%;
} }
.dot3 { .dot3 {
bottom: 1.5em; bottom: 3.75%;
right: 1.5em; right: 3.75%;
} }
.dot4 { .dot4 {
bottom: 1.5em; bottom: 3.75%;
left: 1.5em; left: 3.75%;
} }
.letter { .letter {
height: 10%; height: 10%;
@ -86,7 +84,6 @@ body {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 2.2em;
line-height: 160%; line-height: 160%;
} }
.letter.active { .letter.active {

16
uhr.js
View File

@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
return hour; return hour;
} }
Uhr.prototype.initHTMLElements = function(clockarea, presets) { Uhr.prototype.initHTMLElements = function(clockarea, presets) {
this.createHTMLElements(clockarea); this.createHTMLElements(clockarea, presets.width);
var force = presets.force || false; var force = presets.force || false;
this.initToggleSwitch(presets.status, force); this.initToggleSwitch(presets.status, force);
this.initLayoutSwitch(presets.layout, force); this.initLayoutSwitch(presets.layout, force);
this.initThemeSwitch(presets.theme, force); this.initThemeSwitch(presets.theme, force);
} }
Uhr.prototype.createHTMLElements = function(clockarea) { Uhr.prototype.createHTMLElements = function(clockarea, width) {
this.createClockarea(clockarea) this.createClockarea(clockarea, width)
this.letterarea = this.clockarea.find('.letterarea'); this.letterarea = this.clockarea.find('.letterarea');
this.createToggleSwitch(); this.createToggleSwitch();
this.createLayoutSwitch(); this.createLayoutSwitch();
this.createThemeSwitch(); this.createThemeSwitch();
} }
Uhr.prototype.createClockarea = function(clockarea) { Uhr.prototype.createClockarea = function(clockarea, width) {
clockarea.addClass('uhr'); clockarea.addClass('uhr');
clockarea.empty(); clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>'); clockarea.append('<span class="item dot dot1"></span>');
@ -163,6 +163,14 @@ Uhr.prototype.createClockarea = function(clockarea) {
clockarea.append('<span class="item dot dot4"></span>'); clockarea.append('<span class="item dot dot4"></span>');
clockarea.append('<div class="letterarea"></div>'); clockarea.append('<div class="letterarea"></div>');
clockarea.append('<div class="reflection"></div>'); clockarea.append('<div class="reflection"></div>');
if(width == undefined) {
width = '100%';
}
clockarea.css('width', width);
var realWidth = clockarea.width()
clockarea.width(realWidth);
clockarea.height(realWidth);
clockarea.css('font-size', (realWidth / 40) + 'px');
this.clockarea = clockarea this.clockarea = clockarea
} }
Uhr.prototype.createToggleSwitch = function() { Uhr.prototype.createToggleSwitch = function() {