feat: replacing jquery.scrollbar by perfect-scrollbar

This commit is contained in:
Leclerc Gwendal 2016-03-25 11:53:03 +01:00
parent fb77b7e737
commit 6686e925c0
9 changed files with 48 additions and 186 deletions

View file

@ -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

View file

@ -13,8 +13,6 @@
</div>
<div class="scroll-wrapper scrollbar-inner" style="position: relative;">
<div class="scrollbar-inner scroll-content scroll-scrolly_visible" style="height: auto; margin-bottom: 0px; margin-right: 0px">
<div class="highlightable">
<ul class="topics">
{{ $page := . }}
@ -53,6 +51,4 @@
<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>
</div>
</div>
</nav>

View file

@ -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>

2
static/css/perfect-scrollbar.min.css vendored Normal file
View file

@ -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}

View file

@ -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; }
.scroll-wrapper {
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; }
padding: 25px 0 15px;
overflow: auto;
position: relative;
}
.lightbox-active #body {
overflow: visible; }

File diff suppressed because one or more lines are too long

View file

@ -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');

File diff suppressed because one or more lines are too long

2
static/js/perfect-scrollbar.min.js vendored Normal file

File diff suppressed because one or more lines are too long