Skip to content

S
solo
Commit dac981e6 authored by Van's avatar Van
Browse files
Options

metro skin

parent cccda10f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 586 additions and 265 deletions
war/src/main/webapp/js/common.js
View file @ dac981e6
This diff is collapsed.
war/src/main/webapp/skins/metro-hot/archive-articles.ftl
View file @ dac981e6
...@@ -11,17 +11,37 @@ ...@@ -11,17 +11,37 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2> <div class="sub-nav fn-clear">
${archive1Label} <h2>
<#if "en" == localeString?substring(0, 2)> ${archive1Label}
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) <#if "en" == localeString?substring(0, 2)>
<#else> ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount})
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} (${archiveDate.archiveDatePublishedArticleCount}) <#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} (${archiveDate.archiveDatePublishedArticleCount})
</#if>
</h2>
<#if 0 != paginationPageCount>
<div class="pagination">
<#if 1 != paginationPageNums?first>
<a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
title="${previousPageLabel}"><</a>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span>${paginationPageNum}</span>
<#else>
<a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
</#if>
</div>
</#if> </#if>
</h2> </div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<#include "article-list.ftl"/> <#include "article-list.ftl"/>
......
war/src/main/webapp/skins/metro-hot/archives.ftl
View file @ dac981e6
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2>${dateArticlesLabel}</h2> <div class="sub-nav fn-clear">
<h2>${dateArticlesLabel}</h2>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/article.ftl
View file @ dac981e6
...@@ -12,44 +12,46 @@ ...@@ -12,44 +12,46 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl"> <div id="header">
<div class="article-header"> <#include "header.ftl">
<span class="article-date" data-ico="&#xe200;"> <div class="article-header">
<#if article.hasUpdated> <span class="article-date" data-ico="&#xe200;">
${article.articleUpdateDate?string("yy-MM-dd HH:mm")} <#if article.hasUpdated>
<#else> ${article.articleUpdateDate?string("yy-MM-dd HH:mm")}
${article.articleCreateDate?string("yy-MM-dd HH:mm")} <#else>
</#if> ${article.articleCreateDate?string("yy-MM-dd HH:mm")}
</span> </#if>
</span>
<h2> <h2>
${article.articleTitle} ${article.articleTitle}
<#if article.hasUpdated> <#if article.hasUpdated>
<sup> <sup>
${updatedLabel} ${updatedLabel}
</sup> </sup>
</#if> </#if>
<#if article.articlePutTop> <#if article.articlePutTop>
<sup> <sup>
${topArticleLabel} ${topArticleLabel}
</sup> </sup>
</#if> </#if>
</h2> </h2>
<div data-ico="&#x003b;" title="${tagLabel}"> <div data-ico="&#x003b;" title="${tagLabel}">
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a><#if articleTag_has_next>,</#if> <a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a><#if articleTag_has_next>,</#if>
</#list> </#list>
</div> </div>
<div class="article-info"> <div class="article-info">
<a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${article.articlePermalink}#comments"> <a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${article.articlePermalink}#comments">
${article.articleCommentCount} ${article.articleCommentCount}
</a> </a>
<a rel="nofollow" data-ico="&#xe185;" href="${servePath}${article.articlePermalink}"> <a rel="nofollow" data-ico="&#xe185;" href="${servePath}${article.articlePermalink}">
${article.articleViewCount} ${article.articleViewCount}
</a> </a>
<a rel="nofollow" data-ico="&#x0060;" href="${servePath}/authors/${article.authorId}"> <a rel="nofollow" data-ico="&#x0060;" href="${servePath}/authors/${article.authorId}">
${article.authorName} ${article.authorName}
</a> </a>
</div>
</div> </div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
......
war/src/main/webapp/skins/metro-hot/author-articles.ftl
View file @ dac981e6
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2>${author1Label}${authorName} </h2> <div class="sub-nav fn-clear">
<h2>${author1Label}${authorName} </h2>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/css/metro-hot.css
View file @ dac981e6
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
* skin metro-hot style * skin metro-hot style
* *
* @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a> * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
* @version 1.0.0.7, Jul 11, 2013 * @version 1.0.0.9, Jul 24, 2013
*/ */
/* start base */ /* start base */
html { html {
...@@ -237,7 +237,7 @@ textarea { ...@@ -237,7 +237,7 @@ textarea {
/* start frame */ /* start frame */
.wrapper { .wrapper {
height: auto; height: auto;
margin: 35px auto 10px; margin: 30px auto 10px;
width: 1190px; width: 1190px;
} }
...@@ -458,14 +458,13 @@ textarea { ...@@ -458,14 +458,13 @@ textarea {
transition: all 0.8s; transition: all 0.8s;
} }
.article-abstract .fn-right > a:hover, .article-abstract .fn-right > a:hover {
.article-info > a:hover {
background-color: #FFF; background-color: #FFF;
color: #E61E1E; color: #E61E1E;
} }
.article-info > a:hover { .article-info > a:hover {
background-color: #E61E1E; background-color: #EA4040;
color: #FFF; color: #FFF;
} }
...@@ -525,7 +524,8 @@ textarea { ...@@ -525,7 +524,8 @@ textarea {
.side form input:focus, .side form input:focus,
.form input:focus, .form input:focus,
.form textarea:focus, .form textarea:focus,
.form button:hover { .form button:hover,
#dynamic .footer:hover {
outline: 3px solid #BABABA; outline: 3px solid #BABABA;
} }
...@@ -536,6 +536,10 @@ textarea { ...@@ -536,6 +536,10 @@ textarea {
width: 60px;; width: 60px;;
} }
.side-tile > .title {
line-height: 17px;
}
.side-tile > .text { .side-tile > .text {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
...@@ -679,7 +683,7 @@ textarea { ...@@ -679,7 +683,7 @@ textarea {
.archives { .archives {
background-color: #323232; background-color: #323232;
padding: 10px; padding: 10px;
margin-bottom: 30px; margin: 5px 10px 30px 0;
} }
.archives li { .archives li {
...@@ -739,6 +743,7 @@ textarea { ...@@ -739,6 +743,7 @@ textarea {
.main > .article-body { .main > .article-body {
margin-right: 10px; margin-right: 10px;
margin-top: 20px;
} }
/* end article */ /* end article */
...@@ -825,4 +830,121 @@ textarea { ...@@ -825,4 +830,121 @@ textarea {
.tip { .tip {
color: #CA1B1E; color: #CA1B1E;
} }
/* end comment */ /* end comment */
\ No newline at end of file
/* start dynamic */
#dynamic #comments {
background-color: #EA4040;
margin-top: 5px;
padding: 25px 15px 15px 25px;
}
#dynamic #comments .article-body {
width: 770px;
}
#dynamic .article-relative .text {
left: 110px;
}
#dynamic .footer {
margin: 20px 0 0;
float: left;
transition: all 0.3s ease-out 0s;
}
.most-comment,
.most-view {
height: 170px;
width: 535px;
margin: 100px 0;
}
.most-comment .text,
.most-view .text {
left: 115px;
line-height: 24px;
}
.most-comment .text a:hover,
.most-view .text a:hover {
text-decoration: underline;
}
.most-comment > span,
.most-view > span {
margin-top: 30px;
}
.most-comment .text span,
.most-view .text span {
color: #D1D2D1;
font-size: 13px;
font-weight: normal;
margin-left: 20px;
}
.most-view {
margin-left: 20px;
background-color: #2E8BCC;
}
.archives-tile,
.links-tile,
.tags-tile {
margin-left: 0;
width: 333px;
background-color: #008641;
margin-bottom: 20px;
position: static;
}
.tags-tile {
margin-left: 20px;
background-color: #339933;
}
.links-tile {
margin-left: 20px;
background-color: #7B4F9D;
}
.tags-tile span,
.links-tile span,
.archives-tile span {
display: block;
font-size: 60px;
text-align: center;
width: 60px;
}
.tags-tile .text,
.links-tile .text,
.archives-tile .text {
position: static;
width: 253px;
}
.tags-tile a,
.links-tile a,
.archives-tile a {
background-color: #EA4040;
color: #D1D2D1;
float: left;
font-size: 12px;
line-height: 20px;
margin: 6px 10px;
padding: 5px 10px;
transition: all 0.8s ease 0s;
white-space: nowrap;
}
.tags-tile a:hover,
.links-tile a:hover,
.archives-tile a:hover {
background-color: #FFF;
color: #EA4040;
}
/* end dynamic */
\ No newline at end of file
war/src/main/webapp/skins/metro-hot/index.ftl
View file @ dac981e6
...@@ -12,27 +12,29 @@ ...@@ -12,27 +12,29 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2>${blogSubtitle}</h2> <div class="sub-nav fn-clear">
<#if 0 != paginationPageCount> <h2>${blogSubtitle}</h2>
<div class="pagination"> <#if 0 != paginationPageCount>
<#if 1 != paginationPageNums?first> <div class="pagination">
<a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}" <#if 1 != paginationPageNums?first>
title="${previousPageLabel}"><</a> <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
</#if> title="${previousPageLabel}"><</a>
<#list paginationPageNums as paginationPageNum> </#if>
<#if paginationPageNum == paginationCurrentPageNum> <#list paginationPageNums as paginationPageNum>
<span>${paginationPageNum}</span> <#if paginationPageNum == paginationCurrentPageNum>
<#else> <span>${paginationPageNum}</span>
<a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a> <#else>
</#if> <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#list> </#if>
<#if paginationPageNums?last != paginationPageCount> </#list>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a> <#if paginationPageNums?last != paginationPageCount>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
</#if>
</div>
</#if> </#if>
</div> </div>
</#if>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/js/metro-hot.js
View file @ dac981e6
...@@ -18,30 +18,16 @@ ...@@ -18,30 +18,16 @@
* @fileoverview metro-hot js. * @fileoverview metro-hot js.
* *
* @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a> * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
* @version 1.0.0.6, Jul 10, 2013 * @version 1.0.0.8, Jul 24, 2013
*/ */
var MetroHot = { var MetroHot = {
headerH: 240, headerH: $("#header").height() + 30 + ($("#header > div").get(1) ? 30 : 0),
responsiveType: "large", responsiveType: "large",
goTranslate: function() { goTranslate: function() {
window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href); window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);
}, },
init: function() { init: function() {
// 登录与否的显示设置
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();
}
// 侧边栏点击事件
$("#login, .login").attr("href", $("#admin > a").first().attr("href"));
// 当先用户在线数目
var onlineVisitorCnt = $("#top > span").first().text();
$(".online-count .text").append(onlineVisitorCnt.substr(1, onlineVisitorCnt.length));
// logout // logout
var logoutHref = ""; var logoutHref = "";
$("#admin a").each(function() { $("#admin a").each(function() {
...@@ -58,6 +44,42 @@ var MetroHot = { ...@@ -58,6 +44,42 @@ var MetroHot = {
window.location.href = latkeConfig.servePath; 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() { $(window).scroll(function() {
var y = $(window).scrollTop(); var y = $(window).scrollTop();
...@@ -92,7 +114,7 @@ var MetroHot = { ...@@ -92,7 +114,7 @@ var MetroHot = {
$(".side > div").css("position", "static"); $(".side > div").css("position", "static");
} }
} else { } else {
if (y + window.innerHeight > $(".side > div").height() + MetroHot.headerH) { if (y + Util.getWinHeight() > $(".side > div").height() + MetroHot.headerH) {
$(".side > div").css({ $(".side > div").css({
"position": "fixed", "position": "fixed",
"top": "auto", "top": "auto",
...@@ -260,9 +282,9 @@ var MetroHot = { ...@@ -260,9 +282,9 @@ var MetroHot = {
} }
}, },
goCmt: function() { goCmt: function() {
$("html, body").animate({ $("html, body").animate({
scrollTop: $(".comment-disabled").get(0).offsetTop scrollTop: $(".comment-disabled").get(0).offsetTop
}); });
} }
}; };
......
war/src/main/webapp/skins/metro-hot/links.ftl
View file @ dac981e6
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2>${linkLabel}</h2> <div class="sub-nav fn-clear">
<h2>${linkLabel}</h2>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/macro-side.ftl
View file @ dac981e6
...@@ -150,11 +150,8 @@ ...@@ -150,11 +150,8 @@
<div class="user side-tile"> <div class="user side-tile">
<span> <span>
<img src="${gravatar}"/> <img src="<#if gravatar??>${gravatar}</#if>"/>
</span> </span>
<div class="fn-clear title">
${commentNameLabel}
</div>
<div class="text"></div> <div class="text"></div>
</div> </div>
......
war/src/main/webapp/skins/metro-hot/page.ftl
View file @ dac981e6
...@@ -10,13 +10,25 @@ ...@@ -10,13 +10,25 @@
</@head> </@head>
</head> </head>
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl"> <div id="header">
<#include "header.ftl">
<div class="article-header">
<h2>${blogSubtitle}</h2>
<div class="article-info">
<a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${page.pagePermalink}#comments">
${page.pageCommentCount}
</a>
</div>
</div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<div class="article-body"> <div class="article-body">
${page.pageContent} ${page.pageContent}
</div> </div>
<@comments commentList=pageComments article=page></@comments> <@comments commentList=pageComments article=page></@comments>
<#include "copyright.ftl"/> <#include "copyright.ftl"/>
......
war/src/main/webapp/skins/metro-hot/tag-articles.ftl
View file @ dac981e6
...@@ -11,15 +11,35 @@ ...@@ -11,15 +11,35 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2> <div class="sub-nav fn-clear">
<a id="tag" rel="alternate" href="${servePath}/tag-articles-feed.do?oId=${tag.oId}"> <h2>
${tag1Label} <a id="tag" rel="alternate" href="${servePath}/tag-articles-feed.do?oId=${tag.oId}">
${tag.tagTitle} ${tag1Label}
(${tag.tagPublishedRefCount}) ${tag.tagTitle}
</a> (${tag.tagPublishedRefCount})
</h2> </a>
</h2>
<#if 0 != paginationPageCount>
<div class="pagination">
<#if 1 != paginationPageNums?first>
<a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
title="${previousPageLabel}"><</a>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span>${paginationPageNum}</span>
<#else>
<a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
</#if>
</div>
</#if>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/tags.ftl
View file @ dac981e6
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<#include "header.ftl" /> <div id="header">
<div class="sub-nav fn-clear"> <#include "header.ftl" />
<h2>${allTagsLabel}</h2> <div class="sub-nav fn-clear">
<h2>${allTagsLabel}</h2>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment