✨ NEW: Add a shadow to topbar, on scroll (#255)

executablebooks · Nov 14, 2020 · 1a56dad · 1a56dad
1 parent 3736580
commit 1a56dad
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 57 deletions.
diff --git a/sphinx_book_theme/static/images/logo_binder.svg b/sphinx_book_theme/static/images/logo_binder.svg
diff --git a/...heme.97663d53efca608227ee057f134e8bb0.css → ...heme.379551dfb7ef9943dbb300da9fad4069.css b/...heme.97663d53efca608227ee057f134e8bb0.css → ...heme.379551dfb7ef9943dbb300da9fad4069.css
diff --git a/...theme.d31b09fe5c1d09cb49b26a786de4a05d.js → ...theme.7d483ff0a819d6edff12ce0b1ead3928.js b/...theme.d31b09fe5c1d09cb49b26a786de4a05d.js → ...theme.7d483ff0a819d6edff12ce0b1ead3928.js
@@ -7,7 +7,8 @@ var sbRunWhenDOMLoaded=cb=>{if(document.readyState!='loading'){cb()}else if(docu
 function toggleFullScreen(){var navToggler=$("#navbar-toggler");if(!document.fullscreenElement){document.documentElement.requestFullscreen();if(!navToggler.hasClass("collapsed")){navToggler.click();}}else{if(document.exitFullscreen){document.exitFullscreen();if(navToggler.hasClass("collapsed")){navToggler.click();}}}}
 var initTooltips=()=>{$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});}
 var initTocHide=()=>{var scrollTimeout;var throttle=200;var tocHeight=$("#bd-toc-nav").outerHeight(true)+$(".bd-toc").outerHeight(true);var hideTocAfter=tocHeight+200;var checkTocScroll=function(){var margin_content=$(".margin, .tag_margin, .full-width, .full_width, .tag_full-width, .tag_full_width, .sidebar, .tag_sidebar, .popout, .tag_popout");margin_content.each((index,item)=>{var topOffset=$(item).offset().top-$(window).scrollTop();var bottomOffset=topOffset+$(item).outerHeight(true);var topOverlaps=((topOffset>=0)&&(topOffset<hideTocAfter));var bottomOverlaps=((bottomOffset>=0)&&(bottomOffset<hideTocAfter));var removeToc=(topOverlaps||bottomOverlaps);if(removeToc&&window.pageYOffset>20){$("div.bd-toc").removeClass("show")
-return false}else{$("div.bd-toc").addClass("show")};})};$(window).on('scroll',function(){if(!scrollTimeout){scrollTimeout=setTimeout(function(){checkTocScroll();scrollTimeout=null;},throttle);}});}
+return false}else{$("div.bd-toc").addClass("show")};})};var manageScrolledClassOnBody=function(){if(window.scrollY>0){document.body.classList.add("scrolled");}else{document.body.classList.remove("scrolled");}}
+$(window).on('scroll',function(){if(!scrollTimeout){scrollTimeout=setTimeout(function(){checkTocScroll();manageScrolledClassOnBody();scrollTimeout=null;},throttle);}});}
 var collapsibleListener=()=>{let expandUl=($ul)=>{if($ul.hasClass("collapse-ul")){$ul.removeClass("collapse-ul")
 $ul.next("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")}}
 $elem=$("li.active")

diff --git a/sphinx_book_theme/theme.conf b/sphinx_book_theme/theme.conf
@@ -3,7 +3,7 @@
 inherit = pydata_sphinx_theme
 pygments_style = tango
 sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
-stylesheet = sphinx-book-theme.97663d53efca608227ee057f134e8bb0.css
+stylesheet = sphinx-book-theme.379551dfb7ef9943dbb300da9fad4069.css
 
 [options]
 single_page = False

diff --git a/sphinx_book_theme/topbar.html b/sphinx_book_theme/topbar.html
@@ -1,31 +1,32 @@
-<div class="row topbar fixed-top container-xl">
-    <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show">
-    </div>
-    <div class="col pl-2 topbar-main">
-        {% if theme_single_page != True %}
-        <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
-            data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
-            aria-expanded="true" aria-label="{{ translate('Toggle navigation') }}" aria-controls="site-navigation"
-            title="{{ translate('Toggle navigation') }}" data-toggle="tooltip" data-placement="left">
-            <i class="fas fa-bars"></i>
-            <i class="fas fa-arrow-left"></i>
-            <i class="fas fa-arrow-up"></i>
-        </button>
-        {% endif %}
-        {% include "topbar/download.html" %}
-        {% include "topbar/repobuttons.html" %}
+<div class="topbar container-xl fixed-top">
+    <div class="topbar-contents row">
+        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
+        <div class="col pl-md-4 topbar-main">
+            {% if theme_single_page != True %}
+            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
+                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
+                aria-expanded="true" aria-label="{{ translate('Toggle navigation') }}" aria-controls="site-navigation"
+                title="{{ translate('Toggle navigation') }}" data-toggle="tooltip" data-placement="left">
+                <i class="fas fa-bars"></i>
+                <i class="fas fa-arrow-left"></i>
+                <i class="fas fa-arrow-up"></i>
+            </button>
+            {% endif %}
+            {% include "topbar/download.html" %}
+            {% include "topbar/repobuttons.html" %}
 
-        <!-- Full screen (wrap in <a> to have style consistency -->
-        <a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
-                data-placement="bottom" onclick="toggleFullScreen()" aria-label="{{ translate('Fullscreen mode') }}"
-                title="{{ translate('Fullscreen mode') }}"><i
-                    class="fas fa-expand"></i></button></a>
+            <!-- Full screen (wrap in <a> to have style consistency -->
+            <a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
+                    data-placement="bottom" onclick="toggleFullScreen()" aria-label="{{ translate('Fullscreen mode') }}"
+                    title="{{ translate('Fullscreen mode') }}"><i
+                        class="fas fa-expand"></i></button></a>
 
-        {% include "topbar/launchbuttons.html" %}
-    </div>
+            {% include "topbar/launchbuttons.html" %}
+        </div>
 
-    <!-- Table of contents -->
-    <div class="d-none d-md-block col-md-2 bd-toc show">
-        {{ generate_toc_html() }}
+        <!-- Table of contents -->
+        <div class="d-none d-md-block col-md-2 bd-toc show">
+            {{ generate_toc_html() }}
+        </div>
     </div>
 </div>
diff --git a/src/js/sphinx-book-theme.js b/src/js/sphinx-book-theme.js
@@ -80,11 +80,19 @@ var initTocHide = () => {
         };
       })
   };
+  var manageScrolledClassOnBody = function () {
+    if (window.scrollY > 0) {
+      document.body.classList.add("scrolled");
+    } else {
+      document.body.classList.remove("scrolled");
+    }
+  }
 
   $(window).on('scroll', function () {
       if (!scrollTimeout) {
           scrollTimeout = setTimeout(function () {
               checkTocScroll();
+              manageScrolledClassOnBody();
               scrollTimeout = null;
           }, throttle);
       }

diff --git a/src/scss/_topbar.scss b/src/scss/_topbar.scss
@@ -1,20 +1,22 @@
 /*********************************************
 * Top Bar *
 *********************************************/
+.topbar, .topbar-contents, .topbar-main {
+    height: $topbar-height;
+}
+
 .topbar {
-    margin: 0em auto 1em auto !important;
-    padding-top: .25em;
-    padding-bottom: .25em;
     background-color: white;
-    height: $topbar-height;
     transition: left .2s;
 
-    > div {
-        height: 2.5em;
-        top: 0px;
-    }
-
     .topbar-main {
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+
+        .scrolled & {
+            box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
+        }
+
         > button, > div, > a {
             float: left;
             height: 100%;