Added Description and show/hide on focus

bronius · May 30, 2014 · 9ae2298 · 9ae2298
1 parent f57068d
commit 9ae2298
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/css/program-events.css b/css/program-events.css
@@ -21,7 +21,6 @@ body {
 }
 #events-ui #details {
 	width: 417px;
-	font-variant: small-caps;
 }
 
 #events-ui #thumbs a {
@@ -44,7 +43,7 @@ body {
 #events-ui #details a {
 	display: block;
 	background-color: #333;
-	color: white;
+	color: #ddd;
 	text-decoration: none;
 }
 #events-ui #thumbs a .text,
@@ -74,3 +73,15 @@ body {
 	font-size: 10px;
 }
 
+#events-ui #details .organization {
+	font-variant: small-caps;
+}
+
+#events-ui #details .description {
+	padding: 1em;
+	color: white;
+	display: none;
+}
+#events-ui #details .active .description {
+	display: block;
+}
diff --git a/js/program-events.js b/js/program-events.js
@@ -39,8 +39,9 @@ function wizardScrollTo(container, block, id, href, clicked_element) {
 	var targetblock = $('a[name="'+blockid+'"]');
 	$(container + ' .active').toggleClass('active');
 	targetblock.toggleClass('active');
+  // Scroll related blocks into view
 	if (clicked_element != block) {
-		var top = targetblock.position().top + $(container).scrollTop() - 250;
+  	var top = targetblock.position().top + $(container).scrollTop() - 250;
 	  $(container).animate({
 	      scrollTop: top
 	  }, 500, function () {

diff --git a/program-events.php b/program-events.php
@@ -39,17 +39,21 @@
 		$filename = $event['Image'];
 		$eventname = $event['Event Name'];
 		$organization = $event['Org Name'];
+		$description = $event['Description'];
 		$location = $event['Location'];
 		$datetime = $event['Start Date'] . (isset($event['Start Time']) ? ' ' . $event['Start Time'] . '' : '');
 		$datetime .= isset($event['End Date']) ? ' - ' . $event['End Date'] . ' ' . $event['End Time'] : '';
 		?>
 				<a href="#event-<?php echo $id; ?>" name="info-<?php echo $id; ?>">
 					<img src="images/380x245/<?php echo $filename; ?>?<?php echo $id; ?>" />
 					<div class="text">
-						<?php echo $organization; ?>:<br/>
+						<div class="organization"><?php echo $organization; ?>:</div>
 						<?php echo $datetime; ?><br/>
 						<?php echo $eventname; ?><br/>
-						<?php echo $location; ?>
+						<?php echo $location; ?><br/>
+						<div class="description">
+							<?php echo $description; ?>
+						</div>
 					</div>
 				</a>
 		<?php