adding calendar elements to landing page

_layouts/index.html

@@ -6,7 +6,8 @@ layout: base
 <div class="jumbotron">
 	<div class="container text-center">
 		{% if site.jumbotron_image %}
-		<img src="{{ site.baseurl }}/img/{{ site.jumbotron_image }}" alt="{{ site.title }} Icon" />
+			<img src="{{ site.baseurl }}/img/{{ site.jumbotron_image }}"
+			     alt="{{ site.title }} Icon" />
 		{% endif %}
 		<header>
 			<h1>{{ site.data.course.description }}</h1>
@@ -14,13 +15,11 @@ layout: base
 
 		<p>
 			<a class="btn btn-danger btn-lg"
-			   href="{{site.baseurl}}/modules/start/about-this-course/">
-				Start Your Own Course
-			</a>
+			   href="{{ site.baseurl }}/modules/start/about-this-course/">
+				Start Your Own Course </a>
 		</p>
 
 		<h3>In collaboration with <a href="http://p2pu.org">P2PU</a>.</h3>
-
 	</div>
 
 </div>
@@ -33,15 +32,80 @@ layout: base
 		</div>
 	</div>
 </div>
-<section class="people clearfix">
+<section class="calendar light-section">
+	<div class="container">
+		<h2>Calendar</h2>
+
+		<hr />
+
+		<div id="calendar-data" class="clearfix">
+			<h1 class="text-center"><i class="fa fa-cog fa-2x fa-spin"></i></h1>
+		</div>
+		<script type="text/mustache" id="app-template">
+			{% raw %}
+    {{#each reports}}
+    	<div class="event-wrap col-md-2 relative">
+				<div class="clearfix">
+					<div class="year">{{ year }}</div>
+					<div class="date-wrap">
+						<div class="month">{{ month }}</div>
+						<div class="date">{{ date }}</div>
+						<div class="day">{{ day }}</div>
+					</div>
+					<div class="status {{#passed}}passed{{/passed}}">
+						{{#passed}}
+						    <i class="fa fa-times fa-3x"></i>
+						{{/passed}}
+						{{#not_passed}}
+						    <i class="fa fa-check fa-3x"></i>
+						{{/not_passed}}
+					</div>
+				</div>
+				<div class="time">{{ start_hour }}:{{ start_minutes }} -
+				{{ end_hour }}:{{ end_minutes }}</div>
+				<div class="description">
+					{{ title }}
+				</div>
+				<div class="where clearfix">
+					<div class="add-calendar">
+						<a href="{{ location }}" title="Add to Calendar" class="addthisevent">
+						    <span class="fa-stack fa-lg">
+								  <i class="fa fa-calendar fa-stack-2x"></i>
+								  <i class="fa fa-plus-circle fa-stack-1x stacked-icon"></i>
+								</span>
+						    <span class="_start">{{ date }}-{{ monthnumber }}-{{ year }} {{ start_hour }}:{{ start_minutes }}:00</span>
+						    <span class="_end">{{ date }}-{{ monthnumber }}-{{ year }} {{ end_hour }}:{{ end_minutes }}:00</span>
+						    <span class="_summary">{{ title }}</span>
+						    <span class="_description">{{ description }}</span>
+						    <span class="_location">{{ location }}</span>
+						    <span class="_organizer">P2PU</span>
+						    <span class="_organizer_email">Organizer e-mail</span>
+						    <span class="_date_format">DD/MM/YYYY</span>
+						</a>
+					</div>
+					{{#location_set}}
+					<div class="location">
+						<a href="{{ location }}"><img src="{{ site.baseurl }}/img/unhangout-logo.svg"> Join now </a>
+					</div>
+					{{/location_set}}
+				</div>
+			</div>
+		{{/each}}
+			{% endraw %}
+		</script>
+	</div>
+</section>
+<section class="people clearfix dark-section">
 	<div class="container">
 		<h2>Who else is here?</h2>
 		<hr />
 		<ul class="list-inline">
 			{% for user in site.data.course.signups %}
 				<li class="col-md-1">
-					<a href="https://twitter.com/{{ user.twitter }}" target="_blank"> <img
-							class="img-circle profile-picture" src="{{ user.image }}"
+					<a href="https://twitter.com/{{ user.twitter }}"
+					   target="_blank"> <img
+							class="img-circle profile-picture"
+							src="{{ user.image }}"
 							alt="{{ user.name }}"> </a>
 				</li>
 			{% endfor %}

_sass/_calendar.scss

@@ -0,0 +1,130 @@
+#calendar-data {
+	text-align: center;
+}
+
+.event-wrap {
+	padding: 0;
+	background-color: $white;
+	border: 1px solid $gray-light;
+	font-size: 0.8em;
+	margin-right: 25px;
+	float: none;
+	display: inline-block;
+
+	.year {
+		padding: 0 18px;
+		font-weight: bold;
+		font-size: 1.5em;
+		text-align: center;
+	}
+
+	.date-wrap {
+		float: left;
+		padding: 0 15px;
+		width: 60%;
+		border-left: 3px solid $p2pu-yellow;
+		margin-bottom: 15px;
+		text-align: left;
+
+		.month {
+			font-weight: bold;
+			text-transform: uppercase;
+			font-size: 0.9em;
+		}
+		.date {
+			font-weight: bold;
+			font-size: 3.2em;
+			line-height: 1;
+		}
+		.day {
+			font-weight: bold;
+			text-transform: uppercase;
+			font-size: 0.9em;
+		}
+	}
+	.time {
+		padding: 0 18px;
+		font-weight: bold;
+		font-size: 1.2em;
+		text-align: center;
+	}
+
+	.status {
+		padding: 23px 15px;
+		float: right;
+		width: 40%;
+		background-color: $p2pu-yellow;
+		color: white;
+		text-align: center;
+
+		&.passed {
+			background-color: $gray-lighter;
+			color: $gray-darker;
+		}
+	}
+
+	.description {
+		background-color: $gray-darker;
+		padding: 15px;
+		color: white;
+		//font-size: 0.8em;
+		font-weight: bold;
+		text-align: center;
+		height: 100px;
+		overflow: hidden;
+	}
+
+	.where {
+		padding: 15px;
+		font-size: 0.9em;
+		text-align: right;
+
+		img {
+			width: 20px;
+		}
+
+		.add-calendar {
+			width: 30%;
+			float: left;
+			text-align: left;
+
+			.stacked-icon {
+				line-height: 1;
+				bottom: -5px;
+				position: absolute;
+				background: white;
+				text-align: right;
+				font-size: 1.5em;
+				display: inline;
+				padding: 0;
+				width: 50%;
+			}
+		}
+
+		.location {
+			width: 70%;
+			float: right;
+		}
+
+		.addthisevent-drop {
+			border: 0;
+			background: #ffffff;
+			text-align: left;
+			padding: 0;
+			color: cadetblue !important;
+
+			&:hover {
+				border: 0;
+			}
+
+		}
+		.addthisevent_dropdown span {
+			color: cadetblue;
+
+			&:hover {
+				color: cadetblue;
+			}
+		}
+	}
+}
+

_sass/_common.scss

@@ -2,6 +2,10 @@ body {
 	background-color: $gray-lighter;
 }
 
+.relative {
+	position: relative;
+}
+
 .background-white {
 	padding: 60px 0;
 	background-color: $white;

_sass/_landing.scss

@@ -4,6 +4,20 @@ section {
 	line-height: 1.8;
 }
 
+.light-section{
+	background-color: $white;
+
+	hr{
+		border-color: $gray-lighter;
+	}
+}
+.dark-section{
+	background-color: $gray-lighter;
+
+	hr{
+		border-color: $white;
+	}
+}
 .jumbotron {
 	background: $jumbotron-color;
 	background-position: bottom center;
@@ -31,8 +45,12 @@ section {
 	font-size: 4em;
 }
 
-.people {
+.calendar{
 	background-color: $white;
+	padding: 50px 0 70px 0;
+}
+
+.people {
 	margin-bottom: 0;
 }
 

css/p2pustrap-custom.scss

@@ -20,5 +20,6 @@
 @import "common";
 @import "nav";
 @import "landing";
+@import "calendar";
 
 

img/unhangout-logo.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="53.285683"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="unhangout-logo.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="71.265813"
+     inkscape:cy="-48.018277"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     inkscape:window-x="1665"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-169.62496,-346.70205)">
+    <path
+       style="fill:#65a1a3;fill-opacity:1"
+       d="m 187.45953,395.724 -6.30318,-4.32081 -5.20507,0 c -3.44784,0 -5.38756,-0.18672 -5.74559,-0.55309 -0.77431,-0.79232 -0.77431,-31.74731 0,-32.53964 0.34624,-0.35428 2.1138,-0.55307 4.91779,-0.55307 2.40751,0 4.6979,-0.1259 5.08975,-0.27977 0.57199,-0.22459 0.71248,-1.04853 0.71248,-4.17842 0,-3.71484 0.43828,-5.50391 1.5313,-6.25072 0.27257,-0.18624 11.4915,-0.34179 24.93093,-0.34567 23.83953,-0.007 24.4573,0.0154 25.33617,0.91474 0.86779,0.88799 0.90085,1.53634 0.90085,17.67327 0,15.51238 -0.0597,16.80671 -0.80643,17.49826 -0.62405,0.5779 -1.97379,0.77646 -5.96808,0.87802 l -5.16165,0.13121 -0.22521,3.04193 c -0.35933,4.85351 0.59068,4.56295 -14.91904,4.56295 l -13.45748,0 0.0329,1.72838 c 0.0181,0.95061 0.1953,2.86911 0.39381,4.26334 0.19851,1.39422 0.33573,2.56082 0.30493,2.59244 -0.0308,0.0315 -2.89242,-1.8869 -6.35917,-4.26335 z m 44.25682,-30.47696 -0.11829,-16.47724 -24.32273,0 -24.32272,0 -0.1183,16.47724 -0.11829,16.47722 24.55931,0 24.55932,0 -0.1183,-16.47722 z m -39.94303,13.98852 c -0.4147,-0.51132 -0.37328,-1.04798 0.18671,-2.41943 1.34631,-3.29716 2.90168,-4.47287 8.46333,-6.39751 4.41109,-1.52646 4.61834,-1.90844 2.89294,-5.33176 -1.89529,-3.76041 -2.16193,-7.3839 -0.76123,-10.3447 1.77685,-3.75587 5.12467,-4.92248 7.90308,-2.75398 3.64912,2.84808 3.79172,9.14159 0.33252,14.67403 -0.79793,1.27615 -0.79412,1.3156 0.2078,2.15388 0.56134,0.46966 2.6282,1.40175 4.59303,2.07132 1.96482,0.66957 4.09548,1.63843 4.73481,2.15304 1.45522,1.17129 3.03773,4.28186 2.85315,5.6081 l -0.13939,1.00166 -15.36692,0.1212 c -12.85774,0.10141 -15.45393,0.0139 -15.89983,-0.53585 z m -6.79382,-7.20644 c 0,-1.75975 1.38185,-3.172 4.09375,-4.18381 3.49836,-1.30524 3.75276,-1.67763 2.65347,-3.884 -1.2653,-2.53956 -1.16155,-4.8833 0.29458,-6.65406 3.33404,-4.0545 7.6797,1.9537 4.89814,6.77206 -1.07122,1.85565 -0.67399,2.72268 1.56139,3.40799 1.01091,0.30993 1.76905,0.77524 1.68475,1.03403 -0.0843,0.25879 -1.35675,0.87292 -2.82766,1.36472 -1.47091,0.49181 -3.31959,1.38625 -4.10819,1.98764 -1.213,0.92505 -1.95868,1.09344 -4.84203,1.09344 -3.12756,0 -3.4082,-0.0772 -3.4082,-0.93801 z m 36.32221,-0.17311 c -0.70836,-0.59288 -2.49158,-1.45089 -3.9627,-1.90667 -1.47113,-0.45578 -2.78102,-1.00462 -2.91087,-1.21962 -0.12987,-0.215 0.53856,-0.71934 1.48537,-1.12073 2.81422,-1.19307 2.93755,-1.41159 1.93338,-3.42574 -2.3015,-4.61627 0.0242,-9.47434 3.82173,-7.98317 1.91298,0.75116 2.6174,4.91123 1.30755,7.72194 -0.40675,0.8728 -0.62896,1.88179 -0.49379,2.24221 0.13516,0.36042 1.49373,1.12094 3.01905,1.69004 2.01598,0.75217 3.00179,1.41918 3.61002,2.44262 1.33524,2.24671 0.84112,2.67255 -3.07923,2.65366 -2.92724,-0.0142 -3.63538,-0.17794 -4.73051,-1.09454 z"
+       id="path3073"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

js/calendar.js

@@ -0,0 +1,73 @@
+/*global jQuery, window, console, can, document */
+
+
+var P2PU = window.P2PU || {};
+
+(function ($, P2PU) {
+
+	'use strict';
+
+
+	var init = function () {
+		$(function () {
+			var section = $('.calendar');
+			$.ajax({
+				url: 'https://www.google.com/calendar/feeds/p2pu.org_bdbg1p5olhp0eo83mnqi7fvpfs%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true&alt=json', //document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent("https://www.google.com/calendar/feeds/p2pu.org_bdbg1p5olhp0eo83mnqi7fvpfs%40group.calendar.google.com/public/full"),
+				dataType: 'json',
+				cache: false,
+				success: function (data) {
+					if (data.feed && data.feed.entry) {
+						var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+							months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+						var events = data.feed.entry;
+						$.each(events, function (i, e) {
+
+							var sdate = new Date(e.gd$when[0].startTime),
+								edate = new Date(e.gd$when[0].endTime),
+								currentdate = new Date();
+
+							console.log(currentdate > edate);
+
+							sdate.getTimezoneOffset();
+							edate.getTimezoneOffset();
+
+							e.year = sdate.getFullYear();
+							e.monthnumber = sdate.getMonth() + 1;
+							e.month = months[sdate.getMonth()];
+							e.day = days[sdate.getDay()];
+							e.date = sdate.getDate();
+							e.start_hour = sdate.getHours();
+							e.start_minutes = (sdate.getMinutes() < 10 ? '0' : '') + sdate.getMinutes();
+							e.end_hour = edate.getHours();
+							e.end_minutes = (edate.getMinutes() < 10 ? '0' : '') + edate.getMinutes();
+							e.title = e.title.$t;
+							e.passed = currentdate > edate;
+							e.not_passed = edate > currentdate;
+							e.location_set = e.gd$where[0].valueString !== "";
+							e.location = e.gd$where[0].valueString;
+							e.description = e.content.$t;
+
+							console.log(e.monthnumber);
+
+						});
+
+						$("#calendar-data").html(can.view("app-template", {reports: new can.List(events)}));
+					}else{
+						section.html('')
+							.removeClass('calendar')
+							.next().removeClass('dark-section')
+							.addClass('light-section');
+					}
+				},
+				error: function () {
+					$("#calendar-data").html('<h1>Oh dear, something went wrong, could you try again please? Or tell us about this <a href="http://community.p2pu.org/category/tech/support">here</a></h1>');
+				}
+			});
+
+		});
+	};
+
+	P2PU.ciab = {};
+	P2PU.ciab.calendar = init;
+
+}(jQuery, P2PU));