metro 改进

metro-hot/article-list.ftl

@@ -24,19 +24,19 @@
             </div>
 
             <h2 class="article-title">
-                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
-                    ${article.articleTitle}
-                </a>
                 <#if article.hasUpdated>
-                <sup>
+                <span>
-                    ${updatedLabel}
+                    [${updatedLabel}]
-                </sup>
+                </span>
                 </#if>
                 <#if article.articlePutTop>
-                <sup>
+                <span>
-                    ${topArticleLabel}
+                    [${topArticleLabel}]
-                </sup>
+                </span>
                 </#if>
+                <a rel="bookmark" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}">
+                    ${article.articleTitle}
+                </a>
             </h2>
             <div class="article-body">
                 ${article.articleAbstract}

metro-hot/article.ftl

@@ -24,17 +24,17 @@
                     </span>
 
                     <h2>  
-                        ${article.articleTitle}
                         <#if article.hasUpdated>
-                        <sup>
+                        <span>
-                            ${updatedLabel}
+                            [${updatedLabel}]
-                        </sup>
+                        </span>
                         </#if>
                         <#if article.articlePutTop>
-                        <sup>
+                        <span>
-                            ${topArticleLabel}
+                            [${topArticleLabel}]
-                        </sup>
+                        </span>
                         </#if>
+                        ${article.articleTitle}
                     </h2>
                     <div data-ico="&#x003b;" title="${tagLabel}">
                         <#list article.articleTags?split(",") as articleTag>

metro-hot/css/metro-hot-responsive.css

@@ -17,7 +17,7 @@
 * skin metro-hot responsive style
 *
 * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
-* @version 1.0.0.5, Jul 24, 2013
+* @version 1.0.0.6, Sep 30, 2013
 */
 @media (max-width: 860px) and (min-width: 460px) {
     .wrapper {
@@ -45,11 +45,11 @@
     }
 
     #comments .article-body {
-        width: 350px;
+        width: 340px;
     }
 
     #dynamic #comments .article-body {
-        width: 293px;
+        width: 283px;
     }
 
     .most-comment,
@@ -156,43 +156,59 @@
         margin-bottom: 20px;
     }
 
+    .tags-tile {
+        margin-bottom: 50px;
+    }
+
+    .article-title {
+        width: 280px;
+    }
+
+    .archives {
+        margin-right: 0;
+    }
+
+    .article-info > a {
+        padding: 3px;
+        font-size: 12px;
+    }
+
+    #dynamic #comments {
+        padding-left: 15px;
+    }
+
+    .tags-tile .title,
+    .links-tile .title,
+    .most-comment .title,
+    .most-view .title {
+        float: right;
+        font-size: 15px;
+        font-weight: bold;
+        margin: 20px 0 0 40px;
+    }
+
     .most-comment,
     .most-view {
         width: 249px;
-        margin-bottom: 0;
+        margin-left: 0;
-        margin-top: 20px;
     }
 
     .most-comment .text,
     .most-view .text {
         margin-right: 0;
         width: 274px;
-    }
+        font-size: 12px;
-    
+        font-weight: normal;
-    .most-view {
-        margin-left: 0;
     }
 
     .tags-tile,
-    .links-tile,
+    .links-tile {
-    .archives-tile {
         width: 249px;
-        margin-top: 20px;
-        margin-bottom: 0;
-    }
-
-    .tags-tile .text,
-    .links-tile .text,
-    .archives-tile .text {
-        width: 274px;
-    }
-
-    .links-tile,
-    .tags-tile {
         margin-left: 0;
     }
 
-    .tags-tile {
+    .tags-tile .text,
-        margin-bottom: 50px;
+    .links-tile .text {
+        width: 249px;
     }
 }

metro-hot/css/metro-hot-responsive.min.css

@@ -1 +1,16 @@
+/**
+ * Copyright (c) 2009, 2010, 2011, 2012, 2013, B3log Team
+ *
+ * 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.
+ */
 @media (max-width:860px) and (min-width:460px){.wrapper{width:720px;} .main{width:460px;} .form{width:auto;} .form input{width:395px;} .form textarea{width:434px;} .em00,.em01,.em02,.em03,.em04,.em05,.em06,.em07,.em08,.em09,.em10,.em11,.em12,.em13,.em14{margin-right:4px;} #comments .article-body{width:350px;} #dynamic #comments .article-body{width:293px;} .most-comment,.most-view{width:300px;margin-bottom:20px;margin-top:40px;} .most-comment .text,.most-view .text{width:195px;} .tags-tile,.links-tile,.archives-tile{width:670px;} .tags-tile .text,.links-tile .text,.archives-tile .text{width:580px;} .links-tile,.tags-tile{margin-left:0;}}@media (max-width:460px){.side,.top-info,.header>.fn-left,.comment-main{float:none;} .wrapper,.article-list>div,.main,.side{width:300px;} .sub-nav>.pagination,.footer,#comments>div>img,#emotions{display:none;} #search{width:237px;} .side-tile{width:94px;} .online-count,.user,.clear,.notice-board,.share,.article-relative{width:249px;} .main .pagination,.main>.article-body,.comment-disabled,#comments>div{margin-right:0;} .side>div,#comments .article-body{position:static !important;width:auto !important;} .share div.text{left:173px;} .form{width:auto;} .form input{width:240px;} .form textarea{width:285px;height:150px;} #dynamic .main{margin-bottom:20px;} .most-comment,.most-view{width:249px;margin-bottom:0;margin-top:20px;} .most-comment .text,.most-view .text{margin-right:0;width:274px;} .most-view{margin-left:0;} .tags-tile,.links-tile,.archives-tile{width:249px;margin-top:20px;margin-bottom:0;} .tags-tile .text,.links-tile .text,.archives-tile .text{width:274px;} .links-tile,.tags-tile{margin-left:0;} .tags-tile{margin-bottom:50px;}}

metro-hot/css/metro-hot.css

@@ -18,7 +18,7 @@
 * skin metro-hot style
 *
 * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
-* @version 1.0.1.0, Jul 31, 2013
+* @version 1.0.1.1, Sep 30, 2013
 */
 /* start base */
 @font-face {
@@ -282,6 +282,7 @@ textarea {
 
 .header .title {
     color: #E61E1E;
+    padding: 30px 0;
 }
 
 .header .title:hover {
@@ -387,7 +388,6 @@ textarea {
 /* end header */
 
 /* start article list */
-
 .main .pagination {
     float: none;
     padding: 20px 0 25px;
@@ -406,6 +406,25 @@ textarea {
     width: 450px;
 }
 
+.article-abstract {
+    background-color: #3E3E3E;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: all 1.2s;
+    height: 100%;
+}
+
+.article-image {
+    top: 151px;
+}
+
+.article-list > div:hover .article-image {
+    top: 0;
+}
+
 .article-list > div > img {
     max-width: 100%;
     transition: all 1.2s;
@@ -417,32 +436,24 @@ textarea {
     transform: scale(1.2);
 }
 
-.article-list > div:hover .article-image {
-    top: 0;
-}
-
-.article-list > div:hover .fn-right {
-    display: block;
-}
-
-.article-image {
-    background-color: #3E3E3E;
-    opacity: 0.8;
-    position: absolute;
-    top: 163px;
-    width: 100%;
-    transition: all 1.2s;
-}
-
 .article-date {
     float: left;
-    margin: 10px 0 0 10px;
+    margin: 10px;
 }
 
 .article-title {
-    height: 30px;
+    height: 24px;
-    line-height: 30px;
+    line-height: 24px;
-    margin: 0 0 0 10px;
+    margin: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 430px;
+    font-weight: normal;
+}
+
+.article-title span {
+    color: #E61E1E;
 }
 
 .article-title a {
@@ -453,40 +464,27 @@ textarea {
     color: #9E0B0E;
 }
 
-.article-abstract {
-    height: 100%;
-}
-
 .article-abstract .fn-right {
+    display: none;
     position: absolute;
     right: 0;
-    display: none;
-    top: 0;
 }
 
-.article-abstract .fn-right > a,
+.article-abstract:hover .fn-right {
-.article-info > a {
+    display: block;
-    padding: 15px;
-    float: left;
-    background-color: #E61E1E;
-    color: #FFF;
-    font-size: 14px;
 }
 
-.article-info > a {
+.article-abstract .fn-right > a {
     background-color: #FFF;
     color: #E61E1E;
+    float: left;
+    padding: 10px;
     transition: all 0.8s;
 }
 
 .article-abstract .fn-right > a:hover {
-    background-color: #FFF;
-    color: #E61E1E;
-}
-
-.article-info > a:hover {
-    background-color: #EA4040;
     color: #FFF;
+    background-color: #E61E1E;
 }
 
 .article-abstract > .article-tags {
@@ -494,15 +492,10 @@ textarea {
 }
 
 .article-abstract > .article-body {
-    height: 115px;
+    margin: 10px;
-    margin: 10px 10px 0;
     overflow: hidden;
     white-space: inherit;
     word-wrap: break-word;
-    padding: 0;
-}
-
-.article-image .article-body {
     padding: 10px;
     height: 95px;
 }
@@ -684,8 +677,6 @@ textarea {
 .notice-board .text {
     top: 36px;
 }
-
-
 /* end side */
 
 /* start others */
@@ -734,12 +725,6 @@ textarea {
 /* end others */
 
 /* start article */
-.article-info {
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
 .article-header {
     background-color: #E61E1E;
     margin: 30px 0;
@@ -747,10 +732,37 @@ textarea {
     position: relative;
 }
 
+.article-info {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.article-info > a {
+    background-color: #FFF;
+    color: #E61E1E;
+    transition: all 0.8s;
+    font-size: 14px;
+    float: left;
+    padding: 14px;
+    border-bottom: 1px solid #FFF;
+    border-left: 1px solid #FFF;
+}
+
+.article-info > a:hover {
+    background-color: #E61E1E;
+    color: #FFF;
+}
+
 .article-header h2 {
     color: #FFF;
 }
 
+.article-header h2 > span {
+    font-weight: normal;    
+    color: #D1D2D1;
+}
+
 .article-header .article-date {
     float: none;
     margin: 0;
@@ -789,7 +801,7 @@ pre.prettyprint {
 
 #comments .article-body {
     margin: 10px 0;
-    width: 810px;
+    width: 800px;
 }
 
 #comments .user-name {
@@ -801,6 +813,10 @@ pre.prettyprint {
     color: #CA1B1E;
 }
 
+.comment-info a {
+    color: #F8F7F7;
+}
+
 .at {
     font-size: 15px;
     color: #FFF;
@@ -870,7 +886,7 @@ pre.prettyprint {
 }
 
 #dynamic #comments .article-body {
-    width: 770px;
+    width: 743px;
 }
 
 #dynamic .article-relative .text {
@@ -878,21 +894,24 @@ pre.prettyprint {
 }
 
 #dynamic .footer {
-    margin: 20px 0 0;
+    margin: 20px 0 10px;
     float: left;
     transition: all 0.3s ease-out 0s;
 }
 
-.archives-tile,
-.links-tile,
-.tags-tile,
 .most-comment,
-.most-view {
+.most-view,
-    margin-left: 0;
+.links-tile,
-    width: 333px;
+.tags-tile {
-    background-color: #008641;
-    margin-bottom: 20px;
     position: static;
+    background-color: #F09609;
+    width: 535px;
+    margin-top: 20px;
+}
+
+.most-view {
+    margin-left: 20px;
+    background-color: #2E8BCC;
 }
 
 .tags-tile {
@@ -901,13 +920,11 @@ pre.prettyprint {
 }
 
 .links-tile {
-    margin-left: 20px;
     background-color: #7B4F9D;
 }
 
 .tags-tile span,
 .links-tile span,
-.archives-tile span,
 .most-comment span,
 .most-view span {
     font-size: 60px;
@@ -915,16 +932,14 @@ pre.prettyprint {
 
 .tags-tile .text,
 .links-tile .text,
-.archives-tile .text,
 .most-comment .text,
 .most-view .text {
     position: static;
-    width: 253px;
+    width: 430px;
 }
 
 .tags-tile a,
-.links-tile a,
+.links-tile a {
-.archives-tile a {
     background-color: #EA4040;
     color: #D1D2D1;
     float: left;
@@ -937,24 +952,15 @@ pre.prettyprint {
 }
 
 .tags-tile a:hover,
-.links-tile a:hover,
+.links-tile a:hover {
-.archives-tile a:hover {
     background-color: #FFF;
     color: #EA4040;
 }
 
-.most-comment,
-.most-view {
-    background-color: #F09609;
-    width: 535px;
-    margin: 100px 0;
-}
-
 .most-comment .text,
 .most-view .text {
     margin-right: 20px;
     line-height: 24px;
-    width: 430px;
 }
 
 .most-comment .text a:hover,
@@ -968,9 +974,4 @@ pre.prettyprint {
     font-size: 13px;
     font-weight: normal;
 }
-
-.most-view {
-    margin-left: 20px;
-    background-color: #2E8BCC;
-}
 /* end dynamic */

metro-hot/css/metro-hot.min.css

@@ -1,3 +1,18 @@
+/**
+ * Copyright (c) 2009, 2010, 2011, 2012, 2013, B3log Team
+ *
+ * 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.
+ */
 @charset "utf-8";
 @font-face{font-family:'IcoMoon';src:url('font/IcoMoon.eot');src:url('font/IcoMoon.eot?#iefix') format('embedded-opentype'),url('font/IcoMoon.svg#IcoMoon') format('svg'),url('font/IcoMoon.woff') format('woff'),url('font/IcoMoon.ttf') format('truetype');font-weight:normal;font-style:normal;}[data-ico]:before{font-family:'IcoMoon';content:attr(data-ico);speak:none;cursor:pointer;}
 html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

metro-hot/dynamic.ftl

@@ -27,14 +27,18 @@
                             <img title="${comment.commentName}"
                                  alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
                             <div class="comment-main">
-                                <div class="fn-clear">
+                                <div class="fn-clear comment-info">
                                     <#if "http://" == comment.commentURL>
                                     <span>${comment.commentName}</span>
                                     <#else>
                                     <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
                                     </#if>
+                                   
+                                    <a class="fn-right" rel="bookmark" data-ico="&#xe185;" href="${servePath}${comment.commentSharpURL}">
+                                         ${viewLabel}
+                                    </a>
                                     <div class="fn-right" data-ico="&#xe200;">
-                                        ${comment.commentDate?string("yy-MM-dd HH:mm")}
+                                        ${comment.commentDate?string("yy-MM-dd HH:mm")}&nbsp; &nbsp;
                                     </div>
                                 </div>
                                 <div class="article-body">${comment.commentContent}</div>
@@ -146,30 +150,6 @@
             </div>
 
             <div class="fn-clear">
-                <#if 0 != archiveDates?size>
-                <div class="side-tile archives-tile fn-clear">
-                    <div class="fn-left">
-                        <span data-ico="&#xe110;"></span>
-                        <div class="title">
-                            ${dateArticlesLabel}
-                        </div>
-                    </div>
-                    <div class="text fn-right">
-                        <#list archiveDates as archiveDate>
-                        <#if "en" == localeString?substring(0, 2)>
-                        <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
-                           title="${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})">
-                            ${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})</a>
-                        <#else>
-                        <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
-                           title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
-                            ${archiveDate.archiveDateYear?substring(2,4)}${yearLabel}${archiveDate.archiveDateMonth}${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
-                        </#if>
-                        </#list>
-                    </div>
-                </div>
-                </#if>
-
                 <#if 0 != links?size>
                 <div class="side-tile links-tile fn-clear">
                     <div class="fn-left">

metro-hot/js/metro-hot.js

@@ -17,7 +17,7 @@
  * @fileoverview metro-hot js.
  *
  * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
- * @version 1.0.0.9, Jul 31, 2013
+ * @version 1.0.1.0, Sep 30, 2013
  */
 
 var MetroHot = {
@@ -37,9 +37,12 @@ var MetroHot = {
         $("#logout, .logout").attr("href", logoutHref);
 
         // 头部标题点击事件
+        $(".header .title, .navigation").mouseover(function() {
+            $(".navigation").show();
+        }).mouseout(function() {
+            $(".navigation").hide();
+        });
         $(".header .title").click(function() {
-            $(".navigation").slideToggle();
-        }).dblclick(function() {
             window.location.href = latkeConfig.servePath;
         });
 

metro-hot/lang/lang_en_US.properties

@@ -16,7 +16,7 @@
 
 #
 # Description: Language configurations(en_US) for skin "ease".
-# Version: 1.0.0.3, Jul 9, 2013
+# Version: 1.0.0.4, Sep 30, 2013
 # Author: Liyuan Li
 #
 nextArticleLabel=Next
@@ -77,8 +77,8 @@ tag1Label=Tags:
 sorryLabel=Sorry!
 notFoundLabel=Not Found!
 returnTo1Label=Return:
-updatedLabel=Updated!
+updatedLabel=Up
-topArticleLabel=Top!
+topArticleLabel=Top
 replyLabel=Reply
 
 commentEmailLabel=Email

metro-hot/lang/lang_zh_CN.properties

@@ -16,7 +16,7 @@
 
 #
 # Description: Language configurations(zh_CN) for skin "ease".
-# Version: 1.0.0.3, Jul 9, 2013
+# Version: 1.0.0.4, Sep 30, 2013
 # Author: Liyuan Li
 #
 registerLabel=\u6ce8\u518c
@@ -36,8 +36,8 @@ viewCount1Label=\u6d4f\u89c8\u6b21\u6570\uff1a
 articleCount1Label=\u6587\u7ae0\u603b\u6570\uff1a
 commentCount1Label=\u8bc4\u8bba\u603b\u6570\uff1a
 allTagsLabel=\u6807\u7b7e\u5899
-updatedLabel=\u6709\u66f4\u65b0\uff01
+updatedLabel=\u66f4
-topArticleLabel=\u7f6e\u9876\uff01
+topArticleLabel=\u9876
 archiveLabel=\u5b58\u6863
 yearLabel=\u5e74
 monthLabel=\u6708