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

Less code and more logical. 精简代码，优化逻辑。
MOxFIVE · Dec 21, 2015 · 0ee5fbc · 0ee5fbc
1 parent 993b304
commit 0ee5fbc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 73 deletions.
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -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>

diff --git a/layout/_partial/post-nav-button.ejs b/layout/_partial/post-nav-button.ejs
@@ -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>
+
 <% } %>
diff --git a/source/css/_partial/main.styl b/source/css/_partial/main.styl
@@ -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;
-        }
     }
 }
 

diff --git a/source/css/_partial/mobile.styl b/source/css/_partial/mobile.styl
@@ -320,7 +320,7 @@
     }
 }
 
-.post-nav-button {
+#post-nav-button {
     display: none;
 }