program view

8 files changed, 162 insertions, 37 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;
diff --git a/config.php b/config.php
index f39a4a6..244e6cb 100644
--- a/config.php
+++ b/config.php
@@ -147,7 +147,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		 * Name des Raums im Fahrplan
 		 * Wenn diese Zeile auskommentiert ist wird der Raum-Slug verwendet
 		 */
-		//'SCHEDULE_NAME' => 'saal-1',
+		'SCHEDULE_NAME' => 'Saal 1',
 
 		/**
 		 * Feedback anzeigen (boolean)
@@ -242,6 +242,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'PREVIEW' => true,
 		'TRANSLATION' => true,
 		'SCHEDULE' => true,
+		'SCHEDULE_NAME' => 'Saal 2',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
 		'IRC' => true,
@@ -269,6 +270,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'PREVIEW' => true,
 		'TRANSLATION' => true,
 		'SCHEDULE' => true,
+		'SCHEDULE_NAME' => 'Saal G',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
 		'IRC' => true,
@@ -296,6 +298,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array(
 		'PREVIEW' => true,
 		'TRANSLATION' => true,
 		'SCHEDULE' => true,
+		'SCHEDULE_NAME' => 'Saal 6',
 		'FEEDBACK' => true,
 		'SUBTITLES' => true,
 		'IRC' => true,
@@ -377,8 +380,8 @@ $GLOBALS['CONFIG']['SCHEDULE'] = array(
 	 * Diese folgende Beispiel-Zeile Simuliert, dass das
 	 * Konferenz-Datum 2014-12-29 auf den heutigen Tag 2015-02-24 verschoben ist.
 	 */
-	// 'SIMULATE_OFFSET' => strtotime(/* Conference-Date */ '2014-12-29') - strtotime(/* Today */ '2015-02-24'),
-	'SIMULATE_OFFSET' => 0,
+	'SIMULATE_OFFSET' => strtotime(/* Conference-Date */ '2014-12-28') - strtotime(/* Today */ '2015-03-01'),
+	//'SIMULATE_OFFSET' => 0,
 );
 
 
diff --git a/template/assemblies/program.phtml b/template/assemblies/program.phtml
index 496fa83..ce69c51 100644
--- a/template/assemblies/program.phtml
+++ b/template/assemblies/program.phtml
@@ -4,16 +4,16 @@ foreach(reset($program) as $event)
 	$width += $event['duration'];
 
 ?>
-<div class="program scroll-container" data-offset="<?=h($GLOBALS['CONFIG']['SCHEDULE_OFFSET'])?>">
+<div class="program scroll-container">
 	<div class="scroll-element">
 		<div class="now"><span>now</span></div>
 		<? foreach($program as $name => $events): ?>
-			<div class="room <? if($name == $room): ?>highlight<? endif ?>" style="width: <?=$width * $GLOBALS['CONFIG']['SCHEDULE_SCALE'] ?>px">
+			<div class="room <? if($name == get("ROOMS.$room.SCHEDULE_NAME", $room)): ?>highlight<? endif ?>" style="width: <?=$width / get('SCHEDULE.SCALE')?>px">
 				<? foreach($events as $event): ?>
 
 					<div
 						class="block <?=h(@$event['special'] ?: 'event')?>"
-						style="width: <?=h($event['duration'] * $GLOBALS['CONFIG']['SCHEDULE_SCALE'])?>px"
+						style="width: <?=h($event['duration'] / get('SCHEDULE.SCALE'))?>px"
 						data-start="<?=intval($event['start'])?>"
 						data-end="<?=intval($event['end'])?>"
 					>
@@ -32,15 +32,17 @@ foreach(reset($program) as $event)
 						<? else: ?>
 
 							<h4><?=h(strftime('%H:%M', $event['start']))?>
-								&nbsp;&ndash;&nbsp;
+								&ndash;
 								<?=h(strftime('%H:%M', $event['end']))?>
 								&nbsp;in&nbsp;
-								<?=h($GLOBALS['CONFIG']['ROOMS'][$name])?>
+								<a href="<?=h(link_player($room))?>">
+									<?=h(get("ROOMS.$room.DISPLAY"))?>
+								</a>
 							</h4>
 							<h3>
 								<a
-									href="<?=h(link_player($name))?>"
-									title="Switch to <?=h($GLOBALS['CONFIG']['ROOMS'][$name])?>"
+									href="<?=h(link_player($room))?>"
+									title="Switch to <?=h(get("ROOMS.$room.DISPLAY"))?>"
 								><?=h($event['title'])?></a>
 							</h3>
 							<h5>by&nbsp;<?=h($event['speaker'])?></h5>
diff --git a/template/page.phtml b/template/page.phtml
index 2815c77..bebc64b 100644
--- a/template/page.phtml
+++ b/template/page.phtml
@@ -57,7 +57,7 @@
 		<? include("$assemblies/footer.phtml") ?>
 
 		<span class="js-settings"
-			data-scheduleoffset="<?=h(get('SCHEDULE.OFFSET', 0))?>"
+			data-scheduleoffset="<?=h(get('SCHEDULE.SIMULATE_OFFSET', 0))?>"
 		></span>
 	</body>
 </html>