Skip to content
Browse files

Merge branch 'master' of github.com:pestrella/social-tv-timeline

  • Loading branch information...
2 parents 5d5e331 + 7d8a15d commit ac3344b71ce7d60386f7fdfedd3c825f68376ac1 Paolo Estrella committed Jan 29, 2012
View
31 demo/css/main.css
@@ -1,20 +1,42 @@
@import url(http://fonts.googleapis.com/css?family=Chango);
+html {
+background-color: #0D0D0D;
+}
+
+body {
+background-color: #0D0D0D;
+}
+
.content
{
margin-top: 5px;
}
.topbar.footer {
-height: 190px;
+height: 310px;
bottom: 0;
top: auto;
}
.topbar.footer .fill {
height: 100%;
- border-top: 2px solid #c3c3c3;
+}
+
+.topbar.footer .fill.menu {
+ height: 39px;
+
+ border-top: 1px solid #1D1D1D;
+
+ /* default background colour, for all layout engines that don't implement gradients */
+ background: #000000;
+
+ /* gecko based browsers */
+ background: -moz-linear-gradient(top, #0D0D0D, #000000);
+
+ /* webkit based browsers */
+ background: -webkit-gradient(linear, left top, left bottom, from(#0D0D0D), to(#000000));
}
.topbar.footer .fill.dark {
@@ -115,6 +137,11 @@ background-image:url(../images/back_150x150.gif);
font-family: 'Chango', cursive;
}
+.dropdown-toggle {
+ font-size: 14px;
+ font-weight: bold;
+}
+
.page-topborder {
border-top: 1px solid #C3C3C3;
width: 480px;
View
86 demo/css/timeline.css
@@ -1,23 +1,20 @@
-body, select, input, textarea, button {
-color: #333;
-font-size: 12px;
-font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
-}
-
-body {
-background-image: url(../images/dark-pattern-bg-body.png);
-background-repeat: repeat;
-background-position: left top;
+div.pane {
+clear: left;
+margin: 0 0 0 10px;
+position: relative;
+width: 940px;
+height: 280px;
}
#lane-viewport {
color: #333;
background-image: url(../images/dark-pattern-bg-body.png);
background-repeat: repeat;
background-position: left top;
-overflow: hidden;
position: relative;
+overflow: auto;
+overflow-y: hidden;
z-index: 1;
visibility: hidden;
}
@@ -40,17 +37,18 @@ background-color: #C1C1C1;
-moz-border-radius: 15px;
border-radius: 15px;
top: 22px;
-left: -3px;
+left: 42px;
z-index: 10000000000000000000000000;
}
.lane-slot:first-child .lane-slot-title {
-padding-left: 5px;
+/*padding-left: 5px;*/
}
.lane-slot-title {
height: 21px;
padding-top: 4px;
+padding-left: 32px;
border-bottom: 1px solid #444;
-moz-box-shadow: inset 0 -1px 0 0 #000;
-webkit-box-shadow: inset 0 -1px 0 0 #000;
@@ -63,15 +61,16 @@ letter-spacing: 0;
.lane-slot-memos {
padding: 20px 20px 0 20px;
/*border-left: 1px solid black;*/
--moz-box-shadow: inset 1px 0 0 0 #444;
+/*-moz-box-shadow: inset 1px 0 0 0 #444;
-webkit-box-shadow: inset 1px 0 0 0 #444;
box-shadow: inset 1px 0 0 0 #444;
+*/
}
.memo {
width: 200px;
margin: 0 20px 20px 0;
-overflow: hidden;
+/*overflow: hidden;*/
background: white;
color: #333;
cursor: pointer;
@@ -82,10 +81,23 @@ font-size: 15px;
box-shadow: 0 2px 2px 1px #000;
}
+.arrowUp {
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #FFFFFF;
+ width: 0;
+ top: -9px;
+ left: 15px;
+ display:block;
+ position:absolute;
+}
+
.memoTitleBar {
height: 25px;
+padding-top: 5px;
+padding-left: 10px;
overflow: hidden;
-margin-top: 5px;
+margin-top: 0;
border-bottom: 1px solid #DDD;
}
@@ -114,27 +126,55 @@ margin: 0 5px;
}
.memo .memoContent.fixed-photo-height, .memo .fixed-photo-height {
-height: 80px;
-}
-
-.memo .memoContent.fixed-photo-height, .memo .fixed-photo-height {
-height: 80px;
+height: 180px;
}
.memoContent {
overflow: hidden;
position: relative;
}
+/*
.memoContent img {
display: block;
margin: 0 auto 0 auto;
max-width: 200px;
}
+*/
+
+.memoContent .wrap {
+ /* force the div to properly contain the floated images: */
+ position:relative;
+ float:left;
+ clear:none;
+ padding-left: 15px;
+ overflow:hidden;
+}
+.memoContent .wrap img {
+ position:relative;
+ z-index:1;
+ max-width: 170px;
+}
+.memoContent .wrap .desc {
+ display:block;
+ position:absolute;
+ width:90%;
+ height:68px;
+ bottom:48px;
+ left:15px;
+ z-index:2;
+ text-align:left;
+ font-size: 11px;
+ padding: 5px;
+ color: #FFFFFF;
+ background-color: rgba(0,0,0,0.7);
+ line-height: 12px;
+}
.memoFooterBar {
-min-height: 26px;
-background: #E5E5E5 url(../images/sm-memo-bottom.png) no-repeat left top;
+min-height: 5px;
+background-color: #E5E5E5;
+border-top: 1px solid #C3C3C3;
overflow: hidden;
border-radius: 0 0 5px 5px;
}
View
BIN demo/images/chinesenewyear_news.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demo/images/chinesenewyear_news.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
228 demo/index-BACKUP-11pm.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>TV:TIME</title>
+
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+ <meta charset="UTF-8" />
+ <meta http-equiv="content-language" content="en" />
+
+ <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-extension.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="css/main.css"/>
+
+ <link rel="stylesheet" type="text/css" media="all" href="css/timeline.css">
+
+ <!-- site styles -->
+ <link href="http://mediaelementjs.com/css/reset.debug.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/960.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/site.css" rel="Stylesheet" />
+
+ <!-- mediaelement -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+ <script src="http://mediaelementjs.com/js/mejs-2.6.4/mediaelement-and-player.min.js"></script>
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mediaelementplayer.min.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mejs-skins.css" rel="Stylesheet" />
+
+ <!-- syntax -->
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shCore.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushJScript.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushCss.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushXml.js"></script>
+ <!-- <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCore.css" rel="stylesheet" /> -->
+ <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCoreDefault.css" rel="stylesheet" />
+
+ <style>
+ .syntaxhighlighter {
+ overflow: hidden !important;
+ padding: 10px;
+ }
+ .syntaxhighlighter .gutter .line {
+ border-color: #777 !important;
+ }
+ </style>
+
+ <meta name="viewport" content="width=1000, user-scalable=yes" />
+
+ <script src="js/player.js" type="text/javascript"></script>
+
+ </head>
+ <body>
+
+ <div class="topbar footer">
+ <div class="fill dark">
+ <div class="container fixed">
+
+ <!--
+ <ul class="nav secondary-nav">
+ <li>
+ <h3>
+ <a href="index.html">
+ TV:TIME
+ </a>
+ </h3>
+ </li>
+ -->
+
+<!-- timeline -->
+
+ <div id="lane-viewport" style="visibility: visible; height: 238px; cursor: default; ">
+
+ <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="height: 238px; width: 20702px; ">
+
+ <div class="lane-slot" id="1253491200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">00:11:52</div>
+ <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 220px; overflow-x: hidden; overflow-y: hidden; ">
+ <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003942047150" class="memo flickr isotope-item" data-time="1253531956" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+
+ <div class="memoTitleBar">
+ <div class="memoServiceIcon"></div>
+ <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard"> <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
+ </a>
+ </div>
+
+ <div class="memoContent fixed-photo-height">
+ <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS-66_TgDA2lClIbHHpiLthU9LzBYtTam0Zd63OOcXeE8Fs2ZenmA" title="">
+ </div>
+
+ <div class="memoFooterBar">
+ <!--<ul class="memoActions">
+ <li><div class="memo_icon memo_comments">0</div></li>
+ <li><div class="memo_icon memo_like">0</div></li>
+ </ul>-->
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="lane-slot" id="1247875200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">00:13:12</div>
+
+ <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
+ <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003731103889" class="memo flickr isotope-item" data-time="1247883279" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+ <div class="memoTitleBar">
+ <div class="memoServiceIcon"></div>
+ <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
+ <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
+ </a>
+ </div>
+ <div class="memoContent fixed-photo-height">
+ <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcT3nTnF-AaOOg7eWYnjvHGcJrSw05JGaWsT6PhbD3xHlq6Z1CNCFg" title="iphone_pic">
+ </div>
+ <div class="memoFooterBar">
+ <!--<ul class="memoActions">
+ <li><div class="memo_icon memo_comments">0</div></li>
+ <li><div class="memo_icon memo_like">0</div></li>
+ </ul>-->
+ </div>
+ </div>
+
+ <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 240px; top: 20px; cursor: pointer; ">
+ <div class="memoTitleBar">
+ <div class="memoServiceIcon"></div>
+ <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
+ <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
+ </a>
+ </div>
+ <div class="memoContent">
+ <p>i love deers :)</p>
+ </div>
+ <div class="memoFooterBar">
+ <!--<ul class="memoActions">
+ <li><div class="memo_icon memo_comments">0</div></li>
+ <li><div class="memo_icon memo_like">0</div></li>
+ </ul>-->
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ <div class="lane-slot" id="1247875200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">00:15:10</div>
+
+ <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+ <div class="memoTitleBar">
+ <div class="memoServiceIcon"></div>
+ <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
+ <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
+ </a>
+ </div>
+ <div class="memoContent">
+ <p><a href="http://en.wikipedia.org/wiki/Deer" target="_blank">Deer</a> are the ruminant mammals forming the family Cervidae.</p>
+ </div>
+ <div class="memoFooterBar">
+ <!--<ul class="memoActions">
+ <li><div class="memo_icon memo_comments">0</div></li>
+ <li><div class="memo_icon memo_like">0</div></li>
+ </ul>-->
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+
+<!-- timeline:end -->
+
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <div class="content">
+ <div class="row">
+ <div class="span2">&nbsp;</div>
+ <div class="span12">
+
+ <!-- video player -->
+ <div id="container">
+
+ <div class="plugin-example-container">
+
+ <div class="plugin-example">
+
+ <video id="player1" width="640" height="360" controls="control" preload="none">
+ <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
+ <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
+ <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
+ <object width="540" height="303" type="application/x-shockwave-flash" data="http://mediaelementjs.com/js/mediaelementplayer.swf">
+ <param name="movie" value="http://mediaelementjs.com/js/mediaelementplayer.swf" />
+ <param name="flashvars" value="controls=true&amp;file=/media/echo-hereweare.mp4" />
+ <img src="http://mediaelementjs.com/media/echo-hereweare.jpg" width="540" height="303" title="No video playback capabilities" />
+ </object>
+ </video>
+
+ </div>
+
+ </div>
+
+ </div>
+ <!-- end video player -->
+
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+ </body>
+</html>
View
244 demo/index-chico.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>TV:TIME</title>
+
+ <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+ <meta charset="UTF-8" />
+ <meta http-equiv="content-language" content="en" />
+
+ <!-- mediaelementjs -->
+ <link href="http://mediaelementjs.com/css/reset.debug.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/960.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/site.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mediaelementplayer.min.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mejs-skins.css" rel="Stylesheet" />
+ <!-- <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCore.css" rel="stylesheet" /> -->
+ <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCoreDefault.css" rel="stylesheet" />
+ <style>
+ .plugin-example-container {
+ background: #0D0D0D;
+ padding: 5px;
+ }
+ .plugin-example {
+ margin: 10px auto;
+ }
+ .syntaxhighlighter {
+ overflow: hidden !important;
+ padding: 10px;
+ }
+ .syntaxhighlighter .gutter .line {
+ border-color: #777 !important;
+ }
+ </style>
+
+ <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-extension.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="css/main.css"/>
+
+ <link rel="stylesheet" type="text/css" media="all" href="css/timeline.css">
+
+ <!-- mediaelement -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+ <script src="http://mediaelementjs.com/js/mejs-2.6.4/mediaelement-and-player.min.js"></script>
+ <script src="js/bootstrap-dropdown.js"></script>
+ <script>
+ $(function () {
+ console.log('drop');
+ $('#bottommenu').dropdown();
+ });
+ </script>
+
+ <!-- syntax -->
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shCore.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushJScript.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushCss.js"></script>
+ <script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushXml.js"></script>
+
+
+ <meta name="viewport" content="width=1000, user-scalable=yes" />
+
+ <script src="js/player.js" type="text/javascript"></script>
+
+ </head>
+ <body>
+
+ <div class="topbar footer">
+
+ <div class="fill menu">
+ <div id="bottommenu" class="container fixed">
+ <ul class="nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Filter By</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Informational</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Your Friends</a></li>
+ <li><a href="#">Editor&apos;s Pick</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav secondary-nav">
+ <li>
+ <h3><a href="index.html">TV:TIME</a></h3>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="fill dark">
+ <div class="container fixed">
+
+ <!--
+ <ul class="nav secondary-nav">
+ <li>
+ <h3>
+ <a href="index.html">
+ TV:TIME
+ </a>
+ </h3>
+ </li>
+ -->
+
+<!-- timeline -->
+
+ <div id="pane-target" class="pane">
+ <div id="lane-viewport" style="visibility: visible; cursor: default; ">
+
+ <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="width: 1702px; ">
+
+ <div class="lane-slot" id="1253491200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">00:02</div>
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 420px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003942047150" class="memo flickr isotope-item" data-time="1253531956" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+
+ <div class="arrowUp"></div>
+
+ <div class="memoTitleBar">
+ <b>Chinese New Year</b>
+ </div>
+
+ <div class="memoContent fixed-photo-height">
+ <div class="wrap">
+ <h3 class="desc">Chinese New Year is the most important of the traditional Chinese holidays. In China, it is known as "Spring Festival" …</h3>
+ <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/ChineseNewYearBoston01.jpg/170px-ChineseNewYearBoston01.jpg" title="">
+ </div>
+ </div>
+
+ <div class="memoFooterBar"></div>
+
+ </div>
+
+ </div>
+ </div>
+
+ <div class="lane-slot" id="1247875200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">03:12</div>
+
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 220px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+ <div class="arrowUp"></div>
+ <div class="memoTitleBar">
+ <div class="memoServiceIcon"></div>
+ <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
+ <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
+ </a>
+ </div>
+ <div class="memoContent">
+ <p>Kung Hei Fat Choi!!</p>
+ </div>
+ <div class="memoFooterBar">
+ <!--<ul class="memoActions">
+ <li><div class="memo_icon memo_comments">0</div></li>
+ <li><div class="memo_icon memo_like">0</div></li>
+ </ul>-->
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+
+ <div class="lane-slot" id="1247875200">
+ <div class="lane-circle"></div>
+ <div class="lane-slot-title">05:10</div>
+
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003942047150" class="memo flickr isotope-item" data-time="1253531956" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+
+ <div class="arrowUp"></div>
+
+ <div class="memoTitleBar">
+ <b>Be Lucky</b>
+ </div>
+
+ <div class="memoContent fixed-photo-height">
+ <div class="wrap">
+ <h3 class="desc">Millions of Chinese around the world welcome the prosperous Year Of The Dragon.</h3>
+ <img src="images/chinesenewyear_news.png" title="">
+ </div>
+ </div>
+
+ <div class="memoFooterBar"></div>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+
+<!-- timeline:end -->
+
+ </div>
+
+ </div>
+ </div>
+
+ <div class="container">
+
+ <div class="content">
+ <div class="row">
+ <div class="span2">&nbsp;</div>
+ <div class="span12">
+
+ <!-- video player -->
+ <div id="container">
+
+ <div class="plugin-example-container">
+
+ <div class="plugin-example">
+
+ <video id="player1" width="620" height="340" controls="control" preload="none">
+ <source src="http://dl.dropbox.com/u/21463137/TVTime/s_chin_ec_01638_16x9_bb.mp4" type="video/mp4" />
+ </video>
+
+ </div>
+
+ </div>
+
+ </div>
+ <!-- end video player -->
+
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+ </body>
+</html>
View
178 demo/index.html
@@ -9,40 +9,54 @@
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en" />
+ <!-- mediaelementjs -->
+ <link href="http://mediaelementjs.com/css/reset.debug.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/960.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/css/site.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mediaelementplayer.min.css" rel="Stylesheet" />
+ <link href="http://mediaelementjs.com/js/mejs-2.6.4/mejs-skins.css" rel="Stylesheet" />
+ <!-- <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCore.css" rel="stylesheet" /> -->
+ <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCoreDefault.css" rel="stylesheet" />
+ <style>
+ .plugin-example-container {
+ background: #0D0D0D;
+ padding: 5px;
+ }
+ .plugin-example {
+ margin: 10px auto;
+ }
+ .syntaxhighlighter {
+ overflow: hidden !important;
+ padding: 10px;
+ }
+ .syntaxhighlighter .gutter .line {
+ border-color: #777 !important;
+ }
+ </style>
+
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-extension.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/main.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/timeline.css">
- <!-- site styles -->
- <link href="http://mediaelementjs.com/css/reset.debug.css" rel="Stylesheet" />
- <link href="http://mediaelementjs.com/css/960.css" rel="Stylesheet" />
- <link href="http://mediaelementjs.com/css/site.css" rel="Stylesheet" />
-
<!-- mediaelement -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://mediaelementjs.com/js/mejs-2.6.4/mediaelement-and-player.min.js"></script>
- <link href="http://mediaelementjs.com/js/mejs-2.6.4/mediaelementplayer.min.css" rel="Stylesheet" />
- <link href="http://mediaelementjs.com/js/mejs-2.6.4/mejs-skins.css" rel="Stylesheet" />
+ <script src="js/bootstrap-dropdown.js"></script>
+ <script>
+ $(function () {
+ console.log('drop');
+ $('#bottommenu').dropdown();
+ });
+ </script>
<!-- syntax -->
<script src="http://mediaelementjs.com/js/syntaxhighlighter/shCore.js"></script>
<script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushJScript.js"></script>
<script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushCss.js"></script>
<script src="http://mediaelementjs.com/js/syntaxhighlighter/shBrushXml.js"></script>
- <!-- <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCore.css" rel="stylesheet" /> -->
- <link href="http://mediaelementjs.com/js/syntaxhighlighter/shCoreDefault.css" rel="stylesheet" />
-
- <style>
- .syntaxhighlighter {
- overflow: hidden !important;
- padding: 10px;
- }
- .syntaxhighlighter .gutter .line {
- border-color: #777 !important;
- }
- </style>
+
<meta name="viewport" content="width=1000, user-scalable=yes" />
@@ -52,6 +66,28 @@
<body>
<div class="topbar footer">
+
+ <div class="fill menu">
+ <div id="bottommenu" class="container fixed">
+ <ul class="nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Filter By</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Informational</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Your Friends</a></li>
+ <li><a href="#">Editor&apos;s Pick</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav secondary-nav">
+ <li>
+ <h3><a href="index.html">TV:TIME</a></h3>
+ </li>
+ </ul>
+ </div>
+ </div>
+
<div class="fill dark">
<div class="container fixed">
@@ -68,69 +104,54 @@
<!-- timeline -->
- <div id="lane-viewport" style="visibility: visible; height: 238px; cursor: default; ">
+ <div id="pane-target" class="pane">
+ <div id="lane-viewport" style="visibility: visible; cursor: default; ">
- <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="height: 238px; width: 20702px; ">
+ <div id="lane" data-lane-id="t8gqrmzsbd64s519urkho4ofe3le9o8x" data-lane-title="Personal Lane" data-lane-description="A personal lane containing all your content." data-user-id="1f09d08636818854b1c1ccf907470305" style="width: 1702px; ">
<div class="lane-slot" id="1253491200">
<div class="lane-circle"></div>
- <div class="lane-slot-title">00:11:52</div>
- <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 220px; overflow-x: hidden; overflow-y: hidden; ">
+ <div class="lane-slot-title">00:02</div>
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 420px; overflow-x: hidden; overflow-y: hidden; ">
+
<div id="1f09d08636818854b1c1ccf907470305flickr50573844N003942047150" class="memo flickr isotope-item" data-time="1253531956" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+ <div class="arrowUp"></div>
+
<div class="memoTitleBar">
- <div class="memoServiceIcon"></div>
- <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard"> <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
- </a>
+ <b>Chinese New Year</b>
</div>
<div class="memoContent fixed-photo-height">
- <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS-66_TgDA2lClIbHHpiLthU9LzBYtTam0Zd63OOcXeE8Fs2ZenmA" title="">
+ <div class="wrap">
+ <h3 class="desc">Chinese New Year is the most important of the traditional Chinese holidays. In China, it is known as "Spring Festival" …</h3>
+ <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/ChineseNewYearBoston01.jpg/170px-ChineseNewYearBoston01.jpg" title="">
+ </div>
</div>
- <div class="memoFooterBar">
- <!--<ul class="memoActions">
- <li><div class="memo_icon memo_comments">0</div></li>
- <li><div class="memo_icon memo_like">0</div></li>
- </ul>-->
- </div>
+ <div class="memoFooterBar"></div>
</div>
+
</div>
</div>
<div class="lane-slot" id="1247875200">
<div class="lane-circle"></div>
- <div class="lane-slot-title">00:13:12</div>
+ <div class="lane-slot-title">03:12</div>
- <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
- <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003731103889" class="memo flickr isotope-item" data-time="1247883279" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
- <div class="memoTitleBar">
- <div class="memoServiceIcon"></div>
- <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
- <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
- </a>
- </div>
- <div class="memoContent fixed-photo-height">
- <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcT3nTnF-AaOOg7eWYnjvHGcJrSw05JGaWsT6PhbD3xHlq6Z1CNCFg" title="iphone_pic">
- </div>
- <div class="memoFooterBar">
- <!--<ul class="memoActions">
- <li><div class="memo_icon memo_comments">0</div></li>
- <li><div class="memo_icon memo_like">0</div></li>
- </ul>-->
- </div>
- </div>
-
- <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 240px; top: 20px; cursor: pointer; ">
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 220px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+ <div class="arrowUp"></div>
<div class="memoTitleBar">
<div class="memoServiceIcon"></div>
<a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
<img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
</a>
</div>
<div class="memoContent">
- <p>i love deers :)</p>
+ <p>Kung Hei Fat Choi!!</p>
</div>
<div class="memoFooterBar">
<!--<ul class="memoActions">
@@ -147,26 +168,27 @@
<div class="lane-slot" id="1247875200">
<div class="lane-circle"></div>
- <div class="lane-slot-title">00:15:10</div>
+ <div class="lane-slot-title">05:10</div>
- <div class="lane-slot-memos isotope" style="position: relative; height: 193px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
+ <div class="lane-slot-memos isotope" style="position: relative; height: 280px; width: 440px; overflow-x: hidden; overflow-y: hidden; ">
+
+ <div id="1f09d08636818854b1c1ccf907470305flickr50573844N003942047150" class="memo flickr isotope-item" data-time="1253531956" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
+
+ <div class="arrowUp"></div>
- <div id="1f09d08636818854b1c1ccf907470305twitter248705882704342522" class="memo twitter isotope-item" data-time="1247909578" style="position: absolute; left: 20px; top: 20px; cursor: pointer; ">
<div class="memoTitleBar">
- <div class="memoServiceIcon"></div>
- <a href="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" class="memoAvatar killEvent" title="Go to Dashboard">
- <img src="http://memolane.com/users/1f09d08636818854b1c1ccf907470305/image.small" height="20" width="20">
- </a>
- </div>
- <div class="memoContent">
- <p><a href="http://en.wikipedia.org/wiki/Deer" target="_blank">Deer</a> are the ruminant mammals forming the family Cervidae.</p>
+ <b>Be Lucky</b>
</div>
- <div class="memoFooterBar">
- <!--<ul class="memoActions">
- <li><div class="memo_icon memo_comments">0</div></li>
- <li><div class="memo_icon memo_like">0</div></li>
- </ul>-->
+
+ <div class="memoContent fixed-photo-height">
+ <div class="wrap">
+ <h3 class="desc">Millions of Chinese around the world welcome the prosperous Year Of The Dragon.</h3>
+ <img src="images/chinesenewyear_news.png" title="">
+ </div>
</div>
+
+ <div class="memoFooterBar"></div>
+
</div>
</div>
@@ -176,12 +198,13 @@
</div>
</div>
+ </div>
<!-- timeline:end -->
- </ul>
</div>
- </div>
+
+ </div>
</div>
<div class="container">
@@ -198,15 +221,8 @@
<div class="plugin-example">
- <video id="player1" width="640" height="360" controls="control" preload="none">
- <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
- <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
- <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
- <object width="540" height="303" type="application/x-shockwave-flash" data="http://mediaelementjs.com/js/mediaelementplayer.swf">
- <param name="movie" value="http://mediaelementjs.com/js/mediaelementplayer.swf" />
- <param name="flashvars" value="controls=true&amp;file=/media/echo-hereweare.mp4" />
- <img src="http://mediaelementjs.com/media/echo-hereweare.jpg" width="540" height="303" title="No video playback capabilities" />
- </object>
+ <video id="player1" width="620" height="340" controls="control" preload="none">
+ <source src="http://dl.dropbox.com/u/21463137/TVTime/s_chin_ec_01638_16x9_bb.mp4" type="video/mp4" />
</video>
</div>
View
55 demo/js/bootstrap-dropdown.js
@@ -0,0 +1,55 @@
+/* ============================================================
+ * bootstrap-dropdown.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#dropdown
+ * ============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function( $ ){
+
+ "use strict"
+
+ /* DROPDOWN PLUGIN DEFINITION
+ * ========================== */
+
+ $.fn.dropdown = function ( selector ) {
+ return this.each(function () {
+ $(this).delegate(selector || d, 'click', function (e) {
+ var li = $(this).parent('li')
+ , isActive = li.hasClass('open')
+
+ clearMenus()
+ !isActive && li.toggleClass('open')
+ return false
+ })
+ })
+ }
+
+ /* APPLY TO STANDARD DROPDOWN ELEMENTS
+ * =================================== */
+
+ var d = 'a.menu, .dropdown-toggle'
+
+ function clearMenus() {
+ $(d).parent('li').removeClass('open')
+ }
+
+ $(function () {
+ $('html').bind("click", clearMenus)
+ $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
+ })
+
+}( window.jQuery || window.ender );

0 comments on commit ac3344b

Please sign in to comment.
Something went wrong with that request. Please try again.