Add dynamic quote changer + minor improvements

53e546e3 · Sindre Sorhus · 2a8a4f50 · 53e546e3 · 53e546e3 · 53e546e3
Commit 53e546e3 authored Jul 21, 2012 by Sindre Sorhus
Show whitespace changes
Inline Side-by-side

Showing with 74 additions and 41 deletions

index.html index.html +22 -20

site/css/main.css site/css/main.css +3 -20

site/js/main.js site/js/main.js +49 -1

No files found.
--- a/index.html
+++ b/index.html
@@ -104,32 +104,34 @@
 		<hr>
 		<div class="row">
 			<div class="span6">
-				<img class="screenshot" src="site/img/screenshot.png" width="558" height="246" alt="Todo app screenshot">
+				<h2>Thoughts on the project</h2>
-				<p class="tagline2">TodoMVC is a common learning application for popular JavaScript MV* frameworks</p>
+				<blockquote class="quote speech-bubble">
+					<p></p>
+					<footer>
+						<img width="40" height="40" alt="">
+						<a></a>
+					</footer>
+				</blockquote>
 			</div>
 			<div class="span6">
-				<h2>Title</h2>
+				<img class="screenshot" src="site/img/screenshot.png" width="558" height="246" alt="Todo app screenshot">
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 		</div>
 		<hr>
 		<div class="row">
-			<div class="span4">
+			<div class="span3">
-				<h2>Thoughts on the project</h2>
+				<h2>What's new in 1.0</h2>
-				<blockquote class="quote speech-bubble">
+				<ul>
-					<p>Modern JavaScript developers realise an MVC framework is essential for managing the complexity of their apps. TodoMVC is a fabulous community contribution that helps developers compare frameworks on the basis of actual project code, not just claims and anecdotes.</p>
+					<li>lorem ipsum</li>
-					<footer>
+					<li>lorem ipsum</li>
-						<img src="http://gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=40" width="40" height="40" alt="Michael Mahemoff">
+					<li>lorem ipsum</li>
-						<a href="https://github.com/mahemoff">Michael Mahemoff</a>
+					<li>lorem ipsum</li>
-					</footer>
+					<li>lorem ipsum</li>
-				</blockquote>
+					<li>lorem ipsum</li>
+					<li>lorem ipsum</li>
+				</ul>
 			</div>
-			<div class="span4">
+			<div class="span5">
 				<h2>Selecting a Framework</h2>
 				<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p>
 				<p>Study the syntax required for defining models, views and (where applicable) controllers and classes in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p>
@@ -149,7 +151,7 @@
 		<div class="row">
 			<div class="span12">
 				<h2>Labs</h2>
-				<ul class="applist labs">
+				<ul class="applist">
 					<li>
 						<a href="labs/architecture-examples/maria/src/" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
 					</li>

--- a/site/css/main.css
+++ b/site/css/main.css
@@ -92,6 +92,7 @@ header nav a:first-child {
 	height: auto;
 	max-width: 558px;
 	margin-top: 12px;
+	float: right;
 }
 .tagline2 {
@@ -167,14 +168,6 @@ p .label {
 	columns: 2;
 }
-.applist.labs {
-	-webkit-columns: 3;
-	-moz-columns: 3;
-	-ms-columns: 3;
-	-o-columns: 3;
-	columns: 3;
-}
 .credit a {
 	margin: 0 5px;
 	white-space: nowrap;
@@ -199,12 +192,13 @@ p .label {
 .quote {
 	border: none;
-	margin: 20px 0;
+	margin: 20px 0 70px 0;
 }
 .quote p {
 	font-size: 17px;
 	line-height: 1.3;
+	font-style: italic;
 }
 .quote p:before {
@@ -263,17 +257,6 @@ p .label {
 	border: 13px solid transparent;
 	border-top-color: rgba(0, 0, 0, .04);
 }
-/*
-.speech-bubble:after {
-	content: '';
-	position: absolute;
-	width: 0;
-	top: 16px;
-	left: -50px;
-	bottom: auto;
-	border-width: 10px 50px 10px 0;
-	border-color: transparent rgba(255, 255, 255, .5);
-}*/
 .zocial.red {
 	background-color: #a82400;

--- a/site/js/main.js
+++ b/site/js/main.js
@@ -11,7 +11,7 @@
 			}, 100);
 		}
-		this.each(function() {
+		return this.each(function() {
 			var $this = $( this );
 			$this.popover({
 				trigger: 'manual',
@@ -35,7 +35,55 @@
 		});
 	};
+	$.fn.quote = function( data ) {
+		var $this = this;
+		function update() {
+			var el = data[ Math.floor( Math.random() * data.length ) ];
+			$this.children('p').text( el.quote );
+			$this.find('a').text( el.person.name );
+			$this.find('a').attr( 'href', el.person.link );
+			$this.find('img').attr( 'src', el.person.gravatar );
+			setTimeout( update, 25000 );
+		}
+		update();
+	};
 	// Apps popover
 	$('.applist a').persistantPopover();
+	// Quotes
+	$('.quote').quote([{
+		quote: 'TodoMVC is a godsend for helping developers find what well-developed frameworks match their mental model of application architecture.',
+		person: {
+			name: 'Paul Irish',
+			gravatar: 'http://gravatar.com/avatar/ffe68d6f71b225f7661d33f2a8908281?s=40',
+			link: 'https://github.com/paulirish'
+		}
+	},{
+		quote: 'Modern JavaScript developers realise an MVC framework is essential for managing the complexity of their apps. TodoMVC is a fabulous community contribution that helps developers compare frameworks on the basis of actual project code, not just claims and anecdotes.',
+		person: {
+			name: 'Michael Mahemoff',
+			gravatar: 'http://gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=40',
+			link: 'https://github.com/mahemoff'
+		}
+	},{
+		quote: 'TodoMVC is an immensely valuable attempt at a difficult problem - providing a structured way of comparing JS libraries and frameworks. TodoMVC is a lone data point in a sea of conjecture and opinion.',
+		person: {
+			name: 'Justin Meyer',
+			gravatar: 'http://gravatar.com/avatar/70ee60f32937b52758869488d5753259?s=40',
+			link: 'https://github.com/justinbmeyer'
+		}
+	},{
+		quote: 'It can be hard to make the leap from hacking together code that works to writing code that`s organized, maintainable, reusable, and a joy to work on. The TodoMVC project does a great job of introducing developers to different approaches to code organization, and to the various libraries that can help them along the way. If you`re trying to get your bearings in the world of client-side application development, the TodoMVC project is a great place to get started.',
+		person: {
+			name: 'Rebecca Murphey',
+			gravatar: 'http://gravatar.com/avatar/0177cdce6af15e10db15b6bf5dc4e0b0?s=40',
+			link: 'https://github.com/rmurphey'
+		}
+	}]);
 }());
\ No newline at end of file