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

32
css/level2.css
View File

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

58
index.html
View File

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

29
js/level2.js
View File

@ -70,7 +70,7 @@ function refreshContent() {
busses = data.journey;
var content = '';
var content = '<div class="panel"><h1>Upcoming busses</h1>';
$.each(busses, function(nr, bus) {
@ -224,7 +224,7 @@ function l2status() {
if (status.state.open) {
$('.status')
.addClass('open')
.html('<h1>Open!</h1> Opened ' + timeStamp);
.html('<h1>Open</h1> Opened ' + timeStamp);
} else {
$('.status')
.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)',
complete: function(response) {
var l2event_name, l2event_ob;
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();
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 += '<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];
};
output += "</div>";
$('.events').html('').append(output);
@ -278,16 +278,18 @@ function wortLuNews() {
var articles = response.responseJSON.articles;
var output = '';
var output = '<div class="panel"><h1>News</h1>';
for (var ArticleNR = 0; ArticleNR < 5; 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);
}
@ -306,15 +308,16 @@ function cflNews() {
var cfl = response.responseText;
var output = '';
var output = '<div class="panel"><h1>CFL notifications</h1>';
$($.parseXML(cfl))
.find("item")
.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);