Skip to content

Commit

Permalink
Implemented weekdays and ticker line
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexeimatrosov
alexeimatrosov committed Jun 23, 2015
1 parent 0b1ac1d commit 4b8156a
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 70 deletions.
84 changes: 26 additions & 58 deletions NodeJs/public/css/common.css
View file
@@ -1,68 +1,36 @@
/*
================================================================================
BASIC STYLES for tags
================================================================================
*/

body {max-width:1080px; max-height:1920px; font-family: 'Droid Sans', Verdana, Arial, Helvetica, sans-serif; color:black; background-color:white;}
/*h1, h2, h3, h4, h5, h6 {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1;}
h1 {font-size: 72px; text-transform: uppercase;}
h2 {font-size: 60px;}
strong {font-weight: bold;}*/

/*
================================================================================
UNIQUE ELEMENTS and their contents
================================================================================
*/
body {max-width:1080px; max-height:1920px; font-family: 'Droid Sans', Verdana, Arial, Helvetica, sans-serif; color:black; background-color:white; overflow-x:hidden;}

#document {position:relative; width:100%; height:100%;}

#calendar {height:880px; padding-left:30px; color:white; background-color:rgb(55, 53, 53);}
#calendar .logo {height:20px;}
#calendar .logo {height:20px; margin-top:30px;}
#calendar .weekdays {margin-top:20px; overflow:hidden; font-size:50px; font-weight:bold; text-align:center;}
#calendar .weekdays .item {float:left; color:#131212;}
#calendar .weekdays .item.weekend {color:#4e4c4c;}
#calendar .weekdays .item:first-child {color:white;}
#calendar .weekdays .item .dayOfWeek {font-size:32px;}
#calendar .current-time {clear:both; margin-top:20px; font-size:120px; font-weight:bold;}
#calendar .this-place {margin-top:20px; font-size:120px;}
#calendar .this-place .name {color:#ffde00;}
#calendar .this-place .weather {float:right; font-size:50px;}
#calendar .ticker {white-space: nowrap; margin-top:20px; font-size:28px;}
#calendar .ticker .wrapper {display:table; position:relative;}
#calendar .ticker .line {display:table-cell; padding-right:100px;}
@-webkit-keyframes tickerWrapperTransform{
from {-webkit-transform:translate(0%,0);}
to {-webkit-transform:translate(-50%,0);}
}
@keyframes tickerWrapperTransform {
from {transform:translate(0%,0);}
to {transform:translate(-50%,0);}
}
#calendar .ticker .wrapper {
-webkit-animation:tickerWrapperTransform 12s linear 0s infinite normal;
animation:tickerWrapperTransform 12s linear 0s infinite normal;
}
#calendar .ticker .name {color:#ffde00;}
#calendar .ticker .time {color:#ffde00;}

#schedule {height:680px; background-color:white;}

#taxi {height:360px; background-color:#ffde00;}
/*#calendar {width: 100%; height: 215px; margin-bottom: 60px; font-size: 30px; color: #878681; overflow: hidden; }
#calendar .logo {position: absolute; top: 0px; right: 30px; z-index: 1000; }
#calendar .datetime {float: left; margin-right: 40px; text-align: center; line-height: 1.2;}
#calendar .datetime .date {display: block;}
#calendar .datetime .time {display: block; font-size: 128px; font-weight: bold;}
.weather {float: left; width: auto; font-size: 48px; line-height: 48px;}
.weather table {float: left; width: auto; margin-right: 10px;}
.weather table td {vertical-align: middle;}
.weather table td a {text-decoration: none; color: #878681;}
.weather table td.conditions {padding: 0 10px 0 20px;}
.weather table td.conditions img {width: 48px; height: 48px;}
.weather table td.temp {text-align: right;}
#schedule {margin-bottom: 132px;}
#schedule h1 {color: #4C9018; margin-bottom: 30px;}
#schedule h2 {margin-top: 30px; margin-bottom: 30px; color: #878681;}
#schedule h2 span {font-size: 50%;}
#schedule table {width: 100%;}
#schedule table .line {width: 20%;}
#schedule table .destination {width: 20%; color: #878681;}
#schedule table .diffTime {width: 40%; text-align: right;}
#schedule table .stopTime {width: 20%; text-align: right; color: #878681;}
#taxi {
position: relative; margin: 0 -20px; padding: 40px; font-size:16px; line-height: 1.25; color: #fff; background-color: #4C9018; min-height: 100px;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.25)));
background-image: -moz-linear-gradient(100% 100% 90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}
#taxi h2 {position: absolute; top: -0.9em; left: 0px; width: 100%; font-size: 72px; line-height: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.25em; color: #4C9018;}
#taxi .taxi_wrap {width: 420px; margin: auto; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-bottom: 10px; font-size: 32px; padding: 15px;}
#taxi .orders {display: none; color: #FFFFFF;}
#taxi .processing {background-color: #000066 !important;}
#taxi .response {background-color: #000066 !important;}
#taxi .fail {background-color: #FF0000 !important; color: #FFFFFF;}
#taxi .success {background-color: #4C9018 !important; color: #FFFFFF;}*/

#taxi {height:360px; background-color:#ffde00;}
21 changes: 14 additions & 7 deletions NodeJs/public/index.html
View file
Expand Up @@ -13,11 +13,11 @@
<div id="document">
<div id="calendar">
<img class="logo" src="/img/futurice-logo--green.svg" alt="Futurice"/>
<div class="day-numbers"></div>
<div class="weekdays"></div>
<div class="current-time"></div>
<div class="this-place">
<div class="name"></div>
<div class="weather"></div>
<div class="name"></div>
</div>
<div class="ticker"></div>
</div>
Expand All @@ -40,20 +40,27 @@
<script src="/js/index/main.js"></script>

<script id="calendar-day-number-template" type="html/template">
<div class="day-number {{dayOffClass}}">
<span class="number">{{number}}</span>
<div class="item {{weekendClass}}">
<span class="dayOfMonth">{{dayOfMonth}}</span>
<br/>
<span class="name">{{name}}</span>
<span class="dayOfWeek">{{dayOfWeek}}</span>
</div>
</script>

<script id="calendar-this-place-weather-template" type="html/template">
<div class="temperature">{{temperature}}&nbsp;&deg;</div>
<span class="temperature">{{temperature}}&nbsp;&deg;</span>
<img class="icon" src="{{icon}}" alt=""/>
</script>

<script id="calendar-ticker-template" type="html/template">
<div class="wrapper">
<div class="line">{{lineHtml}}</div>
<div class="line">{{lineHtml}}</div>
</div>
</script>

<script id="calendar-ticker-item-template" type="html/template">
<span><span class="name">{{name}}</span>&nbsp;<span class="time">{{time}}</span>&nbsp;<span class="temperature">{{temperature}}</span>&deg;</span>
<span class="place-{{index}}"><span class="name">{{name}}</span>&nbsp;<span class="time">{{time}}</span>&nbsp;<span class="temperature">{{temperature}}</span>&deg;</span>
</script>
</body>
</html>
39 changes: 34 additions & 5 deletions NodeJs/public/js/index/calendar.js
View file
Expand Up @@ -4,10 +4,12 @@
var config;
var weatherRefreshTimeoutObject;
var timeRefreshTimeoutObject;
var thisPlaceLastNow;
var $calendar;
var $ticker;
var dayNumberTemplate;
var thisPlaceWeatherTemplate;
var tickerTemplate;
var tickerItemTemplate;

var formatTemperature = function(temperature) {
Expand All @@ -20,26 +22,51 @@
$calendar.find('.this-place .name').text(thisPlace.name);

var restPlaces = _.rest(config.places, 1);
var tickerItemsData = _.map(restPlaces, function(place){
var tickerItemsData = _.map(restPlaces, function(place, index){
return {
index: index,
name: place.name,
time: '00:00',
temperature: 0,
};
});
$ticker.html(futu.templates.renderMany(tickerItemTemplate, tickerItemsData, '&nbsp;/&nbsp;'));
var lineHtml = futu.templates.renderMany(tickerItemTemplate, tickerItemsData, '&nbsp;&nbsp;/&nbsp;&nbsp;');
$ticker.html(futu.templates.render(tickerTemplate, {lineHtml: lineHtml}));
};

var renderDayNumbers = function(now){
var dayMoments = _.map(_.range(0, 7), function(offset){
var cloneNow = moment(now);
return cloneNow.add(offset, 'd');
});
var templateData = _.map(dayMoments, function (m, index) {
var isoWeekday = m.isoWeekday();
return {
dayOfMonth: m.format('DD'),
dayOfWeek: index == 0 ? m.format('ddd') : '',
weekendClass: isoWeekday == 6 || isoWeekday == 7 ? 'weekend' : ''
};
});
var html = futu.templates.renderMany(dayNumberTemplate, templateData);
$calendar.find('.weekdays').html(html);
};

var timeRefresh = function() {
var now = moment();
var format = 'HH:mm';

var thisPlace = _.first(config.places);
$calendar.find('.current-time').text(now.tz(thisPlace.timezone).format(format));
var thisPlaceNow = now.tz(thisPlace.timezone);
$calendar.find('.current-time').text(thisPlaceNow.format(format));
if(thisPlaceNow.date() != thisPlaceLastNow.date())
{
renderDayNumbers(thisPlaceNow);
}
thisPlaceLastNow = thisPlaceNow;

var restPlaces = _.rest(config.places, 1);
_.each(restPlaces, function(place, index) {
$ticker.find('span:nth-of-type(' + (index + 1) + ') .time').text(now.tz(place.timezone).format(format));
$ticker.find('span.place-' + index + ' .time').text(now.tz(place.timezone).format(format));
});
};

Expand All @@ -62,7 +89,7 @@

var restResults = _.rest(results, 1);
_.each(restResults, function(result, index) {
$ticker.find('span:nth-of-type(' + (index + 1) + ') .temperature').text(formatTemperature(result.main.temp));
$ticker.find('span.place-' + index + ' .temperature').text(formatTemperature(result.main.temp));
});
});
};
Expand All @@ -76,7 +103,9 @@
$ticker = $('#calendar .ticker');
dayNumberTemplate = futu.templates.find('#calendar-day-number-template');
thisPlaceWeatherTemplate = futu.templates.find('#calendar-this-place-weather-template');
tickerTemplate = futu.templates.find('#calendar-ticker-template');
tickerItemTemplate = futu.templates.find('#calendar-ticker-item-template');
thisPlaceLastNow = moment(0);

renderCalendar();

Expand Down

0 comments on commit 4b8156a

Please sign in to comment.