Browse Source

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.
pull/13/head
Zach Wise 13 years ago
parent
commit
4db864f0be
  1. BIN
      source/.DS_Store
  2. 5
      source/js/VMM.Util.js
  3. 194
      source/js/VMM.js
  4. 6
      source/less/gfx.less
  5. 5
      source/less/slider.less
  6. 14
      source/less/structure-feature.less
  7. 2
      source/less/structure-navigation.less
  8. 68
      source/less/structure.less
  9. 1
      source/less/type.less
  10. 6
      timeline-min.js
  11. 15
      timeline.css
  12. BIN
      timeline.png

BIN
source/.DS_Store vendored

Binary file not shown.

5
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){

194
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") {
trace("GOOGLE MAP MEDIA CREATE");
} else if (m.type == "google-map") {
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 += "— " + 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 += "</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>";
//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
================================================== */

6
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;

5
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 @@
}
}
}
}

14
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;
}
}

2
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;

68
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,10 +116,69 @@ 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;
}
}
}
}
.layout-media {
@ -149,6 +211,10 @@ html, body {
.icon-map();
//.icon-map-pin();
}
.thumbnail.website {
.icon-website();
}
.zFront {
z-index:500;
}

1
source/less/type.less

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

6
timeline-min.js vendored

File diff suppressed because one or more lines are too long

15
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;}

BIN
timeline.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Loading…
Cancel
Save