From cc7c8051683c10467ed6759c30d249752b451173 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sat, 30 Nov 2013 18:51:43 +0100
Subject: [PATCH] =?UTF-8?q?gr=C3=B6sse=20l=C3=A4sst=20sich=20nun=20konfigu?=
=?UTF-8?q?rieren?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 3 ++-
uhr.css | 29 +++++++++++++----------------
uhr.js | 16 ++++++++++++----
3 files changed, 27 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index 9d5f1ca..c933b22 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
new Uhr($('#uhr'), {
layout: 'de_CH',
theme: 'black',
- status: 'on'
+ status: 'on',
+ width: '20em'
});
</script>
</body>
diff --git a/uhr.css b/uhr.css
index 67a8e27..45c84e4 100644
--- a/uhr.css
+++ b/uhr.css
@@ -20,11 +20,8 @@ body {
font-family: 'Uhrenfont', sans-serif;
}
.uhr {
- padding: 3em;
position: relative;
margin: 0;
- width: 40em;
- height: 40em;
transition: background-color 0.5s;
}
.uhr .reflection {
@@ -42,11 +39,12 @@ body {
.uhr .letterarea {
display: block;
position: absolute;
- top: 5em;
- bottom: 5em;
- left: 5em;
- right: 5em;
+ top: 12%;
+ bottom: 12%;
+ left: 12%;
+ right: 12%;
overflow: hidden;
+ font-size: 200%;
}
.item {
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;
}
.dot1 {
- top: 1.5em;
- left: 1.5em;
+ top: 3.75%;
+ left: 3.75%;
}
.dot2 {
- top: 1.5em;
- right: 1.5em;
+ top: 3.75%;
+ right: 3.75%;
}
.dot3 {
- bottom: 1.5em;
- right: 1.5em;
+ bottom: 3.75%;
+ right: 3.75%;
}
.dot4 {
- bottom: 1.5em;
- left: 1.5em;
+ bottom: 3.75%;
+ left: 3.75%;
}
.letter {
height: 10%;
@@ -86,7 +84,6 @@ body {
margin: 0;
display: inline-block;
text-align: center;
- font-size: 2.2em;
line-height: 160%;
}
.letter.active {
diff --git a/uhr.js b/uhr.js
index 8980718..8a9995a 100644
--- a/uhr.js
+++ b/uhr.js
@@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
return hour;
}
Uhr.prototype.initHTMLElements = function(clockarea, presets) {
- this.createHTMLElements(clockarea);
+ this.createHTMLElements(clockarea, presets.width);
var force = presets.force || false;
this.initToggleSwitch(presets.status, force);
this.initLayoutSwitch(presets.layout, force);
this.initThemeSwitch(presets.theme, force);
}
-Uhr.prototype.createHTMLElements = function(clockarea) {
- this.createClockarea(clockarea)
+Uhr.prototype.createHTMLElements = function(clockarea, width) {
+ this.createClockarea(clockarea, width)
this.letterarea = this.clockarea.find('.letterarea');
this.createToggleSwitch();
this.createLayoutSwitch();
this.createThemeSwitch();
}
-Uhr.prototype.createClockarea = function(clockarea) {
+Uhr.prototype.createClockarea = function(clockarea, width) {
clockarea.addClass('uhr');
clockarea.empty();
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('<div class="letterarea"></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
}
Uhr.prototype.createToggleSwitch = function() {