feat: replacing jquery.scrollbar by perfect-scrollbar

layouts/partials/head_includes.html

@@ -2,6 +2,7 @@
 <link href="/css/font-awesome.min.css" rel="stylesheet">
 <link href="/css/hybrid.css" rel="stylesheet">
 <link href="/css/featherlight.min.css" rel="stylesheet">
+<link href="/css/perfect-scrollbar.min.css" rel="stylesheet">
 <link href="/css/theme.css" rel="stylesheet">
 <link href="/css/hugo-theme.css" rel="stylesheet">
 <style type="text/css">:root #header + #content > #left > #rlblock_left

layouts/partials/menu.html

@@ -10,49 +10,45 @@
       </div>
       {{ end }}
     </div>
-  </div>
+</div>
 
 
-  <div class="scroll-wrapper scrollbar-inner" style="position: relative;">
+  <div class="highlightable">
-    <div class="scrollbar-inner scroll-content scroll-scrolly_visible" style="height: auto; margin-bottom: 0px; margin-right: 0px">
+    <ul class="topics">
-      <div class="highlightable">
+      {{ $page := . }}
-        <ul class="topics">
+      {{ range $key , $value := .Site.Sections }}
-          {{ $page := . }}
+      {{ if ne $key "" }}
-          {{ range $key , $value := .Site.Sections }}
+      {{ $first := (index $value 0).Page }}
-          {{ if ne $key "" }}
-          {{ $first := (index $value 0).Page }}
 
-          <li class="dd-item {{ if eq $page.RelPermalink $first.RelPermalink }}active{{ end }} {{if in $page.RelPermalink $first.RelPermalink }}parent{{ end }}" data-nav-id="{{ $first.RelPermalink }}">
+      <li class="dd-item {{ if eq $page.RelPermalink $first.RelPermalink }}active{{ end }} {{if in $page.RelPermalink $first.RelPermalink }}parent{{ end }}" data-nav-id="{{ $first.RelPermalink }}">
-            <a href="{{ $first.RelPermalink }}">
+        <a href="{{ $first.RelPermalink }}">
-              <span>
+          <span>
-                {{ if isset $first.Params "icon" }}
+            {{ if isset $first.Params "icon" }}
-                  {{ printf $first.Params.icon | safeHTML }}
+              {{ printf $first.Params.icon | safeHTML }}
-                {{ end }}
-                 {{ $first.Title }}
-               </span>
-            </a>
-            {{ if gt .Pages.Len 1}}
-            <ul>
-              {{ range $k, $p := .Pages }}
-              {{ if gt $k 0 }}
-                <li class="dd-item {{ if eq $page.RelPermalink $p.RelPermalink }}active{{ end }}" data-nav-id="{{ $p.RelPermalink }}">
-                  <a href="{{ $p.RelPermalink }}">
-                    <span>{{ $p.Title }}</span>
-                  </a>
-                </li>
-              {{ end }}
-              {{ end }}
-            </ul>
             {{ end }}
-          </li>
+             {{ $first.Title }}
+           </span>
+        </a>
+        {{ if gt .Pages.Len 1}}
+        <ul>
+          {{ range $k, $p := .Pages }}
+          {{ if gt $k 0 }}
+            <li class="dd-item {{ if eq $page.RelPermalink $p.RelPermalink }}active{{ end }}" data-nav-id="{{ $p.RelPermalink }}">
+              <a href="{{ $p.RelPermalink }}">
+                <span>{{ $p.Title }}</span>
+              </a>
+            </li>
           {{ end }}
           {{ end }}
         </ul>
-        <hr>
+        {{ end }}
-        <section id="footer">
+      </li>
-          <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fa fa-heart"></i></a> from <a href="http://getgrav.org">Grav</a> and <a href="http://gohugo.io/">Hugo</a></p>
+      {{ end }}
-        </section>
+      {{ end }}
-      </div>
+    </ul>
-    </div>
+    <hr>
+    <section id="footer">
+      <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fa fa-heart"></i></a> from <a href="http://getgrav.org">Grav</a> and <a href="http://gohugo.io/">Hugo</a></p>
+    </section>
   </div>
 </nav>

layouts/partials/script_includes.html

@@ -1,6 +1,7 @@
 <script src="/js/jquery-2.x.min.js"></script>
 <script src="/js/clipboard.min.js"></script>
-<script src="/js/jquery.scrollbar.min.js"></script>
+<script src="/js/perfect-scrollbar.min.js"></script>
+<script src="/js/perfect-scrollbar.jquery.min.js"></script>
 <script src="/js/jquery.sticky-kit.min.js"></script>
 <script src="/js/featherlight.min.js"></script>
 <script src="/js/html5shiv-printshiv.min.js"></script>

static/css/perfect-scrollbar.min.css

@@ -0,0 +1,2 @@
+/* perfect-scrollbar v0.6.10 */
+.ps-container{-ms-touch-action:none;touch-action:none;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling{pointer-events:none}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container:hover.ps-in-scrolling{pointer-events:none}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:0.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:0.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:0.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}

static/css/theme.css

@@ -501,18 +501,6 @@ hr {
   padding: 0;
   background: inherit; }
 
-.scrollbar-inner > .scroll-element .scroll-element_track {
-  background-color: rgba(255, 255, 255, 0.3); }
-
-.scrollbar-inner > .scroll-element .scroll-bar {
-  background-color: #C18580; }
-
-.scrollbar-inner > .scroll-element:hover .scroll-bar {
-  background-color: #ccc; }
-
-.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
-  background-color: #ccc; }
-
 table {
   border: 1px solid #eaeaea;
   table-layout: auto; }
@@ -714,124 +702,11 @@ td {
   margin-top: -5px;
   border-right-color: rgba(0, 0, 0, 0.8); }
 
-/*************** SCROLLBAR BASE CSS ***************/
 .highlightable {
-  padding: 25px 0 15px; }
+  padding: 25px 0 15px;
-
+  overflow: auto;
-.scroll-wrapper {
+  position: relative;
-  overflow: hidden !important;
+}
-  padding: 0 !important;
-  position: relative; }
-
-.scroll-wrapper > .scroll-content {
-  border: none !important;
-  box-sizing: content-box !important;
-  height: auto;
-  left: 0;
-  margin: 0;
-  max-height: none;
-  max-width: none !important;
-  overflow: scroll !important;
-  padding: 0;
-  position: relative !important;
-  top: 0;
-  width: auto !important; }
-
-.scroll-wrapper > .scroll-content::-webkit-scrollbar {
-  height: 0;
-  width: 0; }
-
-.scroll-element {
-  display: none; }
-
-.scroll-element, .scroll-element div {
-  box-sizing: content-box; }
-
-.scroll-element.scroll-x.scroll-scrollx_visible,
-.scroll-element.scroll-y.scroll-scrolly_visible {
-  display: block; }
-
-.scroll-element .scroll-bar,
-.scroll-element .scroll-arrow {
-  cursor: default; }
-
-.scroll-textarea > .scroll-content {
-  overflow: hidden !important; }
-
-.scroll-textarea > .scroll-content > textarea {
-  border: none !important;
-  box-sizing: border-box;
-  height: 100% !important;
-  margin: 0;
-  max-height: none !important;
-  max-width: none !important;
-  overflow: scroll !important;
-  outline: none;
-  padding: 2px;
-  position: relative !important;
-  top: 0;
-  width: 100% !important; }
-
-.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
-  height: 0;
-  width: 0; }
-
-/*************** SIMPLE INNER SCROLLBAR ***************/
-.scrollbar-inner > .scroll-element,
-.scrollbar-inner > .scroll-element div {
-  border: none;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  z-index: 10; }
-
-.scrollbar-inner > .scroll-element div {
-  display: block;
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%; }
-
-.scrollbar-inner > .scroll-element.scroll-x {
-  bottom: 2px;
-  height: 8px;
-  left: 0;
-  width: 100%; }
-
-.scrollbar-inner > .scroll-element.scroll-y {
-  height: 100%;
-  right: 2px;
-  top: 0;
-  width: 8px; }
-
-.scrollbar-inner > .scroll-element .scroll-element_outer {
-  overflow: hidden; }
-
-.scrollbar-inner > .scroll-element .scroll-element_outer,
-.scrollbar-inner > .scroll-element .scroll-element_track,
-.scrollbar-inner > .scroll-element .scroll-bar {
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px; }
-
-.scrollbar-inner > .scroll-element .scroll-element_track,
-.scrollbar-inner > .scroll-element .scroll-bar {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-  filter: alpha(opacity=30);
-  opacity: 0.3; }
-
-/* update scrollbar offset if both scrolls are visible */
-.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
-  left: -12px; }
-
-.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
-  top: -12px; }
-
-.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
-  left: -12px; }
-
-.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
-  top: -12px; }
 
 .lightbox-active #body {
   overflow: visible; }

static/js/learn.js

@@ -27,6 +27,7 @@ function getScrollBarWidth() {
 
 function setMenuHeight() {
     $('#sidebar .highlightable').height($('#sidebar').innerHeight() - $('#header-wrapper').height() - 40);
+    $('#sidebar .highlightable').perfectScrollbar('update');
 }
 
 function fallbackMessage(action) {
@@ -83,7 +84,7 @@ $(window).resize(function() {
 
 jQuery(document).ready(function() {
     var sidebarStatus = searchStatus = 'open';
-
+    $('#sidebar .highlightable').perfectScrollbar();
     // set the menu height
     setMenuHeight();
 
@@ -94,8 +95,6 @@ jQuery(document).ready(function() {
         return false;
     });
 
-    jQuery('.scrollbar-inner').scrollbar();
-
     jQuery('[data-sidebar-toggle]').on('click', function() {
         jQuery(document.body).toggleClass('sidebar-hidden');
         sidebarStatus = (jQuery(document.body).hasClass('sidebar-hidden') ? 'closed' : 'open');