syn2cat
/
screen
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed layout, colour, fixed events problem.

gh-pages
Cyrille Médard de Chardon 2014-09-20 18:18:51 +02:00
parent 0c37d9b755
commit 4a0c90c7e3
3 changed files with 53 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/level2.css
View File

@ -3,8 +3,8 @@
body { body {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-weight: 300; font-weight: 300;
color: rgb(240, 175, 63); color: #333333;
background-color: rgb(60, 33, 24); background-color: rgb(245, 245, 245);
} }
body:after { body:after {
@ -20,7 +20,7 @@ body:after {
.panel { .panel {
font-family: 'Istok Web', sans-serif; font-family: 'Istok Web', sans-serif;
position: relative; position: relative;
box-shadow: 1px 1px 3px 2px rgba(240,175,63,0.8);
padding: 0.2em 1em 1em 1em; padding: 0.2em 1em 1em 1em;
margin-bottom: 15px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
@ -42,28 +42,27 @@ h1, h2, h3, h4, h5, h6 {
.time, .date { .time, .date {
text-align: center; text-align: center;
font-weight: 600; font-weight: 300;
margin: 0; margin: 0;
} }
.time { .time {
font-size: 10em; font-size: 3em;
} }
.date { .date {
font-size: 2em; font-size: 2em;
margin-top: -30px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.climacon { .climacon {
margin-top: -0.45em; font-size: 4em;
font-size: 15em; margin-bottom: 0;
} }
.currentTemp { .currentTemp {
margin-top: -0.2em; font-size: 1em;
font-size: 8em; text-align: center;
} }
.row { .row {
@ -71,15 +70,11 @@ h1, h2, h3, h4, h5, h6 {
} }
.weather { .weather {
margin-top: 35px;
opacity: 0.8;
} }
.logo { .logo {
text-align: center; text-align: center;
font-size: 8em; font-size: 8em;
margin-top: 35px;
opacity: 0.8;
} }
.open { .open {
@ -91,12 +86,19 @@ h1, h2, h3, h4, h5, h6 {
} }
.status { .status {
padding: 1em;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 2em;
} }
.status h1 { .status h1 {
font-size: 7em; font-size: 4em;
margin: 0; margin: 0;
line-height: 1em; line-height: 1em;
} }
/* Secondary row of boxes */
.busses h1:first-child, .cfl h1:first-child, .events h1:first-child, .news h1:first-child {
border-bottom: 1px solid #333333;
}

48
index.html
View File

@ -12,53 +12,43 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row hidden-xs"> <div class="row">
<div class="col-md-4 logo">
<div class="col-md-4 logo hidden-sm">
Level2 Level2
</div> </div>
<div class="col-md-4 col-sm-6 datetime"> <div class="col-md-4">
<div class="panel status"></div>
<h1 class="time"></h1>
<h3 class="date"></h3>
</div> </div>
<div class="col-md-4 col-sm-6 weather"> <div class="col-md-4 datetime">
<h1 class="time"></h1>
<div class="row"> <h3 class="date"></h3>
<div class="col-xs-6"> <span class="weatherIcon">
<span class="weatherIcon"></span> <span class="currentTemp"></span>
</div> </span>
<div class="col-xs-6">
<h1 class="currentTemp"></h1>
</div>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3 busses">
</div>
<div class="col-md-4"> <div class="col-md-3 cfl">
<div class="panel status"></div>
<div class="events"></div>
</div> </div>
<div class="col-md-4">
<div class="panel busses"></div> <div class="col-md-3 events">
<div class="cfl visible-lg-block visible-md-block"></div> </div>
</div>
<div class="col-md-4 news visible-lg-block visible-md-block"> <div class="col-md-3 news">
</div> </div>
</div> </div>
</div> </div><!-- end of fluid contianer -->
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<script src="js/moment.min.js"></script> <script src="js/moment.min.js"></script>

29
js/level2.js
View File

@ -70,7 +70,7 @@ function refreshContent() {
busses = data.journey; busses = data.journey;
var content = ''; var content = '<div class="panel"><h1>Upcoming busses</h1>';
$.each(busses, function(nr, bus) { $.each(busses, function(nr, bus) {
@ -224,7 +224,7 @@ function l2status() {
if (status.state.open) { if (status.state.open) {
$('.status') $('.status')
.addClass('open') .addClass('open')
.html('<h1>Open!</h1> Opened ' + timeStamp); .html('<h1>Open</h1> Opened ' + timeStamp);
} else { } else {
$('.status') $('.status')
.addClass('closed') .addClass('closed')
@ -245,20 +245,20 @@ function l2events() {
url: 'https://wiki.hackerspace.lu/wiki/Special:Ask/-5B-5BCategory:Event-5D-5D-20-5B-5BStartDate::-3E' + moment().format('YYYY') + '-2D' + moment().format('MM') + '-2D' + moment().format('DD') + '-5D-5D/-3FStartDate/-3FEndDate/-3FHas-20subtitle/-3FHas-20description/-3FIs-20Event-20of-20Type%3DIs-20type/-3FHas-20location/-3FHas-20picture/-3FHas-20cost/-3FCategory/format%3Djson/sort%3DStartDate/order%3Dascending/searchlabel%3DJSON-20(Internal,-20only-20upcoming-20events)', url: 'https://wiki.hackerspace.lu/wiki/Special:Ask/-5B-5BCategory:Event-5D-5D-20-5B-5BStartDate::-3E' + moment().format('YYYY') + '-2D' + moment().format('MM') + '-2D' + moment().format('DD') + '-5D-5D/-3FStartDate/-3FEndDate/-3FHas-20subtitle/-3FHas-20description/-3FIs-20Event-20of-20Type%3DIs-20type/-3FHas-20location/-3FHas-20picture/-3FHas-20cost/-3FCategory/format%3Djson/sort%3DStartDate/order%3Dascending/searchlabel%3DJSON-20(Internal,-20only-20upcoming-20events)',
complete: function(response) { complete: function(response) {
var l2event_name, l2event_ob;
var events = JSON.parse(response.responseText); var events = JSON.parse(response.responseText);
var output = ''; var output = '<div class="panel"><h1>Level 2 events</h1>';
for (var l2eventNR = 0; l2eventNR < 5; l2eventNR++) { for (l2event_name in events.results) {
var l2event = events.items[l2eventNR]; var l2event_ob = events.results[l2event_name];
var label = $('<h1>').html(l2event.label).text(); output += '<h1>' + l2event_name + ' <small>' + moment(l2event_ob.printouts.startdate, "YYYY-MM-DD HH:mm:ss").format('dddd, D MMMM HH:mm') + '</small></h1>' + l2event_ob.printouts['Has description'][0];
var description = $('<p>').html(l2event.has_subtitle).text();
output += '<div class="panel">' + '<h1>' + label + ' <small>' + moment(l2event.startdate, "YYYY-MM-DD HH:mm:ss").format('dddd, D MMMM HH:mm') + '</small></h1>' + description + '</div>';
}; };
output += "</div>";
$('.events').html('').append(output); $('.events').html('').append(output);
@ -278,16 +278,18 @@ function wortLuNews() {
var articles = response.responseJSON.articles; var articles = response.responseJSON.articles;
var output = ''; var output = '<div class="panel"><h1>News</h1>';
for (var ArticleNR = 0; ArticleNR < 5; ArticleNR++) { for (var ArticleNR = 0; ArticleNR < 5; ArticleNR++) {
var article = articles[ArticleNR]; var article = articles[ArticleNR];
output += '<div class="panel">' + '<h1>' + article.title + '</h1>' + article.teaser + '</div>'; output += '<h1>' + article.title + '</h1>' + article.teaser;
} }
output += '</div>';
$('.news').html('').append(output); $('.news').html('').append(output);
} }
@ -306,15 +308,16 @@ function cflNews() {
var cfl = response.responseText; var cfl = response.responseText;
var output = ''; var output = '<div class="panel"><h1>CFL notifications</h1>';
$($.parseXML(cfl)) $($.parseXML(cfl))
.find("item") .find("item")
.each(function() { .each(function() {
output += '<div class="panel">' + '<h1>' + $(this).find("title").text() + '</h1>' + $(this).find("description").text() + '</div>'; output += '<h1>' + $(this).find("title").text() + '</h1>' + $(this).find("description").text();
}); });
output += "</div>";
$('.cfl').html('').append(output); $('.cfl').html('').append(output);