Skip to content
This repository has been archived by the owner on Aug 5, 2018. It is now read-only.

Commit

Permalink
Added display page for large screens
Browse files Browse the repository at this point in the history
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
JackMorganNZ committed Jul 13, 2015
1 parent ba63b60 commit 6844a47
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 0 deletions.
50 changes: 50 additions & 0 deletions css/display.css
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;
}
170 changes: 170 additions & 0 deletions display.html
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 %}
8 changes: 8 additions & 0 deletions js/responsiveslides.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 6844a47

Please sign in to comment.