chore(*): two improvements

- hide back to top button when it is already at top
- improve tags visual style

layout/tags.ejs

@@ -4,20 +4,16 @@
             <h3 class="menu-label">
                 <%= _p('common.tag', Infinity) %>
             </h3>
-            <ul class="menu-list">
+            <div class="field is-grouped is-grouped-multiline">
                 <% _list_tags().forEach(tag => { %>
-                <li>
+                <div class="control">
-                    <a class="level is-marginless" href="<%= tag.url %>">
+                    <a class="tags has-addons" href="<%= tag.url %>">
-                        <span class="level-start">
+                        <span class="tag"><%= tag.name %></span>
-                            <span class="level-item"><%= tag.name %></span>
+                        <span class="tag is-grey"><%= tag.count %></span>
-                        </span>
-                        <span class="level-end">
-                            <span class="level-item tag"><%= tag.count %></span>
-                        </span>
                     </a>
-                </li>
+                </div>
                 <% }) %>
-            </ul>
+            </div>
         </div>
     </div>
 </div>

source/css/style.styl

@@ -49,6 +49,10 @@ body, button, input, select, textarea
         &.is-sticky
             top: 1.5rem
 
+.tag
+    &.is-grey
+        background: #e7e7e7
+
 .card
     border-radius: 4px
     box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)

source/js/back-to-top.js

@@ -93,6 +93,10 @@ $(document).ready(function () {
         }));
     }
 
+    function getScrollTop() {
+        return $(window).scrollTop();
+    }
+
     function getScrollBottom() {
         return $(window).scrollTop() + $(window).height();
     }
@@ -116,7 +120,7 @@ $(document).ready(function () {
             var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
             var maxLeft = $(window).width() - getButtonWidth() - rightMargin;
             var maxBottom = $footer.offset().top + getButtonHeight() / 2 + bottomMargin;
-            if (getScrollBottom() < getRightSidebarBottom() + padding + getButtonHeight()) {
+            if (getScrollTop() == 0 || getScrollBottom() < getRightSidebarBottom() + padding + getButtonHeight()) {
                 nextState = state['desktop-hidden'];
             } else if (getScrollBottom() < maxBottom) {
                 nextState = state['desktop-visible'];