This repository has been archived by the owner on Aug 5, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added display page for large screens
This page is designed for large screens, and most importantly, the 3x3 screen setup in NZi3. This page shows: - Upcoming events (page refreshes every 5 minutes to get next events) - Update Twitter feed - #CS4HSchch Twitter feed - Sponsor logos It would be nice to center the sponsor logos in the slideshow, however this may require rewriting the slideshow code.
- Loading branch information
1 parent
ba63b60
commit 6844a47
Showing
3 changed files
with
228 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
#row-content{ | ||
padding-top: 5rem; | ||
} | ||
.row { | ||
max-width: 100%; | ||
} | ||
.tab-bar { | ||
visibility: visible; | ||
height: 5rem; | ||
} | ||
.tab-bar h1 { | ||
font-size: 5rem; | ||
line-height: 5rem; | ||
} | ||
.event-day { | ||
padding-top: 0px; | ||
} | ||
#sponsor-slideshow { | ||
height: 10rem; | ||
} | ||
.rslides { | ||
position: relative; | ||
list-style: none; | ||
overflow: hidden; | ||
width: 100%; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
.rslides li { | ||
-webkit-backface-visibility: hidden; | ||
position: absolute; | ||
display: none; | ||
width: 100%; | ||
height: 100%; | ||
left: 0; | ||
top: 0; | ||
} | ||
|
||
.rslides li:first-child { | ||
position: relative; | ||
display: block; | ||
float: left; | ||
} | ||
|
||
.rslides img { | ||
height: auto; | ||
width: auto; | ||
border: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
{% extends 'layout.html' %} | ||
|
||
{% block title %}CS4HS Christchurch 2015{% endblock %} | ||
|
||
{% block head %} | ||
{{ super() }} | ||
<link rel="stylesheet" href="css/display.css"> | ||
<!-- Reload page every 5 minutes to refresh timetable --> | ||
<meta http-equiv="refresh" content="300"> | ||
{% endblock head %} | ||
|
||
{% block body %} | ||
<nav class="tab-bar"> | ||
<section class="middle tab-bar-section"> | ||
<h1 class="title">CS<span class="logo-number">4</span>HS</h1> | ||
</section> | ||
</nav> | ||
<div class="row" id="row-content"> | ||
<div class="small-4 columns text-center"> | ||
<h2>Sponsors</h2> | ||
<ul id="sponsor-slideshow" class="text-center"> | ||
<li><img src="./img/google-logo.png"></img></li> | ||
<li><img src="./img/canterbury-logo.png"></img></li> | ||
<li><img src="./img/nzacditt-logo.png"></img></li> | ||
</ul> | ||
|
||
<h2>Updates</h2> | ||
<a class="twitter-timeline" | ||
href="https://twitter.com/UCCSEd" | ||
data-widget-id="525448302553083904" | ||
data-chrome="noheader nofooter noscrollbar transparent" | ||
height="1200"> | ||
</a> | ||
</div> | ||
<div class="small-4 columns"> | ||
{% raw %} | ||
<div id="current"> | ||
<script id="schedule-template" type="text/x-handlebars-template"> | ||
<div class="event"> | ||
{{#ifSameDate cells.DateTimeStart}} | ||
<h2 class="text-center event-day">{{prettifyDate cells.DateTimeStart "dddd Do MMMM"}}</h3> | ||
{{/ifSameDate}} | ||
{{#ifDifferentTimeLine cells.DateTimeStart}} | ||
<span class="small-12 columns underline"></span> | ||
{{else}} | ||
<span class="small-8 small-offset-2 medium-10 medium-offset-2 columns underline"></span> | ||
{{/ifDifferentTimeLine}} | ||
<div class="row current-event"> | ||
<span class="small-12 medium-4 columns medium-text-right"> | ||
{{#ifDifferentTime cells.DateTimeStart}} | ||
<h3 class="event-time">{{prettifyDate cells.DateTimeStart "h:mma"}}<br> | ||
<small>until {{prettifyDate cells.DateTimeEnd "h:mma"}}</small></h3> | ||
{{else}} | ||
<h4 class="text-center">or</h4> | ||
{{/ifDifferentTime}} | ||
<p> | ||
{{#if cells.Location}} | ||
<b>Location:</b> {{cells.Location}} | ||
{{/if}} | ||
{{#if cells.Speaker}} | ||
<br><b>Presenter:</b> {{cells.Speaker}} | ||
{{/if}} | ||
</p> | ||
</span> | ||
<span class="small-12 medium-8 columns"> | ||
<h4>{{cells.Title}}</h4> | ||
<p class="description">{{cells.Description}}</p> | ||
</span> | ||
</div> | ||
</div> | ||
</script> | ||
</div> | ||
{% endraw %} | ||
<div id="schedule-loading"> | ||
<h3 class="text-center">Loading events...</h3> | ||
</div> | ||
</div> | ||
|
||
<div class="small-4 columns text-center"> | ||
<h2>#CS4HSchch</h2> | ||
<a class="twitter-timeline" | ||
data-dnt="true" | ||
href="https://twitter.com/hashtag/CS4HSchch" | ||
data-widget-id="522159625521487872" | ||
data-chrome="noheader nofooter noscrollbar transparent" | ||
height="1200"> | ||
</a> | ||
</div> | ||
</div> | ||
{% endblock body %} | ||
|
||
{% block scripts %} | ||
<!-- Load Handlebars.js --> | ||
<script src="./js/sheetrock.min.js"></script> | ||
<!-- Load Handlebars.js --> | ||
<script src="./js/handlebars.min.js"></script> | ||
<!-- Load Moment.js --> | ||
<script src="./js/moment.min.js"></script> | ||
<script type="text/javascript"> | ||
// Compile the Handlebars template. | ||
var source = $('#schedule-template').html(); | ||
var CurrentTemplate = Handlebars.compile(source); | ||
|
||
var SameDate = ""; | ||
var SameDateTime = ""; | ||
var Time = ""; | ||
var TimeLine = ""; | ||
|
||
Handlebars.registerHelper("prettifyDate", function(timestamp, formatString) { | ||
return moment(new Date(timestamp)).format(formatString); | ||
}); | ||
|
||
Handlebars.registerHelper('ifSameDate', function(v1, options) { | ||
if(v1.substring(0, 5) !== SameDate.substring(0, 5)) { | ||
SameDate = v1; | ||
return options.fn(this); | ||
} | ||
}); | ||
|
||
Handlebars.registerHelper('ifDifferentTime', function(v1, options) { | ||
if(v1 !== Time) { | ||
Time = v1; | ||
return options.fn(this); | ||
} else { | ||
return options.inverse(this); | ||
} | ||
}); | ||
|
||
Handlebars.registerHelper('ifDifferentTimeLine', function(v1, options) { | ||
if(v1 !== TimeLine) { | ||
TimeLine = v1; | ||
return options.fn(this); | ||
} else { | ||
return options.inverse(this); | ||
} | ||
}); | ||
|
||
var now = moment().subtract(10, 'minutes').format('YYYY-MM-DD HH:mm:ss'); | ||
|
||
// Load an entire sheet. | ||
$('#current').sheetrock({ | ||
url: 'https://docs.google.com/spreadsheets/d/15y3r_9IPnL9d6fa61T7-RtTQqyJc_Y2gXIJ9oGc_Y_w/edit#gid=0', | ||
query: 'select A,B,C,D,E,F where A >= datetime "' + now + '"', | ||
rowTemplate: CurrentTemplate, | ||
callback: removeLoading | ||
}); | ||
|
||
function removeLoading() { | ||
$("#schedule-loading").addClass('hide'); | ||
} | ||
</script> | ||
<!-- Twitter script --> | ||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | ||
<!-- Slideshow script --> | ||
<script type="text/javascript" src="./js/responsiveslides.min.js"></script> | ||
<script> | ||
$(function() { | ||
$("#sponsor-slideshow").responsiveSlides({ | ||
auto: true, // Boolean: Animate automatically, true or false | ||
speed: 500, // Integer: Speed of the transition, in milliseconds | ||
timeout: 10000, // Integer: Time between slide transitions, in milliseconds | ||
pager: false, // Boolean: Show pager, true or false | ||
nav: false, // Boolean: Show navigation, true or false | ||
random: false, // Boolean: Randomize the order of the slides, true or false | ||
pause: false, // Boolean: Pause on hover, true or false | ||
pauseControls: false // Boolean: Pause when hovering controls, true or false | ||
}); | ||
}); | ||
</script> | ||
{% endblock scripts %} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.