Improved styling of tweets

Also fixed block quote styling and added a new feature to allow
websites to be added to the timeline via a link.

source/js/VMM.Util.js

@@ -389,6 +389,11 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
 			return sps.join(" ");
 		},
 		
+		/* Replaces dumb quote marks with smart ones
+		================================================== */
+		properQuotes: function(str) {
+			return str.replace(/\"([^\"]*)\"/gi,"“$1”");
+		},
 		/* Given an int or decimal, return a string with pretty commas in the correct spot.
 		================================================== */
 		niceNumber: function(n){

source/js/VMM.js

@@ -1269,6 +1269,12 @@ if (typeof VMM == 'undefined') {
 				} else if (m.type == "google-map") {
 					mediaElem = "<div class='thumbnail map'></div>";
 					return mediaElem;
+				} else if (m.type == "unknown") {
+					mediaElem = "";
+					return mediaElem;
+				} else if (m.type == "website") {
+					mediaElem = "<div class='thumbnail website'></div>";
+					return mediaElem;
 				} else {
 					mediaElem = "<div class='thumbnail'></div>";
 					return mediaElem;
@@ -1338,10 +1344,13 @@ if (typeof VMM == 'undefined') {
 					var soundcloud_id = "soundcloud_" + VMM.Util.unique_ID(5);
 					mediaElem = "<div class='media-frame soundcloud' id='" + soundcloud_id + "'>Loading Sound</div>";
 					VMM.ExternalAPI.soundcloud.getSound(m.id, soundcloud_id)
-				} else if (m.type = "google-map") {
+				} else if (m.type == "google-map") {
-					trace("GOOGLE MAP MEDIA CREATE");
 					mediaElem = "<iframe class='media-frame map' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
-					//mediaElem = "<iframe class='media-frame video vimeo' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' src='http://player.vimeo.com/video/" + m.id + "?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff'></iframe>";
+				} else if (m.type == "unknown") { 
+					trace("NO KNOWN MEDIA TYPE FOUND TRYING TO JUST PLACE THE HTML"); 
+					mediaElem = VMM.Util.properQuotes(m.id); 
+				} else if (m.type == "website") { 
+					mediaElem = "<iframe class='media-frame' onload='timeline.iframeLoaded()' frameborder='0' width='100%' height='100%' scrolling='yes' marginheight='0' marginwidth='0' src='" + m.id + "'></iframe>"
 				} else {
 					trace("NO KNOWN MEDIA TYPE FOUND");
 					trace(m.type);
@@ -1366,11 +1375,97 @@ if (typeof VMM == 'undefined') {
 		
 	}).init();
 	
+	//VMM.mediaType.youtube(d); //should return a true or false
+	// VMM.MediaType(url); //returns an object with .type and .id
+	VMM.MediaType = function(d) {
+		var success = false;
+		var media   = {};
+		if (d.match("div class='twitter'")) {
+			media.type  = "twitter-ready";
+		    media.id    = d;
+		    success = true;
+		} else if (d.match('(www.)?youtube|youtu\.be')) {
+			if (d.match('embed')) { 
+				youtube_id = d.split(/embed\//)[1].split('"')[0];
+			} else { 
+				youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
+			}
+			//youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
+		    media.type  = "youtube";
+		    media.id    = youtube_id;
+		    success = true;
+		} else if (d.match('(player.)?vimeo\.com')) {
+		    //vimeo_id = d.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
+		    vimeo_id = d.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
+		
+		    media.type  = "vimeo";
+		    media.id    = vimeo_id;
+		    success = true;
+		} else if (d.match('(player.)?soundcloud\.com')) {
+			//soundcloud_url = unescape(d.split(/value="/)[1].split(/["]/)[0]);
+			//soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
+			media.type  = "soundcloud";
+			media.id    = d;
+			success = true;
+		} else if (d.match('(www.)?twitter\.com')) {
+			trace("TWITTER MATCH");
+			// https://twitter.com/#!/twitterapi/statuses/133640144317198338
+			// https://twitter.com/#!/DeliciousHot/status/23189589820702720
+			if (d.match("status\/")) {
+				twitter_id = d.split("status\/")[1];
+			} else if (d.match("statuses\/")) {
+				twitter_id = d.split("statuses\/")[1];
+			} else {
+				twitter_id = "";
+			}
+
+			media.type = "twitter";
+			media.id = twitter_id;
+			success = true;
+		} else if (d.match("maps.google.com")) {
+			//maps.google.com
+			media.type  = "google-map";
+		    media.id    = d.split(/src=['|"][^'|"]*?['|"]/gi);
+			trace("google map " + media.id);
+			success = true;
+		} else if (d.match("flickr.com/photos")) {
+			media.type = "flickr";
+			//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
+			
+			media.id = d.split("photos\/")[1].split("/")[1];
+			//media.id = media.id.split("/")[1];
+			trace("FLICKR " + media.id);
+			success = true;
+		} else if (d.match(/jpg|png|gif/i)) {
+			media.type  = "image";
+			media.id    = d;
+			success = true;
+		} 	else if (d.indexOf('http://') == 0) {
+			media.type  = "website";
+			media.id    = d;
+			success = true;
+		} else {
+			trace("unknown media");  
+			media.type  = "unknown";
+			media.id    = d;
+			success = true;
+		}
+		
+		if (success) { 
+			return media;
+		} else {
+			trace("No valid media id detected");
+			trace(d);
+		}
+		return false;
+	}
+	
 	VMM.Keys = {
 		flickr: "6d6f59d8d30d79f4f402a7644d5073e3",
 	}
 	
 	VMM.ExternalAPI = {
+		
 		twitter: {
 			tweetArray: [],
 			// VMM.ExternalAPI.twitter.getHTML(id);
@@ -1508,6 +1603,7 @@ if (typeof VMM == 'undefined') {
 					VMM.ExternalAPI.twitter.formatJSON(d, id);
 				});
 			},
+			
 			formatJSON: function(d, id) {
 				var twit = "<blockquote><p>";
 				var td = VMM.Util.linkify(d.text);
@@ -1515,8 +1611,21 @@ if (typeof VMM == 'undefined') {
 				td = td.replace(/(#([\w]+))/g,"<a href='http://twitter.com/#search?q=%23$2'>$1</a>");
 				//twit += VMM.Util.linkify(d.text);
 				twit += td;
-				twit += "</p>";
+				twit += "</p></blockquote>";
-				twit += "— " + d.user.name + " (<a href='https://twitter.com/" + d.user.screen_name + "'>@" + d.user.screen_name + "</a>) <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + d.created_at + " </a></blockquote>";
+				//twit += "— " + d.user.name + " (<a href='https://twitter.com/" + d.user.screen_name + "'>@" + d.user.screen_name + "</a>) <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + d.created_at + " </a>";
+				//twit += "<a href='" +  + "'>" + VMM.ExternalAPI.twitter.prettyParseTwitterDate(d.created_at);
+				//twit += "<span class='created-at'><a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + VMM.ExternalAPI.twitter.prettyParseTwitterDate(d.created_at) + " </a></span>";
+				//twit += "<span class='created-at'><a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "'>" + "Tweet Details" + " </a></span>";
+				twit += " <a href='https://twitter.com/" + d.user.screen_name + "/status/" + d.id + "' alt='link to original tweet' title='link to original tweet'>" + "<span class='created-at'></span>" + " </a>";
+				twit += "<div class='vcard author'>"
+				twit += "<a class='screen-name url' href='https://twitter.com/" + d.user.screen_name + "' data-screen-name='" + d.user.screen_name + "'>";
+				twit += "<span class='avatar'><img src=' " + d.user.profile_image_url + "'  alt=''></span>";
+				twit += "<span class='fn'>" + d.user.name + "</span>";
+				twit += "<span class='nickname'>@" + d.user.screen_name + "</span>";
+				twit += "</a>"
+				twit += "</div>"
+				
+				
 				/*
 				<blockquote class="twitter-tweet">
 				<p>Tom Brokaw asks <a href="https://twitter.com/search/%2523Romney">#Romney</a> to remove from ads 1997 NBC report on <a href="https://twitter.com/search/%2523Gingrich">#Gingrich</a> legal troubles. Romney unmoved. <a href="http://t.co/re7vtLNt" title="http://thecaucus.blogs.nytimes.com/2012/01/28/nbc-news-asks-romney-campaign-to-remove-ad/?hp">thecaucus.blogs.nytimes.com/2012/01/28/nbc…</a></p>
@@ -1528,6 +1637,7 @@ if (typeof VMM == 'undefined') {
 			}
 			
 		},
+		
 		maps: {
 			
 		},
@@ -1651,81 +1761,7 @@ if (typeof VMM == 'undefined') {
 			
 		}
 	}
-	//VMM.mediaType.youtube(d); //should return a true or false
-	// VMM.MediaType(url); //returns an object with .type and .id
-	VMM.MediaType = function(d) {
-		var success = false;
-		var media   = {};
-		if (d.match("div class='twitter'")) {
-			media.type  = "twitter-ready";
-		    media.id    = d;
-		    success = true;
-		} else if (d.match('(www.)?youtube|youtu\.be')) {
-			if (d.match('embed')) { 
-				youtube_id = d.split(/embed\//)[1].split('"')[0];
-			} else { 
-				youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
-			}
-			//youtube_id = d.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
-		    media.type  = "youtube";
-		    media.id    = youtube_id;
-		    success = true;
-		} else if (d.match('(player.)?vimeo\.com')) {
-		    //vimeo_id = d.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
-		    vimeo_id = d.split(/video\/|\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
-		
-		    media.type  = "vimeo";
-		    media.id    = vimeo_id;
-		    success = true;
-		} else if (d.match('(player.)?soundcloud\.com')) {
-			//soundcloud_url = unescape(d.split(/value="/)[1].split(/["]/)[0]);
-			//soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
-			media.type  = "soundcloud";
-			media.id    = d;
-			success = true;
-		} else if (d.match('(www.)?twitter\.com')) {
-			trace("TWITTER MATCH");
-			// https://twitter.com/#!/twitterapi/statuses/133640144317198338
-			// https://twitter.com/#!/DeliciousHot/status/23189589820702720
-			if (d.match("status\/")) {
-				twitter_id = d.split("status\/")[1];
-			} else if (d.match("statuses\/")) {
-				twitter_id = d.split("statuses\/")[1];
-			} else {
-				twitter_id = "";
-			}
-
-			media.type = "twitter";
-			media.id = twitter_id;
-			success = true;
-		} else if (d.match("maps.google.com")) {
-			//maps.google.com
-			media.type  = "google-map";
-		    media.id    = d.split(/src=['|"][^'|"]*?['|"]/gi);
-			trace("google map " + media.id);
-			success = true;
-		} else if (d.match("flickr.com/photos")) {
-			media.type = "flickr";
-			//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
-			
-			media.id = d.split("photos\/")[1].split("/")[1];
-			//media.id = media.id.split("/")[1];
-			trace("FLICKR " + media.id);
-			success = true;
-		} else if (d.match(/jpg|png|gif/i)) {
-			media.type  = "image";
-			media.id    = d;
-			success = true;
-		}
 	
-		if (success) { 
-			return media;
-		} else {
-			trace("No valid media id detected");
-			trace(d);
-		}
-		return false;
-	}
 	
 	/* MEDIA
 	================================================== */

source/less/gfx.less

@@ -37,6 +37,12 @@
 	background-position: 0 -1111px; width: 24px; height: 24px; 
 }
 
+.icon-website() {
+	background-image: url(timeline.png);
+	background-repeat:no-repeat;
+	background-position: 0 -1037px; width: 24px; height: 24px;
+}
+
 .icon-soundcloud() {
 	background-image: url(timeline.png);
 	background-repeat:no-repeat;

source/less/slider.less

@@ -60,7 +60,7 @@
 	//position: relative;
 	
 	.nav-previous, .nav-next {
-		position:fixed;
+		position:absolute;
 		top: 0px;
 		//background-color: #f5f5f5; // TEMP
 		width: @feature-nav-width; 
@@ -325,6 +325,9 @@
 			}
 			
 			
+			
+			
+
 		}
 	}
 }

source/less/structure-feature.less

@@ -30,6 +30,20 @@
 
 			}
 			
+			/* BLOCKQUOTES
+			================================================== */
+			
+			blockquote {
+				font-size: 28px;
+				text-align:left;
+				line-height: 36px;
+				margin-bottom: 6px;
+				padding-top: 10px;
+				background-color:@white;
+				font-family: @font-serif;
+				color:@color-feature-title;
+			}
+			
 		}
 		
 		

source/less/structure-navigation.less

@@ -12,6 +12,7 @@
 		height:@navigation-height;
 		//overflow: hidden;
 		border-top: 1px solid @color-line;
+		
 		position: relative;
 		//.background-time-tic();
 		.toolbar {
@@ -91,6 +92,7 @@
 			height: @navigation-content-height;
 			width:100%;
 			background-color:@color-background-dark;
+			//background: @color-background-dark url(timeline-texture.png) repeat;
 			
 			.timenav-interval-background {
 				position:absolute;

source/less/structure.less

@@ -81,6 +81,8 @@ html, body {
 	iframe {
 		//margin-bottom:5px;
 	}
+	
+	
 	img {
 		max-height:100%;
 		//border: 1px solid @color-line;
@@ -97,13 +99,14 @@ html, body {
 	.twitter {
 		text-align:left;
 		//max-width:500px;
+		font-family: @font-sansserif;
 		background-color:@white;
 		margin-left: auto;
 		margin-right: auto;
+		clear:both;
 		blockquote {
 			font-size: @base-font;
 			line-height: @base-line;
-			font-family: @font-sansserif;
 			color:@color-feature-description;
 			p {
 				font-size: 28px;
@@ -113,9 +116,68 @@ html, body {
 				background-color:@white;
 				font-family: @font-serif;
 				color:@color-feature-title;
+				//margin-left:10px;
+			}
+			.quote-mark {
+				color:@color-dark-third;
+			}
+		}
+		.created-at {
+			.icon-twitter();
+			width:24px;
+			height:24px;
+			overflow:hidden;
+			margin-left:@base-space;
+			display:inline-block;
+			float:right;
+			.opacity(25);
+		}
+		.created-at:hover {
+			.opacity(100);
+		}
+		.vcard {
+			float:right;
+			//position: relative;
+			a {
+				color: @color-dark-second;
+			}
+			a:hover {
+				text-decoration: none;
+				.fn {
+					text-decoration: underline;
+				}
+			}
+			.fn, .nickname {
+				
+				padding-left: 42px;
+			}
+			.fn {
+				display:block;
+				//display:inline;
+				font-weight: bold;
+
+			}
+			.nickname {
+				margin-top:3px;
+				display:block;
+				color: @color-dark-third;
+			}
 			
+			.avatar {
+				float:left;
+				//position: absolute;
+				display: block;
+				width: 32px;
+				height: 32px;
+				img {
+					//border: 0px solid #999;
+					-moz-border-radius: 5px;
+					-webkit-border-radius: 5px;
+					border-radius: 5px;
 				}
 			}
+		}
+		
 
 	}
 	
@@ -149,6 +211,10 @@ html, body {
 		.icon-map();
 		//.icon-map-pin();
 	}
+	.thumbnail.website {
+		.icon-website();
+	}
+	
 	.zFront {
 		z-index:500;
 	}

source/less/type.less

@@ -159,6 +159,7 @@
 		line-height: 10px;
 		display: block;
 		margin: 0 auto;
+		clear:both;
 	}
 	.caption {
 		text-align:left;

timeline.css

@@ -25,7 +25,16 @@ html,body{height:100%;padding:0px;margin:0px;}
 #timeline img{max-height:100%;border:1px solid #999999;}
 #timeline a{color:#0088cc;text-decoration:none;}
 #timeline a:hover{color:#005580;text-decoration:underline;}
-#timeline .twitter{text-align:left;background-color:#ffffff;margin-left:auto;margin-right:auto;}#timeline .twitter blockquote{font-size:14px;line-height:20px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
+#timeline .twitter{text-align:left;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:#ffffff;margin-left:auto;margin-right:auto;clear:both;}#timeline .twitter blockquote{font-size:14px;line-height:20px;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
+#timeline .twitter blockquote .quote-mark{color:#666666;}
+#timeline .twitter .created-at{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -889px;width:24px;height:24px;width:24px;height:24px;overflow:hidden;margin-left:15px;display:inline-block;float:right;filter:alpha(opacity=25);-khtml-opacity:0.25;-moz-opacity:0.25;opacity:0.25;}
+#timeline .twitter .created-at:hover{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
+#timeline .twitter .vcard{float:right;}#timeline .twitter .vcard a{color:#333333;}
+#timeline .twitter .vcard a:hover{text-decoration:none;}#timeline .twitter .vcard a:hover .fn{text-decoration:underline;}
+#timeline .twitter .vcard .fn,#timeline .twitter .vcard .nickname{padding-left:42px;}
+#timeline .twitter .vcard .fn{display:block;font-weight:bold;}
+#timeline .twitter .vcard .nickname{margin-top:3px;display:block;color:#666666;}
+#timeline .twitter .vcard .avatar{float:left;display:block;width:32px;height:32px;}#timeline .twitter .vcard .avatar img{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
 #timeline .layout-media .twitter{max-width:70%;}
 #timeline .thumbnail{width:24px;height:24px;overflow:hidden;float:left;margin-right:5px;border:1px solid #cccccc;}
 #timeline .thumbnail.twitter{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -889px;width:24px;height:24px;}
@@ -33,9 +42,11 @@ html,body{height:100%;padding:0px;margin:0px;}
 #timeline .thumbnail.youtube{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1111px;width:24px;height:24px;}
 #timeline .thumbnail.soundcloud{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -659px;width:24px;height:24px;}
 #timeline .thumbnail.map{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -514px;width:26px;height:21px;}
+#timeline .thumbnail.website{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1037px;width:24px;height:24px;}
 #timeline .zFront{z-index:500;}
 #timeline{}#timeline .feature{width:100%;}#timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}#timeline .feature .slider h2.date{line-height:24px;}
 #timeline .feature .slider .date a,#timeline .feature .slider .title a{color:#999999;}
+#timeline .feature .slider blockquote{font-size:28px;text-align:left;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;}
 .slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;background-color:#ffffff;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
 .slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
 .slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;}
@@ -108,5 +119,5 @@ html,body{height:100%;padding:0px;margin:0px;}
 #timeline strong{font-weight:bold;}
 #timeline Q{quotes:'„' '“';font-style:italic;}
 #timeline .credit,#timeline .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
-#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;}
+#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;clear:both;}
 #timeline .caption{text-align:left;margin-top:5px;color:#666666;font-size:11px;line-height:14px;}