Permalink
Browse files

refactor: post-nav-button 文章跳转按钮优化

Less code and more logical.
精简代码,优化逻辑。
  • Loading branch information...
MOxFIVE committed Dec 21, 2015
1 parent 993b304 commit 0ee5fbc127958bb0d57c920607c5ad15e1167082
Showing with 50 additions and 73 deletions.
  1. +1 −1 layout/_partial/article.ejs
  2. +33 −42 layout/_partial/post-nav-button.ejs
  3. +15 −29 source/css/_partial/main.styl
  4. +1 −1 source/css/_partial/mobile.styl
@@ -95,7 +95,7 @@
display: none;
}
</style>
<div class="scroll">
<div class="scroll" id="scroll-with-comments">
<a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
<a href="#comments" title="查看评论"><i class="fa fa-comments-o"></i></a>
<a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
@@ -1,49 +1,40 @@
<% if (is_post()){ %>
<% if (post.prev && !post.next){ %>
<div class="post-nav-button">
<a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
<div class="scroll" id="post-nav-button">
<% if (post.prev){ %>
<a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
<i class="fa fa-angle-left"></i>
</a>
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
</div>
</a>
<% } else { %>
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
<% } %>
<% if (!post.prev && post.next){ %>
<div class="post-nav-button">
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
<i class="fa fa-angle-right"></i>
</a>
</div>
<% } %>
<% if (post.prev && post.next){ %>
<div class="post-nav-button">
<a href="<%- url_for(post.prev.path) %>" title="上一篇: <%= post.prev.title %>">
<i class="fa fa-angle-left"></i>
</a>
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
<a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
<% if (post.next){ %>
<a href="<%- url_for(post.next.path) %>" title="下一篇: <%= post.next.title %>">
<i class="fa fa-angle-right"></i>
</a>
</div>
</a>
<% } else { %>
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
<% } %>
<%- list_posts({amount: 999}) %>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
$(".post-list-item a").attr("target","_blank");
$(".post-nav-button > a:nth-child(2)").click(function() {
$(".fa-bars, .fa-times").toggle();
$(".post-list").toggle(300);
if ($(".toc").length > 0) {
$("#toc, #tocButton").toggle(200);
}
else {
$(".switch-btn, .switch-area").toggle(200);
}
})
</script>
</div>
<%- list_posts({amount: 999}) %>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
<script>
$(".post-list").addClass("toc-article");
$(".post-list-item a").attr("target","_blank");
$("#post-nav-button > a:nth-child(2)").click(function() {
$(".fa-bars, .fa-times").toggle();
$(".post-list").toggle(300);
if ($(".toc").length > 0) {
$("#toc, #tocButton").toggle(200);
}
else {
$(".switch-btn, .switch-area").toggle(200);
}
})
</script>
<% } %>
@@ -371,11 +371,14 @@
};
}
#scroll, #scroll-with-comments {
right: 0;
}
.scroll {
z-index: 999;
position: fixed;
top: 61.8%;
right: 0;
text-align: center;
line-height: 42px;
a {
@@ -388,14 +391,14 @@
&:last-child {
border-bottom: none;
};
}
.fa {
color: rgba(255, 255, 255, .8);
}
a:hover {
background: rgba(147, 181, 224, .3);
.fa {
color: white;
color: rgba(255, 255, 255, .8);
}
&:hover {
background: rgba(147, 181, 224, .3) !important;
.fa {
color: white;
}
}
}
}
@@ -422,33 +425,16 @@
}
}
.post-nav-button {
position: fixed;
#post-nav-button {
left: 300px;
top: 61.8%;
text-align: center;
line-height: 42px;
a {
display: block;
width: 29px;
height: 42px;
font-size: 28px;
border-bottom-color: transparent;
background: none;
cursor: pointer;
.fa-times {
display: none;
}
border-bottom: 1px solid transparent;
&:last-child {
border-bottom: none;
}
}
.fa {
color: rgba(255, 255, 255, .8);
}
a:hover {
background: rgba(147, 181, 224, .3);
.fa {
color: white;
}
}
}
@@ -320,7 +320,7 @@
}
}
.post-nav-button {
#post-nav-button {
display: none;
}

0 comments on commit 0ee5fbc

Please sign in to comment.