kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 03:39:55 +00:00
Code Issues Projects Releases Wiki Activity

Style change, sunrise fix

Browse Source
This commit is contained in:
Michael Teeuw 2014-02-27 13:51:18 +01:00
parent 0903e87178
commit cc03176782
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/main.css
View File

@ -67,6 +67,16 @@ body, html {
bottom: 50px; bottom: 50px;
} }
.xxsmall
{
font-size: 15px;
letter-spacing: 0px;
font-family: "HelveticaNeue-Medium";
}
.xxsmall .wi {
line-height: 15px;
}
.xsmall .xsmall
{ {
font-size: 20px; font-size: 20px;
@ -124,10 +134,19 @@ body, html {
margin-right: 10px; margin-right: 10px;
} }
.time .sec {
font-size: 25px;
color: #666;
padding-left: 5px;
position: relative;
top: -35px;
}
.forecast-table { .forecast-table {
float: right; float: right;
text-align: right; text-align: right;
font-size: 20px; font-size: 20px;
line-height: 20px;
} }
.forecast-table .day, .forecast-table .temp-min, .forecast-table .temp-max .forecast-table .day, .forecast-table .temp-min, .forecast-table .temp-max
{ {
@ -146,6 +165,8 @@ body, html {
} }
.calendar-table { .calendar-table {
font-size: 14px;
line-height: 20px;
margin-top: 10px; margin-top: 10px;
} }
.calendar-table .days { .calendar-table .days {

4
index.php
View File

@ -11,8 +11,8 @@
</head> </head>
<body> <body>
<div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xsmall"></div></div> <div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xxsmall"></div></div>
<div class="top right"><div class="sun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div> <div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div>
<div class="lower-third center-hor"><div class="compliment light"></div></div> <div class="lower-third center-hor"><div class="compliment light"></div></div>
<div class="bottom center-hor"><div class="news medium"></div></div> <div class="bottom center-hor"><div class="news medium"></div></div>

16
js/main.js
View File

@ -85,7 +85,7 @@ jQuery(document).ready(function($) {
$('.date').html(date); $('.date').html(date);
$('.time').html(now.toTimeString().substring(0,5)); $('.time').html(now.toTimeString().substring(0,5) + '<span class="sec">'+now.toTimeString().substring(6,8)+'</span>');
setTimeout(function() { setTimeout(function() {
updateTime(); updateTime();
@ -136,6 +136,8 @@ jQuery(document).ready(function($) {
(function updateCalendar() (function updateCalendar()
{ {
table = $('<table/>').addClass('xsmall').addClass('calendar-table'); table = $('<table/>').addClass('xsmall').addClass('calendar-table');
opacity = 1;
for (var i in eventList) { for (var i in eventList) {
var e = eventList[i]; var e = eventList[i];
@ -146,10 +148,12 @@ jQuery(document).ready(function($) {
daysString = 'vandaag'; daysString = 'vandaag';
} }
var row = $('<tr/>'); var row = $('<tr/>').css('opacity',opacity);
row.append($('<td/>').html(e.description).addClass('description')); row.append($('<td/>').html(e.description).addClass('description'));
row.append($('<td/>').html(daysString).addClass('days dimmed')); row.append($('<td/>').html(daysString).addClass('days dimmed'));
table.append(row); table.append(row);
opacity -= 1 / eventList.length;
} }
$('.calendar').updateWithText(table,1000); $('.calendar').updateWithText(table,1000);
@ -229,11 +233,11 @@ jQuery(document).ready(function($) {
var windString = '<span class="wi wi-strong-wind xdimmed"></span> ' + kmh2beaufort(wind) ; var windString = '<span class="wi wi-strong-wind xdimmed"></span> ' + kmh2beaufort(wind) ;
var sunString = '<span class="wi wi-sunrise xdimmed"></span> ' + sunrise; var sunString = '<span class="wi wi-sunrise xdimmed"></span> ' + sunrise;
if (json.sys.sunrise*1000 > now && json.sys.sunset*1000 > now) { if (json.sys.sunrise*1000 < now && json.sys.sunset*1000 > now) {
sunString = '<span class="wi wi-sunset xdimmed"></span> ' + sunset; sunString = '<span class="wi wi-sunset xdimmed"></span> ' + sunset;
} }
$('.sun').updateWithText(windString+' '+sunString, 1000); $('.windsun').updateWithText(windString+' '+sunString, 1000);
}); });
setTimeout(function() { setTimeout(function() {
@ -268,16 +272,18 @@ jQuery(document).ready(function($) {
var forecastTable = $('<table />').addClass('forecast-table'); var forecastTable = $('<table />').addClass('forecast-table');
var opacity = 1;
for (var i in forecastData) { for (var i in forecastData) {
var forecast = forecastData[i]; var forecast = forecastData[i];
var dt = new Date(forecast.timestamp); var dt = new Date(forecast.timestamp);
var row = $('<tr />'); var row = $('<tr />').css('opacity', opacity);
row.append($('<td/>').addClass('day').html(dayAbbr[dt.getDay()])); row.append($('<td/>').addClass('day').html(dayAbbr[dt.getDay()]));
row.append($('<td/>').addClass('temp-max').html(roundVal(forecast.temp_max))); row.append($('<td/>').addClass('temp-max').html(roundVal(forecast.temp_max)));
row.append($('<td/>').addClass('temp-min').html(roundVal(forecast.temp_min))); row.append($('<td/>').addClass('temp-min').html(roundVal(forecast.temp_min)));
forecastTable.append(row); forecastTable.append(row);
opacity -= 0.155;
} }