Permalink
Browse files

Sample timeline file design

  • Loading branch information...
1 parent 1325c3e commit 0321a717a4957f8fe11e0ba39c48a1408769c042 Zach Moazeni committed May 8, 2012
View
@@ -3,6 +3,6 @@
guard 'coffeescript', :input => 'coffee', :output => 'js'
-guard 'compass', :configuration_file => "compass.rb" do
+guard 'compass' do
watch(/^sass\/(.*)\.s[ac]ss/)
end
View
@@ -0,0 +1,15 @@
+window.placeArrows = ->
+ $("#timeline li").each ->
+ $e = $(@)
+ if $e.css("left") == "40px"
+ $e.attr("data-align", "l")
+ else
+ $e.attr("data-align", "r")
+
+window.refreshTimeline = ->
+ $('#timeline').masonry("reload")
+ placeArrows()
+
+$ ->
+ $('#timeline').masonry()
+ placeArrows()
View
@@ -0,0 +1,55 @@
+/* This strategy was taken from http://demos.9lessons.info/timeline/index.html */
+/* line 3, ../sass/site.scss */
+section {
+ position: relative;
+}
+
+/* line 7, ../sass/site.scss */
+#timeline-line {
+ background-color: #E08989;
+ height: 100%;
+ width: 4px;
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 468px;
+}
+
+/* line 17, ../sass/site.scss */
+#timeline {
+ width: 860px;
+ margin: 0;
+ list-style: none;
+}
+/* line 22, ../sass/site.scss */
+#timeline li {
+ width: 408px;
+ margin: 10px 10px 10px 10px;
+ float: left;
+ background-color: #ffffff;
+ border: solid 1px #B4BBCD;
+ min-height: 50px;
+ text-align: justify;
+ word-wrap: break-word;
+}
+/* line 34, ../sass/site.scss */
+#timeline .corner {
+ display: block;
+ height: 15px;
+ width: 13px;
+ padding: 0;
+ vertical-align: top;
+ z-index: 2;
+ position: absolute;
+ margin-top: 8px;
+}
+/* line 45, ../sass/site.scss */
+#timeline li[data-align=l] .corner {
+ background: url("../img/right.png") no-repeat top right;
+ margin-left: 408px;
+}
+/* line 50, ../sass/site.scss */
+#timeline li[data-align=r] .corner {
+ background: url("../img/left.png") no-repeat top right;
+ margin-left: -13px;
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,25 @@
+(function() {
+
+ window.placeArrows = function() {
+ return $("#timeline li").each(function() {
+ var $e;
+ $e = $(this);
+ if ($e.css("left") === "40px") {
+ return $e.attr("data-align", "l");
+ } else {
+ return $e.attr("data-align", "r");
+ }
+ });
+ };
+
+ window.refreshTimeline = function() {
+ $('#timeline').masonry("reload");
+ return placeArrows();
+ };
+
+ $(function() {
+ $('#timeline').masonry();
+ return placeArrows();
+ });
+
+}).call(this);
View
@@ -0,0 +1,55 @@
+/* This strategy was taken from http://demos.9lessons.info/timeline/index.html */
+
+section {
+ position: relative;
+}
+
+#timeline-line {
+ background-color: #E08989;
+ height: 100%;
+ width: 4px;
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 468px;
+}
+
+#timeline {
+ width:860px;
+ margin: 0;
+ list-style: none;
+
+ li {
+ width: 408px;
+ margin: 10px 10px 10px 10px;
+ float: left;
+ background-color:#ffffff;
+ border:solid 1px #B4BBCD;
+ min-height:50px;
+ text-align:justify;
+ word-wrap:break-word;
+ }
+
+
+ .corner {
+ display: block;
+ height: 15px;
+ width: 13px;
+ padding: 0;
+ vertical-align: top;
+ z-index:2;
+ position: absolute;
+ margin-top: 8px;
+ }
+
+ li[data-align=l] .corner {
+ background: url("../img/right.png") no-repeat top right;
+ margin-left: 408px;
+ }
+
+ li[data-align=r] .corner {
+ background: url("../img/left.png") no-repeat top right;
+ margin-left: -13px;
+ }
+}
+
View
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>gitspective</title>
+ <link href="css/site.css" media="all" rel="stylesheet" type="text/css" />
+</head>
+<body>
+ <header>
+ <h1><img src="https://secure.gravatar.com/avatar/d46a89672353a9c5258e187c8095ea40?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png" alt="zmoazeni's gravatar" /> Zach Moazeni (zmoazeni)</h1>
+ <ul>
+ <li>blog: http://collectiveidea.com</li>
+ <li>email: zach.moazeni@gmail.com</li>
+ </ul>
+ </header>
+ <div id="recent-repos">
+ <h1>Recent Repos</h1>
+ <ol>
+ <li><a href="https://github.com/zmoazeni/my_styles.git">my_styles</a> - My custom generators</li>
+ <li><a href="https://github.com/zmoazeni/my_styles.git">harvested</a> - A Ruby Wrapper for the Harvest API http://www.getharvest.com/</li>
+ <li><a href="https://github.com/zmoazeni/my_styles.git">karkeze</a> - Experimenting with Haskell and Full Text Search</li>
+ </ol>
+ </div>
+
+ <div id="recent-gists">
+ <h1>Recent Gists</h1>
+ <ol>
+ <li><a href="">https://api.github.com/gists/2550988</a></li>
+ <li><a href="">https://api.github.com/gists/2512012</a></li>
+ <li><a href="">https://api.github.com/gists/2550988</a></li>
+ </ol>
+ </div>
+
+ <section>
+ <div id="timeline-line">
+ </div>
+
+ <ol id="timeline">
+ <li style="height: 80px"><span class="corner"></span>foo</li>
+ <li><span class="corner"></span>bar</li>
+ <li><span class="corner"></span>foo asdlfj asdlfkj asdlfkj a alfkj aslfkj asf
+ ajf
+ a dflaskjdf alsdkfj aslfkj asdlfkj aslfkajs flaksjdf alskjfaslkfj aslfkj aslfkj aslfkjsa flkasjflaskjf aslkjf salkfj aslkfj aslfkjas lfkjsa lfakjs flksaj fl</li>
+ <li><span class="corner"></span>bar</li>
+ <li><span class="corner"></span>foo</li>
+ <li><span class="corner"></span>bar</li>
+ <li><span class="corner"></span>foo</li>
+ <li><span class="corner"></span>bar</li>
+ </ol>
+ </section>
+
+ <script src="js-lib/jquery.min.js" type="text/javascript"></script>
+ <script src="js-lib/jquery.masonry.min.js" type="text/javascript"></script>
+ <script src="js/site.js" type="text/javascript"></script>
+</body>
+</html>

0 comments on commit 0321a71

Please sign in to comment.