diff --git a/metro-hot/article-list.ftl b/metro-hot/article-list.ftl index b845f85..3475619 100644 --- a/metro-hot/article-list.ftl +++ b/metro-hot/article-list.ftl @@ -24,19 +24,19 @@

- - ${article.articleTitle} - <#if article.hasUpdated> - - ${updatedLabel} - + + [${updatedLabel}] + <#if article.articlePutTop> - - ${topArticleLabel} - + + [${topArticleLabel}] + + + ${article.articleTitle} +

${article.articleAbstract} diff --git a/metro-hot/article.ftl b/metro-hot/article.ftl index f8cdfc7..c480859 100644 --- a/metro-hot/article.ftl +++ b/metro-hot/article.ftl @@ -23,18 +23,18 @@ -

- ${article.articleTitle} +

<#if article.hasUpdated> - - ${updatedLabel} - + + [${updatedLabel}] + <#if article.articlePutTop> - - ${topArticleLabel} - + + [${topArticleLabel}] + + ${article.articleTitle}

<#list article.articleTags?split(",") as articleTag> diff --git a/metro-hot/css/metro-hot-responsive.css b/metro-hot/css/metro-hot-responsive.css index 9941a4e..fa3a1f6 100644 --- a/metro-hot/css/metro-hot-responsive.css +++ b/metro-hot/css/metro-hot-responsive.css @@ -17,7 +17,7 @@ * skin metro-hot responsive style * * @author Liyuan Li -* @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-top: 20px; + margin-left: 0; } .most-comment .text, .most-view .text { margin-right: 0; width: 274px; - } - - .most-view { - margin-left: 0; + font-size: 12px; + font-weight: normal; } .tags-tile, - .links-tile, - .archives-tile { + .links-tile { width: 249px; - margin-top: 20px; - margin-bottom: 0; + margin-left: 0; } .tags-tile .text, - .links-tile .text, - .archives-tile .text { - width: 274px; - } - - .links-tile, - .tags-tile { - margin-left: 0; - } - - .tags-tile { - margin-bottom: 50px; + .links-tile .text { + width: 249px; } } \ No newline at end of file diff --git a/metro-hot/css/metro-hot-responsive.min.css b/metro-hot/css/metro-hot-responsive.min.css index 0f713e8..44dd83f 100644 --- a/metro-hot/css/metro-hot-responsive.min.css +++ b/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;}} diff --git a/metro-hot/css/metro-hot.css b/metro-hot/css/metro-hot.css index 26744d4..4c94c94 100644 --- a/metro-hot/css/metro-hot.css +++ b/metro-hot/css/metro-hot.css @@ -18,16 +18,16 @@ * skin metro-hot style * * @author Liyuan Li -* @version 1.0.1.0, Jul 31, 2013 +* @version 1.0.1.1, Sep 30, 2013 */ /* start base */ @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'); + 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; } @@ -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; - line-height: 30px; - margin: 0 0 0 10px; + height: 24px; + line-height: 24px; + 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-info > a { - padding: 15px; - float: left; - background-color: #E61E1E; - color: #FFF; - font-size: 14px; +.article-abstract:hover .fn-right { + display: block; } -.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,19 +492,14 @@ textarea { } .article-abstract > .article-body { - height: 115px; - margin: 10px 10px 0; + margin: 10px; overflow: hidden; white-space: inherit; word-wrap: break-word; - padding: 0; -} - -.article-image .article-body { padding: 10px; height: 95px; } -/* end article list*/ +/* end article list */ /* start side */ .side { @@ -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 { - margin-left: 0; - width: 333px; - background-color: #008641; - margin-bottom: 20px; +.most-view, +.links-tile, +.tags-tile { 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, -.archives-tile a { +.links-tile a { background-color: #EA4040; color: #D1D2D1; float: left; @@ -937,24 +952,15 @@ pre.prettyprint { } .tags-tile a:hover, -.links-tile a:hover, -.archives-tile a:hover { +.links-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 */ \ No newline at end of file diff --git a/metro-hot/css/metro-hot.min.css b/metro-hot/css/metro-hot.min.css index f27510d..a176fd3 100644 --- a/metro-hot/css/metro-hot.min.css +++ b/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%;} diff --git a/metro-hot/dynamic.ftl b/metro-hot/dynamic.ftl index 912f6c8..93c539c 100644 --- a/metro-hot/dynamic.ftl +++ b/metro-hot/dynamic.ftl @@ -27,14 +27,18 @@ ${comment.commentName}
-
+
<#if "http://" == comment.commentURL> ${comment.commentName} <#else> ${comment.commentName} + + + ${viewLabel} +
- ${comment.commentDate?string("yy-MM-dd HH:mm")} + ${comment.commentDate?string("yy-MM-dd HH:mm")}   
${comment.commentContent}
@@ -146,30 +150,6 @@
- <#if 0 != archiveDates?size> -
-
- -
- ${dateArticlesLabel} -
-
-
- <#list archiveDates as archiveDate> - <#if "en" == localeString?substring(0, 2)> - - ${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount}) - <#else> - - ${archiveDate.archiveDateYear?substring(2,4)}${yearLabel}${archiveDate.archiveDateMonth}${monthLabel}(${archiveDate.archiveDatePublishedArticleCount}) - - -
-
- - <#if 0 != links?size>
diff --git a/metro-hot/js/metro-hot.js b/metro-hot/js/metro-hot.js index 68fdbcf..b76350f 100644 --- a/metro-hot/js/metro-hot.js +++ b/metro-hot/js/metro-hot.js @@ -17,7 +17,7 @@ * @fileoverview metro-hot js. * * @author Liyuan Li - * @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; }); diff --git a/metro-hot/js/metro-hot.min.js b/metro-hot/js/metro-hot.min.js index 84e0d47..e21843c 100644 --- a/metro-hot/js/metro-hot.min.js +++ b/metro-hot/js/metro-hot.min.js @@ -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. + */ var MetroHot={headerH:$("#header").height()+30+($("#header > div").get(1)?30:0),responsiveType:"large",goTranslate:function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)},init:function(){var logoutHref="";$("#admin a").each(function(){if($(this).attr("href").indexOf("/logout?goto=")>-1){logoutHref=$(this).attr("href")}});$("#logout, .logout").attr("href",logoutHref);$(".header .title").click(function(){$(".navigation").slideToggle()}).dblclick(function(){window.location.href=latkeConfig.servePath});var onlineVisitorCnt=$("#top > span").first().text();$(".online-count .text").append(onlineVisitorCnt.substr(1,onlineVisitorCnt.length));var isLogin=$("#admin").data("login");if(isLogin){$(".user .text").html($("#admin > span").text());$(".login, .register, #login, #register, .logout, .settings").hide()}else{$(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide()}if($("#dynamic").length===1){$(window).scroll(function(){var y=$(window).scrollTop();if(y>MetroHot.headerH){$("#goTop").fadeIn("slow")}else{$("#goTop").hide()}}).click(function(event){if(event.target.className==="title"||event.target.parentElement.className==="title"){return}$(".navigation").slideUp()});$("body").css("min-height","inherit");return}$("#login, .login").attr("href",$("#admin > a").first().attr("href"));$(window).scroll(function(){var y=$(window).scrollTop();if(y>MetroHot.headerH){if(isLogin){$(".logout, .settings").show()}else{$(".login, .register").show()}}else{if(isLogin){$(".logout, .settings").hide()}else{$(".login, .register").hide()}}if(y>MetroHot.headerH){$("#goTop").fadeIn("slow")}else{$("#goTop").hide()}if($(".side > div").height()<620){if(y>MetroHot.headerH){$(".side > div").css({position:"fixed",top:"0px",width:"240px"})}else{$(".side > div").css("position","static")}}else{if(y+Util.getWinHeight()>$(".side > div").height()+MetroHot.headerH){$(".side > div").css({position:"fixed",top:"auto",bottom:"10px",width:"240px"})}else{$(".side > div").css("position","static")}}}).click(function(event){if(event.target.className==="title"||event.target.parentElement.className==="title"){return}$(".navigation").slideUp()}).resize(function(){var windowW=window.innerWidth,type="large";if(windowW>460&&windowW<=860){type="mid"}else if(window<460){type="small"}if(MetroHot.responsiveType!==type){$(window).scroll();MetroHot.responsiveType===type}});$(window).scroll()},initArticleList:function(){$(".article-list .article-abstract").each(function(){var $it=$(this);var $images=$it.find("img");if($images.length>0){$it.addClass("article-image");$images.hide();$it.before("")}})},loadImg:function(it){it.style.marginTop=("margin-top",(220-it.height)/2+"px")},share:function(){var title=encodeURIComponent($("title").text()),url=window.location.href,pic=$(".article-body img").attr("src");var urls={};urls.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+title+"&url="+url+"&pic="+pic;urls.sina="http://v.t.sina.com.cn/share/share.php?title="+title+"&url="+url+"&pic="+pic;urls.google="https://plus.google.com/share?url="+url;urls.twitter="https://twitter.com/intent/tweet?status="+title+" "+url;$(".share span").click(function(){var key=$(this).attr("title").toLowerCase();window.open(urls[key],"_blank","top=100,left=200,width=648,height=618")})},loadRandomArticles:function(){$.ajax({url:latkeConfig.servePath+"/get-random-articles.do",type:"POST",success:function(result,textStatus){var randomArticles=result.randomArticles;if(!randomArticles||0===randomArticles.length){$("#randomArticles").remove();return}var listHtml="";for(var i=0;i"+title+"";listHtml+=randomArticleLiHtml}var randomArticleListHtml="
    "+listHtml+"
";$("#randomArticles .text").append(randomArticleListHtml)}})},loadRelevantArticles:function(id){$.ajax({url:latkeConfig.servePath+"/article/id/"+id+"/relevant/articles",type:"GET",success:function(data,textStatus){var articles=data.relevantArticles;if(!articles||0===articles.length){$("#relevantArticles").remove();return}var listHtml="";for(var i=0;i"+title+"";listHtml+=articleLiHtml}var relevantArticleListHtml="
    "+listHtml+"
";$("#relevantArticles .text").append(relevantArticleListHtml)},error:function(){$("#relevantArticles").remove()}})},loadExternalRelevantArticles:function(tags){var tips=this.tips;try{$.ajax({url:"http://rhythm.b3log.org:80/get-articles-by-tags.do?tags="+tags+"&blogHost="+tips.blogHost+"&paginationPageSize="+tips.externalRelevantArticlesDisplayCount,type:"GET",cache:true,dataType:"jsonp",error:function(){$("#externalRelevantArticles").remove()},success:function(data,textStatus){var articles=data.articles;if(!articles||0===articles.length){$("#externalRelevantArticles").remove();return}var listHtml="";for(var i=0;i"+title+"";listHtml+=articleLiHtml}var randomArticleListHtml="
    "+listHtml+"
";$("#externalRelevantArticles .text").append(randomArticleListHtml)}})}catch(e){$("#externalRelevantArticles").remove()}},goCmt:function(){$("html, body").animate({scrollTop:$(".comment-disabled").get(0).offsetTop})}};(function(){MetroHot.init();Util.killIE();if($(".article-header").length>0){MetroHot.share()}else{MetroHot.initArticleList()}})(); \ No newline at end of file diff --git a/metro-hot/lang/lang_en_US.properties b/metro-hot/lang/lang_en_US.properties index d2dffb1..146761b 100644 --- a/metro-hot/lang/lang_en_US.properties +++ b/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! -topArticleLabel=Top! +updatedLabel=Up +topArticleLabel=Top replyLabel=Reply commentEmailLabel=Email diff --git a/metro-hot/lang/lang_zh_CN.properties b/metro-hot/lang/lang_zh_CN.properties index 1662bd6..af00e33 100644 --- a/metro-hot/lang/lang_zh_CN.properties +++ b/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 -topArticleLabel=\u7f6e\u9876\uff01 +updatedLabel=\u66f4 +topArticleLabel=\u9876 archiveLabel=\u5b58\u6863 yearLabel=\u5e74 monthLabel=\u6708