timeline index

war/src/main/webapp/skins/timeline/article-list.ftl

@@ -7,11 +7,7 @@
             <div class="arrow"></div>
             <time>
                 <span>
-                    <#if article.hasUpdated>
-                    ${article.articleUpdateDate?string("yy-MM-dd HH:mm")}
-                    <#else>
                     ${article.articleCreateDate?string("yy-MM-dd HH:mm")}
-                    </#if>
                 </span>
             </time>
             <h2>
@@ -28,23 +24,31 @@
                     ${topArticleLabel}
                 </sup>
                 </#if>
-                <a rel="nofollow" href="${servePath}${article.articlePermalink}">
-                    ${article.articleViewCount}&nbsp;&nbsp;${viewLabel}
-                </a>
             </h2>
             <p>
                 ${article.articleAbstract}
             </p>
-            <span class="ico-author">
-                <a rel="author" href="${servePath}/authors/${article.authorId}">${article.authorName}</a>
-            </span>
-            <span class="ico-tags">
+            <span class="ico-tags" title="${tagLabel}">
                 <#list article.articleTags?split(",") as articleTag><a rel="category tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a><#if articleTag_has_next>,</#if></#list>
             </span>
-            <span class="ico-comment">
+            <span class="ico-author" title="${authorLabel}">
+                <a rel="author" href="${servePath}/authors/${article.authorId}">${article.authorName}</a>
+            </span>
+            <span class="ico-comment" title="${commentLabel}">
+                <#if article.articleCommentCount == 0>
+                <a rel="nofollow" href="${servePath}${article.articlePermalink}#comments">
+                    ${noCommentLabel}
+                </a>
+                <#else>
                 <a rel="nofollow" href="${servePath}${article.articlePermalink}#comments">
                     ${article.articleCommentCount}
                 </a>
+                </#if>
+            </span>
+            <span class="ico-view" title="${viewLabel}">
+                <a rel="nofollow" href="${servePath}${article.articlePermalink}">
+                    ${article.articleViewCount}
+                </a>
             </span>
         </div>
     </article>

war/src/main/webapp/skins/timeline/css/timeline.css

@@ -57,6 +57,7 @@ a:hover {
 
 img {
     max-width: 100%;
+    vertical-align: middle;
 }
 
 ::selection {
@@ -222,14 +223,18 @@ img {
 .articles .arrow,
 .ico-author,
 .ico-tags, 
-.ico-comment {
+.ico-comment,
+.ico-top,
+.ico-view,
+#search {
     background-repeat: no-repeat;
     background-image: url("../../timeline/images/icons.png");
 }
 
 .ico-author,
 .ico-tags, 
-.ico-comment {
+.ico-comment,
+.ico-view {
     padding-left: 20px;
     background-position: -1px -63px;
     margin-right: 10px;
@@ -242,6 +247,41 @@ img {
 .ico-comment {
     background-position: -1px -41px;
 }
+
+.ico-view {
+    background-position: 0 -122px;
+} 
+
+#search {
+    background-position: 5px -138px;
+    border: medium none;
+    border-radius: 12px 12px 12px 12px;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
+    color: #A5A099;
+    height: 22px;
+    margin-top: 14px;
+    padding-left: 25px;
+    transition: width 0.7s ease 0s;
+    width: 60px;
+}
+
+#search:focus {
+    color: #333;
+    width: 140px;
+}
+
+.ico-top {
+    background-color: #363A3D;
+    background-position: 4px -100px;
+    border-radius: 20em 20em 20em 20em;
+    bottom: 60px;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
+    height: 25px;
+    position: fixed;
+    left: 90%;
+    width: 25px;
+    cursor: pointer;
+}
 /* end icon */
 
 /* start framework */
@@ -281,6 +321,28 @@ img {
 }
 /* end framework */
 
+/* start header */
+.header .title {
+    font-size: 150%;
+    margin: 3px 0 0;
+}
+
+.header a {
+    color: #414141;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.header a:hover {
+    color: #000;
+}
+
+.header li {
+    float: left;
+    list-style-type: none;
+    margin-right: 20px;
+}
+/* end header */
+
 /* start article list */
 .articles {
     position: relative;
@@ -309,6 +371,7 @@ img {
     border-radius: 5px 5px 5px 5px;
     margin-bottom: 20px;
     padding: 15px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .articles > article.l > div {
@@ -351,7 +414,7 @@ img {
 }
 
 .articles > article time {
-    top: -10px;    
+    top: -8px;    
     left: 50%;
     position: absolute;
 }

war/src/main/webapp/skins/timeline/footer.ftl

@@ -32,7 +32,7 @@
         <div class="clear"></div>
     </div>
 </div>
-<div id="goTop" onclick="Util.goTop()">TOP</div>
+<div class="ico-top none" onclick="Util.goTop()" title="TOP"></div>
 <script type="text/javascript">
     var latkeConfig = {
         "servePath": "${servePath}",
@@ -40,7 +40,7 @@
     };
     
     var Label = {
-        "tag1Label": "${tag1Label}",
+        "tagLabel": "${tagLabel}",
         "viewLabel": "${viewLabel}",
         "commentLabel": "${commentLabel}",
         "topArticleLabel": "${topArticleLabel}",

war/src/main/webapp/skins/timeline/header.ftl

 <div class="header">
     <div class="wrapper fn-clear">
         <div class="left">
-            <h1>
+            <h1 class="title">
                 <a href="${servePath}">
                     ${blogTitle}
                 </a>
             </h1>
             <span>${blogSubtitle}</span>
         </div>
-        <#if "" != noticeBoard>
-        <div class="left">
-            ${noticeBoard}
-        </div>
-        </#if>
         <ul class="left">
-            <li>
-                <a rel="nofollow" href="${servePath}/">${indexLabel}</a>
-            </li>  
             <#list pageNavigations as page>
             <li>
                 <a href="${page.pagePermalink}" target="${page.pageOpenTarget}">${page.pageTitle}</a>
@@ -35,10 +27,10 @@
                 <a href="${servePath}/links.html">${linkLabel}</a>
             </li>
             <li>
-                <a rel="alternate" href="${servePath}/blog-articles-feed.do">Atom<img src="${staticServePath}/images/feed.png" alt="Atom"/></a>
+                <a rel="alternate" href="${servePath}/blog-articles-feed.do">Atom <img src="${staticServePath}/images/feed.png" alt="Atom"/></a>
             </li>
         </ul>
-        <form target="_blank" method="get" action="http://www.google.com/search">
+        <form class="right" target="_blank" method="get" action="http://www.google.com/search">
             <input id="search" type="text" name="q" />
             <input type="submit" name="btnG" value="" class="none" />
             <input type="hidden" name="oe" value="UTF-8" />

war/src/main/webapp/skins/timeline/index.ftl

@@ -15,17 +15,13 @@
         </div>
         <#include "footer.ftl">
         <script>
-            var timeline = {
-                colH:[0, 20],
-                $articles:  $(".articles")
-            };
-            
+            timeline.$articles = $(".articles");
             $(window).resize(function () {
                 timeline.colH = [0, 20];
                 timeline.$articles.find("article").each(function () {
                     var $it = $(this),
                     isLeft = timeline.colH[1] > timeline.colH[0],
-                    left = isLeft ? 0 : parseInt(timeline.$articles.width() / 2),
+                    left = isLeft ? 0 : Math.floor(timeline.$articles.width() / 2),
                     top = isLeft ? timeline.colH[0] : timeline.colH[1];
                     $it.css({
                         "left": left + "px",
@@ -44,7 +40,7 @@
                 timeline.$articles.height(timeline.colH[0] > timeline.colH[1] ? timeline.colH[0] : timeline.colH[1]);
             });
             
-            $(window).resize();
+            $(window).resize();$(window).resize();
         </script>
     </body>
 </html>

war/src/main/webapp/skins/timeline/js/timeline.js

@@ -20,6 +20,55 @@
  * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
  * @version 1.0.0.1, Jan 14, 2013
  */
+var timeline = {
+    $articles: $(".articles"),
+    layoutArticleList: function () {
+        timeline.colH = [0, 20];
+        timeline.$articles.find("article").each(function () {
+            var $it = $(this),
+            isLeft = timeline.colH[1] > timeline.colH[0],
+            left = isLeft ? 0 : Math.floor(timeline.$articles.width() / 2),
+            top = isLeft ? timeline.colH[0] : timeline.colH[1];
+            $it.css({
+                "left": left + "px",
+                "top": top + "px"
+            });
+                
+            if (isLeft) {
+                $it.addClass("l");
+            } else {
+                $it.addClass("r");
+            }
+                
+            timeline.colH[( isLeft ? '0' : '1' )] += parseInt($it.outerHeight(true));
+        });
+            
+        timeline.$articles.height(timeline.colH[0] > timeline.colH[1] ? timeline.colH[0] : timeline.colH[1]);
+    },
+    
+    initArticleList: function () {
+        $(window).resize(function () {
+            timeline.layoutArticleList();
+        });
+        $(window).resize();
+        $(window).resize();
+    },
+    
+    init: function () {
+        $(window).scroll(function () {
+           if ($(window).scrollTop() > 60) {
+               $(".ico-top").show();
+           } else {
+               $(".ico-top").hide();
+           }
+        });
+        
+        if ($(".articles").length === 1) {
+            timeline.initArticleList();
+        }
+    }
+};
+
 var goTranslate = function () {
     window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);  
 };
@@ -28,4 +77,6 @@ var goTranslate = function () {
     Util.init();
     Util.replaceSideEm($(".recent-comments-content"));
     Util.buildTags("tagsSide");
+    
+    timeline.init();
 })();
\ No newline at end of file

war/src/main/webapp/skins/timeline/lang/lang_en_US.properties

@@ -60,6 +60,7 @@ em12Label=Heart
 em13Label=Heart Broken
 em14Label=Devil
 commentLabel=Comment
+noCommentLabel=No Comment
 viewLabel=View
 authorLabel=Author
 previousPageLabel=Previous Page

war/src/main/webapp/skins/timeline/lang/lang_zh_CN.properties

@@ -62,6 +62,7 @@ em12Label=\u7231\u5fc3
 em13Label=\u5fc3\u788e
 em14Label=\u9b54\u9b3c
 commentLabel=\u8bc4\u8bba
+noCommentLabel=\u65e0\u8bc4\u8bba
 viewLabel=\u6d4f\u89c8
 authorLabel=\u4f5c\u8005
 previousPageLabel=\u4e0a\u4e00\u9875
@@ -70,7 +71,7 @@ firstPageLabel=\u7b2c\u4e00\u9875
 lastPageLabel=\u6700\u540e\u4e00\u9875
 archive1Label=\u5b58\u6863\uff1a
 author1Label=\u4f5c\u8005\uff1a
-tag1Label=\u6807\u7b7e\uff1a
+tagLabel=\u6807\u7b7e
 sorryLabel=\u5bf9\u4e0d\u8d77\uff01
 notFoundLabel=\u627e\u4e0d\u5230\uff01
 returnTo1Label=\u8fd4\u56de\uff1a

war/src/main/webapp/top-bar.ftl

@@ -7,7 +7,6 @@
         background-image: -webkit-linear-gradient(#FFFFFF,#E5E5E5);
         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E5E5E5');
         border-bottom: 1px solid #E5E5E5;
-        height: 26px;
         line-height: 26px;
         display: none;
     }