Skip to content

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

metro skin

parent cccda10f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 586 additions and 265 deletions
war/src/main/webapp/js/common.js
View file @ dac981e6
......@@ -29,17 +29,16 @@ var Util = {
/**
* @description 检测页面错误
*/
error: function () {
error: function() {
$("#tipMsg").text("Error: " + arguments[0] +
" File: " + arguments[1] + "\nLine: " + arguments[2] +
" please report this issue on https://github.com/b3log/b3log-solo/issues/new");
$("#loadMsg").text("");
},
/**
* @description 非 IE6/7 的浏览器，跳转到 kill-browser 页面
*/
killIE: function () {
killIE: function() {
if ($.browser.msie) {
// kill IE6 and IE7
if ($.browser.version === "6.0" || $.browser.version === "7.0") {
......@@ -50,7 +49,7 @@ var Util = {
// 后台页面 kill 360
if (window.external && window.external.twGetRunPath) {
var path = external.twGetRunPath();
if(path && path.toLowerCase().indexOf("360se") > -1 &&
if (path && path.toLowerCase().indexOf("360se") > -1 &&
window.location.href.indexOf("admin-index") > -1) {
window.location = latkeConfig.servePath + "/kill-browser.html";
return;
......@@ -58,13 +57,12 @@ var Util = {
}
}
},
/**
* @description 替换[emXX] 为图片
* @param {String} str 替换字符串
* @returns {String} 替换后的字符
*/
replaceEmString: function (str) {
replaceEmString: function(str) {
var commentSplited = str.split("[em");
if (commentSplited.length === 1) {
return str;
......@@ -80,54 +78,50 @@ var Util = {
}
return str;
},
/**
* @description URL 没有协议头，则自动加上 http://
* @param {String} url URL 地址
* @returns {String} 添加后的URL
*/
proessURL: function (url) {
proessURL: function(url) {
if (!/^\w+:\/\//.test(url)) {
url = "http://" + url;
}
return url;
},
/**
* @description 切换到手机版
* @param {String} skin 切换前的皮肤名称
*/
switchMobile: function (skin) {
switchMobile: function(skin) {
Cookie.createCookie("btouch_switch_toggle", skin, 365);
setTimeout(function () {
setTimeout(function() {
location.reload();
}, 1250);
},
/**
* @description topbar 相关事件
*/
setTopBar: function () {
setTopBar: function() {
var $top = $("#top");
if ($top.length === 1) {
var $showTop = $("#showTop");
$showTop.click(function () {
$showTop.click(function() {
$top.slideDown();
$showTop.hide();
});
$("#hideTop").click(function () {
$("#hideTop").click(function() {
$top.slideUp();
$showTop.show();
});
}
},
/**
* @description 回到顶部
*/
goTop: function () {
goTop: function() {
var acceleration = acceleration || 0.1;
var y = $(window).scrollTop();
......@@ -139,30 +133,27 @@ var Util = {
window.setTimeout(invokeFunction, 16);
}
},
/**
* @description 回到底部
*/
goBottom: function (bottom) {
goBottom: function(bottom) {
if (!bottom) {
bottom = 0;
}
window.scrollTo(0, $("body").height() - $(window).height() - bottom);
},
/**
* @description 页面初始化执行的函数
*/
init: function () {
init: function() {
//window.onerror = Util.error;
Util.killIE();
Util.setTopBar();
},
/**
* @description topbar 清除缓存按钮事件
*/
clearCache: function (all) {
clearCache: function(all) {
var data = '';
if (all === "all") {
data = '{"all": "all", "URI": ""}';
......@@ -176,28 +167,26 @@ var Util = {
cache: false,
contentType: "application/json",
data: data,
success: function(result){
success: function(result) {
window.location.reload();
}
});
},
/**
* @description 替换侧边栏表情为图片
* @param {Dom} comments 评论内容元素
*/
replaceSideEm: function (comments) {
replaceSideEm: function(comments) {
for (var i = 0; i < comments.length; i++) {
var $comment = $(comments[i]);
$comment.html(Util.replaceEmString($comment.html()));
}
},
/**
* @description 根据 tags，穿件云效果
* @param {String} [id] tags 根元素 id，默认为 tags
*/
buildTags: function (id) {
buildTags: function(id) {
id = id || "tags";
// 根据引用次数添加样式，产生云效果
......@@ -225,35 +214,47 @@ var Util = {
return valA.localeCompare(valB);
}));
},
/**
* @description 时间戳转化为时间格式
* @param {String} time 时间
* @param {String} format 格式化后日期格式
* @returns {String} 格式化后的时间
*/
toDate: function (time, format) {
toDate: function(time, format) {
var dateTime = new Date(time);
var o = {
"M+" : dateTime.getMonth()+1, //month
"d+" : dateTime.getDate(), //day
"H+" : dateTime.getHours(), //hour
"m+" : dateTime.getMinutes(), //minute
"s+" : dateTime.getSeconds(), //second
"q+" : Math.floor((dateTime.getMonth()+3)/3), //quarter
"S" : dateTime.getMilliseconds() //millisecond
"M+": dateTime.getMonth() + 1, //month
"d+": dateTime.getDate(), //day
"H+": dateTime.getHours(), //hour
"m+": dateTime.getMinutes(), //minute
"s+": dateTime.getSeconds(), //second
"q+": Math.floor((dateTime.getMonth() + 3) / 3), //quarter
"S": dateTime.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (dateTime.getFullYear()+"").substr(4 - RegExp.$1.length));
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
},
/**
* @description 获取窗口高度
* @returns {Inter} 窗口高度
*/
getWinHeight: function() {
if (window.innerHeight) {
return window.innerHeight;
}
if (document.compatMode === "CSS1Compat") {
return window.document.documentElement.clientHeight;
}
return window.document.body.clientHeight;
}
};
......@@ -268,39 +269,39 @@ if (!Cookie) {
* @param {String} name cookie key
* @returns {String} 对应 key 的值，如 key 不存在则返回 ""
*/
readCookie: function (name) {
readCookie: function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length));
while (c.charAt(0) == ' ')
c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return "";
},
/**
* @description 清除 Cookie
* @param {String} name 清除 key 为 name 的该条 Cookie
*/
eraseCookie: function (name) {
this.createCookie(name,"",-1);
eraseCookie: function(name) {
this.createCookie(name, "", -1);
},
/**
* @description 创建 Cookie
* @param {String} name 每条 Cookie 唯一的 key
* @param {String} value 每条 Cookie 对应的值，将被 UTF-8 编码
* @param {Int} days Cookie 保存时间
*/
createCookie: function (name, value, days) {
createCookie: function(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name+"="+encodeURIComponent(value)+expires+"; path=/";
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
}
};
}
\ No newline at end of file
war/src/main/webapp/skins/metro-hot/archive-articles.ftl
View file @ dac981e6
......@@ -11,6 +11,7 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>
......@@ -21,6 +22,25 @@
${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>
</div>
</div>
<div class="fn-clear">
<div class="main">
......
war/src/main/webapp/skins/metro-hot/archives.ftl
View file @ dac981e6
......@@ -11,10 +11,12 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>${dateArticlesLabel}</h2>
</div>
</div>
<div class="fn-clear">
<div class="main">
<#if 0 != archiveDates?size>
......
war/src/main/webapp/skins/metro-hot/article.ftl
View file @ dac981e6
......@@ -12,6 +12,7 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl">
<div class="article-header">
<span class="article-date" data-ico="&#xe200;">
......@@ -52,6 +53,7 @@
</a>
</div>
</div>
</div>
<div class="fn-clear">
<div class="main">
<div class="article-body">
......
war/src/main/webapp/skins/metro-hot/author-articles.ftl
View file @ dac981e6
......@@ -11,10 +11,12 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>${author1Label}${authorName} </h2>
</div>
</div>
<div class="fn-clear">
<div class="main">
<#include "article-list.ftl"/>
......
war/src/main/webapp/skins/metro-hot/css/metro-hot.css
View file @ dac981e6
......@@ -17,7 +17,7 @@
* skin metro-hot style
*
* @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 */
html {
......@@ -237,7 +237,7 @@ textarea {
/* start frame */
.wrapper {
height: auto;
margin: 35px auto 10px;
margin: 30px auto 10px;
width: 1190px;
}
......@@ -458,14 +458,13 @@ textarea {
transition: all 0.8s;
}
.article-abstract .fn-right > a:hover,
.article-info > a:hover {
.article-abstract .fn-right > a:hover {
background-color: #FFF;
color: #E61E1E;
}
.article-info > a:hover {
background-color: #E61E1E;
background-color: #EA4040;
color: #FFF;
}
......@@ -525,7 +524,8 @@ textarea {
.side form input:focus,
.form input:focus,
.form textarea:focus,
.form button:hover {
.form button:hover,
#dynamic .footer:hover {
outline: 3px solid #BABABA;
}
......@@ -536,6 +536,10 @@ textarea {
width: 60px;;
}
.side-tile > .title {
line-height: 17px;
}
.side-tile > .text {
font-size: 15px;
font-weight: bold;
......@@ -679,7 +683,7 @@ textarea {
.archives {
background-color: #323232;
padding: 10px;
margin-bottom: 30px;
margin: 5px 10px 30px 0;
}
.archives li {
......@@ -739,6 +743,7 @@ textarea {
.main > .article-body {
margin-right: 10px;
margin-top: 20px;
}
/* end article */
......@@ -826,3 +831,120 @@ textarea {
color: #CA1B1E;
}
/* end comment */
/* 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,6 +12,7 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>${blogSubtitle}</h2>
......@@ -34,6 +35,7 @@
</div>
</#if>
</div>
</div>
<div class="fn-clear">
<div class="main">
<#include "article-list.ftl"/>
......
war/src/main/webapp/skins/metro-hot/js/metro-hot.js
View file @ dac981e6
......@@ -18,30 +18,16 @@
* @fileoverview metro-hot js.
*
* @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 = {
headerH: 240,
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 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
var logoutHref = "";
$("#admin a").each(function() {
......@@ -58,6 +44,42 @@ var MetroHot = {
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();
......@@ -92,7 +114,7 @@ var MetroHot = {
$(".side > div").css("position", "static");
}
} else {
if (y + window.innerHeight > $(".side > div").height() + MetroHot.headerH) {
if (y + Util.getWinHeight() > $(".side > div").height() + MetroHot.headerH) {
$(".side > div").css({
"position": "fixed",
"top": "auto",
......
war/src/main/webapp/skins/metro-hot/links.ftl
View file @ dac981e6
......@@ -11,10 +11,12 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>${linkLabel}</h2>
</div>
</div>
<div class="fn-clear">
<div class="main">
<#if 0 != links?size>
......
war/src/main/webapp/skins/metro-hot/macro-side.ftl
View file @ dac981e6
......@@ -150,11 +150,8 @@
<div class="user side-tile">
<span>
<img src="${gravatar}"/>
<img src="<#if gravatar??>${gravatar}</#if>"/>
</span>
<div class="fn-clear title">
${commentNameLabel}
</div>
<div class="text"></div>
</div>
......
war/src/main/webapp/skins/metro-hot/page.ftl
View file @ dac981e6
......@@ -12,7 +12,19 @@
<body>
${topBarReplacement}
<div class="wrapper">
<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="main">
<div class="article-body">
......
war/src/main/webapp/skins/metro-hot/tag-articles.ftl
View file @ dac981e6
......@@ -11,6 +11,7 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>
......@@ -20,6 +21,25 @@
(${tag.tagPublishedRefCount})
</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 class="fn-clear">
<div class="main">
......
war/src/main/webapp/skins/metro-hot/tags.ftl
View file @ dac981e6
......@@ -11,10 +11,12 @@
<body>
${topBarReplacement}
<div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="sub-nav fn-clear">
<h2>${allTagsLabel}</h2>
</div>
</div>
<div class="fn-clear">
<div class="main">
<ul id="tags" class="archives fn-clear">
......
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