Site - collapse new apps by default

tastejs · Feb 10, 2013 · 5b3e02c · 5b3e02c
1 parent 6678849
commit 5b3e02c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -244,16 +244,17 @@ <h2>Compare these to a non-framework implementation</h2>
 			<div class="span4">
 			<h2>New in 1.1 - TBA</h2>
 			<ul class="whats-new">
-			<li>We now have 18 stable apps and 35 in labs. New since 1.0.1:
-				<ul>
-				<li>Dart</li>
-				<li>TypeScript + Backbone.js</li>
-				<li>TypeScript + AngularJS</li>
-				<li>Serenade.js</li>
-				<li>CanJS + RequireJS</li>
-				<li>Chaplin + Brunch</li>
-				<li>Thorax + Lumbar</li>
-				<li>CanJS replaced the JavaScriptMVC app</li>
+			<li>We now have 18 stable apps and 35 in labs.
+				<a href="#" data-target="#new-apps" class="expander">New since 1.0.1 ▼</a>
+				<ul class="collapsed" id="new-apps">
+				<li><a href="architecture-examples/dart/web/">Dart</a></li>
+				<li><a href="labs/architecture-examples/typescript-backbone/">TypeScript + Backbone.js</a></li>
+				<li><a href="labs/architecture-examples/typescript-angular/">TypeScript + AngularJS</a></li>
+				<li><a href="labs/architecture-examples/serenadejs/">Serenade.js</a></li>
+				<li><a href="labs/dependency-examples/canjs_require/">CanJS + RequireJS</a></li>
+				<li><a href="labs/dependency-examples/chaplin-brunch/public/">Chaplin + Brunch</a></li>
+				<li><a href="labs/dependency-examples/thorax_lumbar/public/">Thorax + Lumbar</a></li>
+				<li><a href="architecture-examples/canjs/">CanJS</a> replaced the JavaScriptMVC app</li>
 				</ul>
 			</li>
 			<li>Many app frameworks and libraries have been upgraded to the latest version</li>

diff --git a/site/css/main.css b/site/css/main.css
@@ -118,6 +118,14 @@ header nav a:first-child {
 	left: -20px;
 }
 
+.whats-new li ul {
+	margin-left: 10px;
+}
+
+.whats-new li ul li {
+	margin-left: 20px;
+}
+
 .applist {
 	list-style: none;
 	margin: 0;
@@ -184,6 +192,20 @@ p .label {
 	columns: 2;
 }
 
+.collapsed {
+	overflow: hidden;
+	max-height: 0;
+	-webkit-transition: max-height 1s;
+	-moz-transition: max-height 1s;
+	-ms-transition: max-height 1s;
+	-o-transition: max-height 1s;
+	transition: max-height 1s;
+}
+
+.collapsed.expanded {
+	max-height: 999px;
+}
+
 .credit a {
 	margin: 0 5px;
 	white-space: nowrap;

diff --git a/site/js/main.js b/site/js/main.js
@@ -132,9 +132,19 @@
 		});
 	};
 
+	$.fn.expander = function () {
+		this.click(function (ev) {
+			ev.preventDefault();
+			$($(this).data('target')).toggleClass('expanded');
+		});
+	};
+
 	// Apps popover
 	$('.applist a').persistantPopover();
 
+	// What's new expander
+	$('.expander').expander();
+
 	// Quotes
 	$('.quotes').quote([{
 		quote: 'TodoMVC is a godsend for helping developers find what well-developed frameworks match their mental model of application architecture.',