program view

5 files changed, 146 insertions, 26 deletions

diff --git a/assets/css/_program.less b/assets/css/_program.less
new file mode 100644
index 0000000..db87d04
--- /dev/null
+++ b/assets/css/_program.less
@@ -0,0 +1,94 @@
+.program {
+	&.scroll-container {
+		overflow: hidden;
+		overflow-x: scroll;
+	}
+
+	.scroll-element {
+		position: relative;
+	}
+
+	.room {
+		overflow: hidden;
+	}
+
+	.now {
+		position: absolute;
+		left: 0;
+		width: 150px;
+		height: 500px;
+		background-color: @program-now-bg;
+		font-size: 14px;
+
+		//z-index: -5;
+
+		span {
+			display: block;
+			position: absolute;
+			right: -28px;
+			color: @program-now;
+		}
+	}
+
+	.block {
+		overflow: hidden;
+		float: left;
+		height: 100px;
+
+		/* and now for small screens: */
+		@media all and (max-width: @screen-xs-max) {
+			height: 75px;
+		}
+
+
+		padding: 10px;
+		border: 1px solid white;
+
+		h3 {
+			margin: 0;
+			padding: 0;
+
+			/* and now for small screens: */
+			@media all and (max-width: @screen-xs-max) {
+				font-size: 22px;
+			}
+		}
+
+		h4 {
+			margin: 3px 0;
+			color: @program-room;
+			a {
+				color: @program-room;
+			}
+		}
+
+		h5 {
+			color: @program-author;
+		}
+
+		&.event h3 {
+			overflow: hidden;
+		}
+
+		&.gap {
+			background-image: url(../img/stripes/gap.png);
+			background-color: @program-gap-bg;
+			color: @program-gap;
+		}
+
+		&.daychange { 
+			background-image: url(../img/stripes/gap.png);
+			background-color: @program-daychange-bg;
+			color: @program-daychange;
+		}
+
+		&.pause {
+			background-color: @program-pause-bg;
+			color: @program-pause;
+		}
+	}
+
+	.room.highlight .block {
+		background-color: @program-selected-room;
+	}
+}
diff --git a/assets/css/_room.less b/assets/css/_room.less
index 91e71c0..17d9742 100644
--- a/assets/css/_room.less
+++ b/assets/css/_room.less
@@ -28,25 +28,30 @@
 	margin: 0 auto;
 }
 
-.functions-wrap #switcher {
-	.row {
-		margin-bottom: @padding-large-vertical;
-	}
+.functions-wrap
+{
+	#switcher {
+		.row {
+			margin-bottom: @padding-large-vertical;
+		}
 
-	.btn-group {
-		margin-bottom: @padding-base-vertical;
+		.btn-group {
+			margin-bottom: @padding-base-vertical;
+		}
 	}
-}
 
-.functions-wrap .chat {
-	text-align: center;
-	overflow: hidden;
+	#chat {
+		text-align: center;
+		overflow: hidden;
 
-	> div {
-		margin: 25px;
+		> div {
+			margin: 25px;
 
-		> a {
-			font-size: @jumbo-font-size;
+			> a {
+				font-size: @jumbo-font-size;
+			}
 		}
 	}
 }
+
+@import "_program.less";
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index 1f38fbf..8a616a8 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -5,9 +5,27 @@
 
 @img: '../img/';
 
-@jumbo-font-size: 52px;
+@jumbo-font-size:   52px;
 @jumbo-line-height: 45px;
 
+@program-now:       @brand-danger;
+@program-now-bg:    fade(lighten(@brand-danger, 20%), 60%);
+
+@program-room:      darken(@brand-primary, 15%);
+@program-author:    #444;
+
+@program-selected-room: lighten(@brand-success, 10%);
+
+@program-daychange:    white;
+@program-daychange-bg: fade(white, 30%);
+
+@program-gap:          white;
+@program-gap-bg:       fade(white, 30%);
+
+@program-pause:        white;
+@program-pause-bg:     lighten(black, 85%);
+
+
 // website configuration styles
 
 .navbar {
diff --git a/assets/img/stripes/gap.png b/assets/img/stripes/gap.png
index 99df7ee..1ad5fa1 100644
--- a/assets/img/stripes/gap.png
+++ b/assets/img/stripes/gap.png
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 6d1d8c5..96e9f2c 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -190,9 +190,18 @@ $(function() {
 		$now = $program.find('.now'),
 		scrollLock = false,
 		rewindTimeout,
-		rewindTime = 10000, /* 10 seconds after manual navigation */
-		scrollDuration = 500, /* 1/2s animation on the scolling element */
-		updateTimer = 500; /* update now-pointer placement every 1/2s */
+
+		/* 10 seconds after manual navigation */
+		rewindTime = 10000,
+
+		/* 1/2s animation on the scolling element */
+		scrollDuration = 500,
+
+		/* update now-pointer placement every 1/2s */
+		updateTimer = 500,
+
+		/* offset to the browsers realtime (for simulation) */
+		offset = $('.js-settings').data('scheduleoffset');
 
 	$program.on('mouseenter mouseleave touchstart touchend', function(e) {
 		if(e.type == 'mouseleave' || e.type == 'touchend') {
@@ -208,11 +217,8 @@ $(function() {
 	// program now-marker & scrolling
 	function updateProgramView(initial) {
 		var
-			// offset to the browsers realtime (for simulation
-			offset = $('.program').data('offset'),
-
 			// corrected "now" timestamp in unix-counting (seconds, not microseconds)
-			now = (Date.now() / 1000) - offset;
+			now = (Date.now() / 1000) + offset;
 
 		// only check the first room (shouldn't matter anyway)
 		// find the newest block that starts in the past
@@ -327,11 +333,8 @@ $(function() {
 
 	function updateProgtamTeaser() {
 		var
-			// offset to the browsers realtime (for simulation
-			offset = $lecture.data('offset'),
-
 			// corrected "now" timestamp in unix-counting (seconds, not microseconds)
-			now = (Date.now() / 1000) - offset;
+			now = (Date.now() / 1000) + offset;
 
 		$.each(programData, function(room, talks) {
 			var currentTalk, nextTalk;