Commit cce84b6f authored by Vanesssa's avatar Vanesssa

modified: src/main/webapp/js/page.js

	modified:   src/main/webapp/skins/finding/css/finding.css
	modified:   src/main/webapp/skins/yilia/article.ftl
	modified:   src/main/webapp/skins/yilia/css/yilia.css
	modified:   src/main/webapp/skins/yilia/footer.ftl
	deleted:    src/main/webapp/skins/yilia/images/header-bg.jpg
	deleted:    src/main/webapp/skins/yilia/images/next.jpg
	deleted:    src/main/webapp/skins/yilia/images/preview.jpg
	modified:   src/main/webapp/skins/yilia/js/yilia.js
	src/main/webapp/js/lib/highlight/
parent b1512991
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @author <a href="mailto:DL88250@gmail.com">Liang Ding</a> * @author <a href="mailto:DL88250@gmail.com">Liang Ding</a>
* @version 1.1.3.5, Jul 23, 2014 * @version 1.2.3.5, Nov 2, 2015
*/ */
var Page = function(tips) { var Page = function (tips) {
this.currentCommentId = ""; this.currentCommentId = "";
this.tips = tips; this.tips = tips;
}; };
...@@ -29,13 +29,13 @@ $.extend(Page.prototype, { ...@@ -29,13 +29,13 @@ $.extend(Page.prototype, {
* @description 评论时点击表情,在评论内容中插入相关代码 * @description 评论时点击表情,在评论内容中插入相关代码
* @param {String} name 用于区别回复评论还是对文章的评论 * @param {String} name 用于区别回复评论还是对文章的评论
*/ */
insertEmotions: function(name) { insertEmotions: function (name) {
var _it = this; var _it = this;
if (name === undefined) { if (name === undefined) {
name = ""; name = "";
} }
$("#emotions" + name + " span").click(function() { $("#emotions" + name + " span").click(function () {
var $comment = $("#comment" + name); var $comment = $("#comment" + name);
var endPosition = _it._getCursorEndPosition($comment[0]); var endPosition = _it._getCursorEndPosition($comment[0]);
var key = "[" + this.className + "]", var key = "[" + this.className + "]",
...@@ -58,7 +58,7 @@ $.extend(Page.prototype, { ...@@ -58,7 +58,7 @@ $.extend(Page.prototype, {
* @param {Dom} textarea 评论框对象 * @param {Dom} textarea 评论框对象
* @returns {Num} 光标位置 * @returns {Num} 光标位置
*/ */
_getCursorEndPosition: function(textarea) { _getCursorEndPosition: function (textarea) {
textarea.focus(); textarea.focus();
if (textarea.setSelectionRange) { // W3C if (textarea.setSelectionRange) { // W3C
return textarea.selectionEnd; return textarea.selectionEnd;
...@@ -80,7 +80,7 @@ $.extend(Page.prototype, { ...@@ -80,7 +80,7 @@ $.extend(Page.prototype, {
* @description 评论校验 * @description 评论校验
* @param {String} state 用于区别回复评论还是对文章的评论 * @param {String} state 用于区别回复评论还是对文章的评论
*/ */
validateComment: function(state) { validateComment: function (state) {
if (Util.isLoggedIn()) { if (Util.isLoggedIn()) {
var commenterContent = $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, ""); var commenterContent = $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "");
if (2 > commenterContent.length || commenterContent.length > 500) { if (2 > commenterContent.length || commenterContent.length > 500) {
...@@ -120,7 +120,7 @@ $.extend(Page.prototype, { ...@@ -120,7 +120,7 @@ $.extend(Page.prototype, {
* @description 把评论中的标识替换为图片 * @description 把评论中的标识替换为图片
* @param {Dom} selector * @param {Dom} selector
*/ */
replaceCommentsEm: function(selector) { replaceCommentsEm: function (selector) {
var $commentContents = $(selector); var $commentContents = $(selector);
for (var i = 0; i < $commentContents.length; i++) { for (var i = 0; i < $commentContents.length; i++) {
var str = $commentContents[i].innerHTML; var str = $commentContents[i].innerHTML;
...@@ -131,7 +131,7 @@ $.extend(Page.prototype, { ...@@ -131,7 +131,7 @@ $.extend(Page.prototype, {
* @description 初始化 SyantaxHighlighter * @description 初始化 SyantaxHighlighter
* @param {Array} languages 需要加载的语言 * @param {Array} languages 需要加载的语言
*/ */
_initSyntaxHighlighter: function(languages) { _initSyntaxHighlighter: function (languages) {
// load brush js // load brush js
for (var i = 0; i < languages.length; i++) { for (var i = 0; i < languages.length; i++) {
switch (languages[i]) { switch (languages[i]) {
...@@ -274,7 +274,7 @@ $.extend(Page.prototype, { ...@@ -274,7 +274,7 @@ $.extend(Page.prototype, {
* @description 加载 SyntaxHighlighter * @description 加载 SyntaxHighlighter
* @param {String} SHTheme SyntaxHighLighter 样式 * @param {String} SHTheme SyntaxHighLighter 样式
*/ */
_loadSyntaxHighlighter: function(SHTheme) { _loadSyntaxHighlighter: function (SHTheme) {
var cssName = SHTheme ? SHTheme : "shCoreEclipse", var cssName = SHTheme ? SHTheme : "shCoreEclipse",
that = this; that = this;
// load css // load css
...@@ -290,11 +290,11 @@ $.extend(Page.prototype, { ...@@ -290,11 +290,11 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shCore.js", url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shCore.js",
dataType: "script", dataType: "script",
cache: true, cache: true,
success: function() { success: function () {
// get brush settings // get brush settings
var languages = [], var languages = [],
isScrip = false; isScrip = false;
$(".article-body pre, .code-highlight pre").each(function() { $(".article-body pre, .code-highlight pre").each(function () {
var name = this.className.split(";")[0]; var name = this.className.split(";")[0];
var language = name.substr(7, name.length - 1); var language = name.substr(7, name.length - 1);
if (this.className.indexOf("html-script: true") > -1 && if (this.className.indexOf("html-script: true") > -1 &&
...@@ -311,7 +311,7 @@ $.extend(Page.prototype, { ...@@ -311,7 +311,7 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shBrushXml.js", url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shBrushXml.js",
dataType: "script", dataType: "script",
cache: true, cache: true,
success: function() { success: function () {
that._initSyntaxHighlighter(languages); that._initSyntaxHighlighter(languages);
} }
}); });
...@@ -326,10 +326,10 @@ $.extend(Page.prototype, { ...@@ -326,10 +326,10 @@ $.extend(Page.prototype, {
* @param {Obj} obj 语法高亮配置参数 * @param {Obj} obj 语法高亮配置参数
* @param {Obj} obj.SHTheme 语法高亮 SyntaxHighLighter 样式 * @param {Obj} obj.SHTheme 语法高亮 SyntaxHighLighter 样式
*/ */
parseLanguage: function(obj) { parseLanguage: function (obj) {
var isPrettify = false, var isPrettify = false,
isSH = false; isSH = false;
$(".article-body pre, .code-highlight pre").each(function() { $(".article-body pre, .code-highlight pre").each(function () {
if (this.className.indexOf("brush") > -1) { if (this.className.indexOf("brush") > -1) {
isSH = true; isSH = true;
} }
...@@ -338,8 +338,10 @@ $.extend(Page.prototype, { ...@@ -338,8 +338,10 @@ $.extend(Page.prototype, {
isPrettify = true; isPrettify = true;
} }
}); });
if (isSH) { if (isSH) {
this._loadSyntaxHighlighter(obj ? (obj.SHTheme ? obj.SHTheme : undefined) : undefined); this._loadSyntaxHighlighter(obj ? (obj.SHTheme ? obj.SHTheme : undefined) : undefined);
return false;
} }
if (isPrettify) { if (isPrettify) {
...@@ -355,37 +357,56 @@ $.extend(Page.prototype, { ...@@ -355,37 +357,56 @@ $.extend(Page.prototype, {
url: latkeConfig.staticServePath + "/js/lib/google-code-prettify/prettify.js", url: latkeConfig.staticServePath + "/js/lib/google-code-prettify/prettify.js",
dataType: "script", dataType: "script",
cache: true, cache: true,
success: function() { success: function () {
prettyPrint(); prettyPrint();
} }
}); });
return false;
}
// otherelse use highlight
// load css
if (document.createStyleSheet) {
document.createStyleSheet(latkeConfig.staticServePath + "/js/lib/highlight/styles/default.css");
} else {
$("head").append($("<link rel='stylesheet' href='" + latkeConfig.staticServePath + "/js/lib/highlight/styles/github.css'>"));
} }
$.ajax({
url: latkeConfig.staticServePath + "/js/lib/highlight/highlight.pack.js",
dataType: "script",
cache: true,
success: function () {
hljs.initHighlightingOnLoad();
}
});
}, },
/* /*
* @description 文章/自定义页面加载 * @description 文章/自定义页面加载
* @param {Obj} obj 配置设定 * @param {Obj} obj 配置设定
* @param {Obj} obj.language 代码高亮配置 * @param {Obj} obj.language 代码高亮配置
*/ */
load: function(obj) { load: function (obj) {
var that = this; var that = this;
// emotions // emotions
that.insertEmotions(); that.insertEmotions();
// language // language
that.parseLanguage(obj ? (obj.language ? obj.language : undefined) : undefined); that.parseLanguage(obj ? (obj.language ? obj.language : undefined) : undefined);
// submit comment // submit comment
$("#commentValidate").keypress(function(event) { $("#commentValidate").keypress(function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
that.submitComment(); that.submitComment();
} }
}); });
$("#comment").keypress(function(event) { $("#comment").keypress(function (event) {
if (event.keyCode === 13 && event.ctrlKey) { if (event.keyCode === 13 && event.ctrlKey) {
that.submitComment(); that.submitComment();
} }
}); });
// captcha // captcha
$("#captcha").click(function() { $("#captcha").click(function () {
$(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random()); $(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
}); });
// cookie // cookie
...@@ -406,13 +427,13 @@ $.extend(Page.prototype, { ...@@ -406,13 +427,13 @@ $.extend(Page.prototype, {
* @description 加载随机文章 * @description 加载随机文章
* @param {String} headTitle 随机文章标题 * @param {String} headTitle 随机文章标题
*/ */
loadRandomArticles: function(headTitle) { loadRandomArticles: function (headTitle) {
var randomArticles1Label = this.tips.randomArticles1Label; var randomArticles1Label = this.tips.randomArticles1Label;
// getRandomArticles // getRandomArticles
$.ajax({ $.ajax({
url: latkeConfig.servePath + "/get-random-articles.do", url: latkeConfig.servePath + "/get-random-articles.do",
type: "POST", type: "POST",
success: function(result, textStatus) { success: function (result, textStatus) {
var randomArticles = result.randomArticles; var randomArticles = result.randomArticles;
if (!randomArticles || 0 === randomArticles.length) { if (!randomArticles || 0 === randomArticles.length) {
$("#randomArticles").remove(); $("#randomArticles").remove();
...@@ -439,11 +460,11 @@ $.extend(Page.prototype, { ...@@ -439,11 +460,11 @@ $.extend(Page.prototype, {
* @param {String} id 文章 id * @param {String} id 文章 id
* @param {String} headTitle 相关文章标题 * @param {String} headTitle 相关文章标题
*/ */
loadRelevantArticles: function(id, headTitle) { loadRelevantArticles: function (id, headTitle) {
$.ajax({ $.ajax({
url: latkeConfig.servePath + "/article/id/" + id + "/relevant/articles", url: latkeConfig.servePath + "/article/id/" + id + "/relevant/articles",
type: "GET", type: "GET",
success: function(data, textStatus) { success: function (data, textStatus) {
var articles = data.relevantArticles; var articles = data.relevantArticles;
if (!articles || 0 === articles.length) { if (!articles || 0 === articles.length) {
$("#relevantArticles").remove(); $("#relevantArticles").remove();
...@@ -464,7 +485,7 @@ $.extend(Page.prototype, { ...@@ -464,7 +485,7 @@ $.extend(Page.prototype, {
+ listHtml + "</ul>"; + listHtml + "</ul>";
$("#relevantArticles").append(relevantArticleListHtml); $("#relevantArticles").append(relevantArticleListHtml);
}, },
error: function() { error: function () {
$("#relevantArticles").remove(); $("#relevantArticles").remove();
} }
}); });
...@@ -474,7 +495,7 @@ $.extend(Page.prototype, { ...@@ -474,7 +495,7 @@ $.extend(Page.prototype, {
* @param {String} tags 文章 tags * @param {String} tags 文章 tags
* @param {String} headTitle 站外相关文章标题 * @param {String} headTitle 站外相关文章标题
*/ */
loadExternalRelevantArticles: function(tags, headTitle) { loadExternalRelevantArticles: function (tags, headTitle) {
var tips = this.tips; var tips = this.tips;
try { try {
$.ajax({ $.ajax({
...@@ -483,10 +504,10 @@ $.extend(Page.prototype, { ...@@ -483,10 +504,10 @@ $.extend(Page.prototype, {
type: "GET", type: "GET",
cache: true, cache: true,
dataType: "jsonp", dataType: "jsonp",
error: function() { error: function () {
$("#externalRelevantArticles").remove(); $("#externalRelevantArticles").remove();
}, },
success: function(data, textStatus) { success: function (data, textStatus) {
var articles = data.articles; var articles = data.articles;
if (!articles || 0 === articles.length) { if (!articles || 0 === articles.length) {
$("#externalRelevantArticles").remove(); $("#externalRelevantArticles").remove();
...@@ -518,7 +539,7 @@ $.extend(Page.prototype, { ...@@ -518,7 +539,7 @@ $.extend(Page.prototype, {
* @param {String} commentId 回复评论时的评论 id * @param {String} commentId 回复评论时的评论 id
* @param {String} state 区分回复文章还是回复评论的标识 * @param {String} state 区分回复文章还是回复评论的标识
*/ */
submitComment: function(commentId, state) { submitComment: function (commentId, state) {
if (!state) { if (!state) {
state = ''; state = '';
} }
...@@ -536,7 +557,7 @@ $.extend(Page.prototype, { ...@@ -536,7 +557,7 @@ $.extend(Page.prototype, {
"oId": tips.oId, "oId": tips.oId,
"commentContent": $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "") "commentContent": $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "")
}; };
if (!Util.isLoggedIn()) { if (!Util.isLoggedIn()) {
requestJSONObject = { requestJSONObject = {
"oId": tips.oId, "oId": tips.oId,
...@@ -550,7 +571,7 @@ $.extend(Page.prototype, { ...@@ -550,7 +571,7 @@ $.extend(Page.prototype, {
Cookie.createCookie("commentEmail", requestJSONObject.commentEmail, 365); Cookie.createCookie("commentEmail", requestJSONObject.commentEmail, 365);
Cookie.createCookie("commentURL", $("#commentURL" + state).val().replace(/(^\s*)|(\s*$)/g, ""), 365); Cookie.createCookie("commentURL", $("#commentURL" + state).val().replace(/(^\s*)|(\s*$)/g, ""), 365);
} }
if (state === "Reply") { if (state === "Reply") {
requestJSONObject.commentOriginalCommentId = commentId; requestJSONObject.commentOriginalCommentId = commentId;
} }
...@@ -561,7 +582,7 @@ $.extend(Page.prototype, { ...@@ -561,7 +582,7 @@ $.extend(Page.prototype, {
cache: false, cache: false,
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(requestJSONObject), data: JSON.stringify(requestJSONObject),
success: function(result) { success: function (result) {
if (!result.sc) { if (!result.sc) {
$("#commentErrorTip" + state).html(result.msg); $("#commentErrorTip" + state).html(result.msg);
$("#comment" + state).val("").focus(); $("#comment" + state).val("").focus();
...@@ -600,7 +621,7 @@ $.extend(Page.prototype, { ...@@ -600,7 +621,7 @@ $.extend(Page.prototype, {
* @param {String} commentFormHTML 评论表单HTML * @param {String} commentFormHTML 评论表单HTML
* @param {String} endHTML 判断该表单使用 table 还是 div 标签,然后进行构造 * @param {String} endHTML 判断该表单使用 table 还是 div 标签,然后进行构造
*/ */
addReplyForm: function(id, commentFormHTML, endHTML) { addReplyForm: function (id, commentFormHTML, endHTML) {
var that = this; var that = this;
if (id === this.currentCommentId) { if (id === this.currentCommentId) {
if ($("#commentNameReply").val() === "") { if ($("#commentNameReply").val() === "") {
...@@ -621,7 +642,7 @@ $.extend(Page.prototype, { ...@@ -621,7 +642,7 @@ $.extend(Page.prototype, {
} }
// change id, bind event and set value // change id, bind event and set value
$("#replyForm input, #replyForm textarea").each(function() { $("#replyForm input, #replyForm textarea").each(function () {
this.id = this.id + "Reply"; this.id = this.id + "Reply";
}); });
$("#commentNameReply").val(Cookie.readCookie("commentName")); $("#commentNameReply").val(Cookie.readCookie("commentName"));
...@@ -634,25 +655,25 @@ $.extend(Page.prototype, { ...@@ -634,25 +655,25 @@ $.extend(Page.prototype, {
$("#commentURLReply").val(Cookie.readCookie("commentURL")); $("#commentURLReply").val(Cookie.readCookie("commentURL"));
$("#replyForm #emotions").attr("id", "emotionsReply"); $("#replyForm #emotions").attr("id", "emotionsReply");
this.insertEmotions("Reply"); this.insertEmotions("Reply");
$("#commentReply").unbind().keypress(function(event) { $("#commentReply").unbind().keypress(function (event) {
if (event.keyCode === 13 && event.ctrlKey) { if (event.keyCode === 13 && event.ctrlKey) {
that.submitComment(id, 'Reply'); that.submitComment(id, 'Reply');
event.preventDefault(); event.preventDefault();
} }
}); });
$("#commentValidateReply").unbind().keypress(function(event) { $("#commentValidateReply").unbind().keypress(function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
that.submitComment(id, 'Reply'); that.submitComment(id, 'Reply');
event.preventDefault(); event.preventDefault();
} }
}); });
$("#replyForm #captcha").attr("id", "captchaReply"). $("#replyForm #captcha").attr("id", "captchaReply").
attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function() { attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function () {
$(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random()); $(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
}); });
$("#replyForm #commentErrorTip").attr("id", "commentErrorTipReply").html("").hide(); $("#replyForm #commentErrorTip").attr("id", "commentErrorTipReply").html("").hide();
$("#replyForm #submitCommentButton").attr("id", "submitCommentButtonReply"); $("#replyForm #submitCommentButton").attr("id", "submitCommentButtonReply");
$("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function() { $("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function () {
that.submitComment(id, 'Reply'); that.submitComment(id, 'Reply');
}); });
if ($("#commentNameReply").val() === "") { if ($("#commentNameReply").val() === "") {
...@@ -669,7 +690,7 @@ $.extend(Page.prototype, { ...@@ -669,7 +690,7 @@ $.extend(Page.prototype, {
* @description 隐藏回复评论的浮出层 * @description 隐藏回复评论的浮出层
* @parma {String} id 被回复的评论 id * @parma {String} id 被回复的评论 id
*/ */
hideComment: function(id) { hideComment: function (id) {
$("#commentRef" + id).hide(); $("#commentRef" + id).hide();
}, },
/* /*
...@@ -679,7 +700,7 @@ $.extend(Page.prototype, { ...@@ -679,7 +700,7 @@ $.extend(Page.prototype, {
* @param {Int} top 位置相对浮出层的高度 * @param {Int} top 位置相对浮出层的高度
* @param {String} [parentTag] it 如果嵌入在 position 为 relative 的元素 A 中时,需取到 A 元素 * @param {String} [parentTag] it 如果嵌入在 position 为 relative 的元素 A 中时,需取到 A 元素
*/ */
showComment: function(it, id, top, parentTag) { showComment: function (it, id, top, parentTag) {
var positionTop = parseInt($(it).position().top); var positionTop = parseInt($(it).position().top);
if (parentTag) { if (parentTag) {
positionTop = parseInt($(it).parents(parentTag).position().top); positionTop = parseInt($(it).parents(parentTag).position().top);
...@@ -700,7 +721,7 @@ $.extend(Page.prototype, { ...@@ -700,7 +721,7 @@ $.extend(Page.prototype, {
* @parma {String} commentHTML 回复内容 HTML * @parma {String} commentHTML 回复内容 HTML
* @param {String} state 用于区分评论文章还是回复评论 * @param {String} state 用于区分评论文章还是回复评论
*/ */
addCommentAjax: function(commentHTML, state) { addCommentAjax: function (commentHTML, state) {
if ($("#comments").children().length > 0) { if ($("#comments").children().length > 0) {
$($("#comments").children()[0]).before(commentHTML); $($("#comments").children()[0]).before(commentHTML);
} else { } else {
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
* skin finding style * skin finding style
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Jun 4, 2015 * @version 1.0.1.0, Nov 2, 2015
*/ */
/* start reset */ /* start reset */
html { html {
...@@ -427,6 +427,7 @@ pre code, pre tt { ...@@ -427,6 +427,7 @@ pre code, pre tt {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
font-family: "Merriweather", "Microsoft Yahei", 'Helvetica'; font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
outline: none;
} }
.form button { .form button {
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<body> <body>
<#include "side.ftl"> <#include "side.ftl">
<main> <main>
<article class="post"> <article class="post article-body">
<header> <header>
<h2> <h2>
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <a rel="bookmark" href="${servePath}${article.articlePermalink}">
...@@ -49,7 +49,23 @@ ...@@ -49,7 +49,23 @@
${article.articleSign.signHTML} ${article.articleSign.signHTML}
</div> </div>
</#if> </#if>
<#if nextArticlePermalink?? || previousArticlePermalink??>
<aside class="fn-clear">
<#if previousArticlePermalink??>
<a class="fn-left" rel="prev" href="${servePath}${previousArticlePermalink}">
<strong>&lt;</strong> ${previousArticleTitle}
</a>
</#if>
<#if nextArticlePermalink??>
<a class="fn-right" rel="next" href="${servePath}${nextArticlePermalink}">
${nextArticleTitle} <strong>&gt;</strong>
</a>
</#if>
</aside>
</#if>
</section> </section>
<footer class="fn-clear share"> <footer class="fn-clear share">
<div class="fn-right"> <div class="fn-right">
<span class="icon icon-t-weibo" data-type="tencent"></span> <span class="icon icon-t-weibo" data-type="tencent"></span>
...@@ -59,30 +75,9 @@ ...@@ -59,30 +75,9 @@
</div> </div>
</footer> </footer>
</article> </article>
<@comments commentList=articleComments article=article></@comments> <@comments commentList=articleComments article=article></@comments>
<#if nextArticlePermalink?? || previousArticlePermalink??>
<aside class="read-next">
<#if nextArticlePermalink??>
<div class="read-next-story " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/next.jpg')"
onclick="window.location = '${servePath}${nextArticlePermalink}'">
<section class="post">
<h2>${nextArticleTitle}</h2>
<p>${nextArticleAbstract}</p>
</section>
</div>
</#if>
<#if previousArticlePermalink??>
<div class="read-next-story prev " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/preview.jpg')"
onclick="window.location = '${servePath}${previousArticlePermalink}'">
<section class="post">
<h2>${previousArticleTitle}</h2>
<p>${previousArticleAbstract}</p>
</section>
</div>
</#if>
</aside>
</#if>
<#include "footer.ftl"> <#include "footer.ftl">
<@comment_script oId=article.oId> <@comment_script oId=article.oId>
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
* skin yilia style * skin yilia style
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Nov 1, 2015 * @version 1.1.0.0, Nov 2, 2015
*/ */
/* start reset */ /* start reset */
html { html {
...@@ -65,7 +65,7 @@ h4, h5, h6 { ...@@ -65,7 +65,7 @@ h4, h5, h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
color: #2E2E2E; color: #666;
line-height: 1.15em; line-height: 1.15em;
font-family: "Open Sans", "Microsoft Yahei", 'Helvetica'; font-family: "Open Sans", "Microsoft Yahei", 'Helvetica';
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
...@@ -149,11 +149,16 @@ hr { ...@@ -149,11 +149,16 @@ hr {
} }
blockquote { blockquote {
-moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 1.75em 0 1.75em -2.2em; margin: 1.75em 0 1.75em 0;
padding: 0 0 0 1.75em; padding: 0 0 0 1.75em;
border-left: #4A4A4A 0.4em solid; border-left: 5px solid;
transition: all 0.3s ease;
}
blockquote:hover {
border-color: #b0a0aa;
} }
blockquote p { blockquote p {
...@@ -191,18 +196,7 @@ code, tt { ...@@ -191,18 +196,7 @@ code, tt {
} }
pre { pre {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 1.75em 0;
border: #E3EDF3 1px solid;
width: 100%;
padding: 10px;
font-family: Inconsolata, monospace, "Microsoft Yahei", 'Helvetica';
font-size: 0.9em; font-size: 0.9em;
white-space: pre;
overflow: auto;
background: #F7FAFB;
border-radius: 3px;
} }
pre code, pre tt { pre code, pre tt {
...@@ -305,8 +299,125 @@ pre code, pre tt { ...@@ -305,8 +299,125 @@ pre code, pre tt {
.icon-login:before { .icon-login:before {
content: "\e611"; content: "\e611";
} }
.form {
width: 100%;
padding: 30px;
}
#captcha,
#captchaReply {
height: 27px;
display: inline-block;
vertical-align: inherit;
}
.form input,
.form textarea,
.form button {
border: 1px solid #CCCCCC;
background-color: #FAFAFA;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
padding: 7px 8px;
width: 100%;
box-sizing: border-box;
outline: none;
font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
}
.form button {
width: auto;
vertical-align: bottom;
transition: all 0.3s ease;
cursor: pointer;
}
.form button:hover {
background-color: #b0a0aa;
color: #FFF;
box-shadow: 0 0 0;
border-color: #b0a0aa;
}
.form input:focus,
.form textarea:focus {
background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(176, 160, 170, 0.5);
border: 1px solid #b0a0aa;
}
/* end common */ /* end common */
/* start emotions */
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09,
.em10, .em11, .em12, .em13, .em14 {
background-image: url("../images/emotions/emotions-ease.png");
float: left;
height: 24px;
margin-right: 5px;
width: 24px;
}
#emotions span {
cursor: pointer;
}
.em01 {
background-position: -24px 0;
}
.em02 {
background-position: -48px 0;
}
.em03 {
background-position: -72px 0;
}
.em04 {
background-position: -96px 0;
}
.em05 {
background-position: 0px -24px;
}
.em06 {
background-position: -24px -24px;
}
.em07 {
background-position: -48px -24px;
}
.em08 {
background-position: -72px -24px;
}
.em09 {
background-position: -96px -24px;
}
.em10 {
background-position: 0 -48px;
}
.em11 {
background-position: -24px -48px ;
}
.em12 {
background-position: -48px -48px;
}
.em13 {
background-position: -72px -48px;
}
.em14 {
background-position: -96px -48px;
}
/* end emotions */
/* start side */ /* start side */
.side { .side {
position: fixed; position: fixed;
...@@ -448,9 +559,9 @@ article header:hover { ...@@ -448,9 +559,9 @@ article header:hover {
} }
article header h2 { article header h2 {
margin: 0; margin: 0;
font-size: 26px; font-size: 26px;
padding-right: 110px; padding-right: 110px;
} }
article header a { article header a {
...@@ -490,14 +601,6 @@ article footer { ...@@ -490,14 +601,6 @@ article footer {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.post section.tags {
margin: 0;
}
.post header {
padding-bottom: 0;
}
.tags .tag:hover, .tags .tag:hover,
article .abstract a:hover{ article .abstract a:hover{
opacity: 0.7; opacity: 0.7;
...@@ -512,11 +615,6 @@ article .abstract a:hover{ ...@@ -512,11 +615,6 @@ article .abstract a:hover{
transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;
} }
.post .tags .avatar {
bottom: inherit;
margin-top: 4px;
}
.share span { .share span {
transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;
cursor: pointer; cursor: pointer;
...@@ -630,8 +728,52 @@ nav.pagination:hover .extend { ...@@ -630,8 +728,52 @@ nav.pagination:hover .extend {
opacity: 1; opacity: 1;
} }
article.post {
visibility: visible;
}
.post .tags .avatar {
bottom: inherit;
margin-top: 4px;
}
.post section.tags {
margin: 0;
}
.post header {
padding-bottom: 0;
}
.post .share { .post .share {
padding: 0; padding: 10px 0 0 0;
margin-top: 15px;
font-size: 14px;
}
.post aside a {
color: #DDD;
}
.post aside a > strong {
background: #ddd;
color: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
display: inline-block;
transition: background 0.3s;
vertical-align: middle;
line-height: 18px;
text-align: center;
}
.post aside a:hover {
color: #4d4d4d;
}
.post aside a:hover > strong {
background-color: #4d4d4d;
} }
/* end article */ /* end article */
...@@ -644,6 +786,53 @@ footer.footer { ...@@ -644,6 +786,53 @@ footer.footer {
opacity: 0.6; opacity: 0.6;
margin: 0 30px 30px; margin: 0 30px 30px;
} }
footer.footer .icon-goup {
position: fixed;
bottom: 35px;
right: 5px;
-webkit-animation: upbounce 4s 2s infinite;
animation: upbounce 4s 2s infinite;
z-index: 10;
font-size: 20px;
cursor: pointer;
color: #b0a0aa;
transition: all 0.3s ease;
}
footer.footer .icon-goup:hover {
color: #4a4a4a;
}
@-webkit-keyframes upbounce {
0%, 10%, 25%, 40%, 50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
30% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes upbounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
/* end footer */ /* end footer */
/* start responsive */ /* start responsive */
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version} <a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version}
</span> </span>
</div> </div>
<span onclick="Util.goTop()" class="icon-goup"></span>
</footer> </footer>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
* @fileoverview util and every page should be used. * @fileoverview util and every page should be used.
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.0, Nov 1, 2015 * @version 1.1.0.0, Nov 2, 2015
*/ */
/** /**
...@@ -31,15 +31,19 @@ var Yilia = { ...@@ -31,15 +31,19 @@ var Yilia = {
init: function () { init: function () {
Util.killIE(); Util.killIE();
this.resetTags(); this.resetTags();
$(window).scroll(function () { if ($("article").length > 0 && $("article.post").length === 0) {
$("article:not(.show)").each(function () { $(window).scroll(function () {
if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) { $("article:not(.show)").each(function () {
$(this).addClass("show"); if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
} $(this).addClass("show");
}
});
}); });
});
$(window).scroll();
$(window).scroll(); } else if ($("article.post").length === 1) {
$("article.post").addClass('show');
}
}, },
resetTags: function () { resetTags: function () {
$("a.tag").each(function (i) { $("a.tag").each(function (i) {
......
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