From ffea3d0f3c7a50ca002a45b4a56be87ec5b14e43 Mon Sep 17 00:00:00 2001
From: Julio Pescador <jpescador@users.noreply.github.com>
Date: Sun, 28 Feb 2016 18:02:20 -0800
Subject: Moving back to top icon and correcting pagination

The back to top icon has been moved from the navigation bar to the
bottom right of the screen. The pagination button css has been corrected
so that any long text fits within the screen.
---
 layouts/partials/footer.html |  2 +-
 layouts/partials/navbar.html |  4 ----
 static/css/add-on.css        | 33 +++++++++++++++++++++++++++++++++
 static/js/backToTop.js       |  7 +++++++
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 44865cc..170a7c8 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
             </div>
-
+        <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
         <!-- Scripts -->
         {{ $minFiles := .Site.Params.minifiedFilesJS }}
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index af3a262..19b91a5 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -20,10 +20,6 @@
     </nav>
     <nav class="main">
         <ul>
-            <li id="back-to-top" style="display:none;">
-                <!-- Put class reference for top icon using font awesome -->
-                <a class="fa-arrow-up" href="#">Top</a>
-            </li>
             {{ if $.Scratch.Get "shareNav" }}
             <li id="share-nav" class="share-menu" style="display:none;">
                 <a class="fa-share-alt" href="#share-menu">Share</a>
diff --git a/static/css/add-on.css b/static/css/add-on.css
index 1a2ce2f..4fb5e92 100644
--- a/static/css/add-on.css
+++ b/static/css/add-on.css
@@ -303,3 +303,36 @@ body.is-share-visible #wrapper {
 			}
 
 		}
+
+.post {
+    margin: 0 0 2em 0;
+}
+
+ul.pagination li {
+    padding-top: 1em;
+}
+
+    ul.pagination .button {
+        line-height: 2.5em;
+        height: auto;
+        white-space: normal;
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
+
+#back-to-top {
+    background-color: white;
+    bottom: 5px;
+    color: #aaaaaa;
+    display: none;
+    position: fixed;
+    right: 5px;
+}
+
+    #back-to-top.btt-fade-out {
+        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
+        -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+        -moz-transition: opacity .3s 0s, visibility 0s 0s;
+        transition: opacity .3s 0s, visibility 0s 0s;
+        opacity: .5;
+    }
diff --git a/static/js/backToTop.js b/static/js/backToTop.js
index 29bcb38..1019553 100644
--- a/static/js/backToTop.js
+++ b/static/js/backToTop.js
@@ -1,6 +1,8 @@
 $(function(){
     // browser window scroll (in pixels) after which the "back to top" link is shown
     var offset = 300,
+        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
+        offset_opacity = 1200,
         //duration of the top scrolling animation (in ms)
         scroll_top_duration = 700,
         //grab the "back to top" link
@@ -14,8 +16,13 @@ $(function(){
             $shareNav.fadeIn();
         } else {
             $backToTop.fadeOut();
+            $backToTop.removeClass('btt-fade-out');
             $shareNav.fadeOut();
         }
+
+        if($(this).scrollTop() > offset_opacity) {
+			$backToTop.addClass('btt-fade-out');
+		}
     });
 
     //smooth scroll to top
-- 
cgit v1.2.3