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/font-awesome.min.css" rel="stylesheet">
<link href="/css/hybrid.css" rel="stylesheet"> <link href="/css/hybrid.css" rel="stylesheet">
<link href="/css/featherlight.min.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/theme.css" rel="stylesheet">
<link href="/css/hugo-theme.css" rel="stylesheet"> <link href="/css/hugo-theme.css" rel="stylesheet">
<style type="text/css">:root #header + #content > #left > #rlblock_left <style type="text/css">:root #header + #content > #left > #rlblock_left

View file

@ -10,49 +10,45 @@
</div> </div>
{{ end }} {{ end }}
</div> </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 }} {{ 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 }}
{{ end }} {{ end }}
</ul> </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> </div>
</nav> </nav>

View file

@ -1,6 +1,7 @@
<script src="/js/jquery-2.x.min.js"></script> <script src="/js/jquery-2.x.min.js"></script>
<script src="/js/clipboard.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/jquery.sticky-kit.min.js"></script>
<script src="/js/featherlight.min.js"></script> <script src="/js/featherlight.min.js"></script>
<script src="/js/html5shiv-printshiv.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; padding: 0;
background: inherit; } 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 { table {
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
table-layout: auto; } table-layout: auto; }
@ -714,124 +702,11 @@ td {
margin-top: -5px; margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8); } border-right-color: rgba(0, 0, 0, 0.8); }
/*************** SCROLLBAR BASE CSS ***************/
.highlightable { .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 { .lightbox-active #body {
overflow: visible; } overflow: visible; }

File diff suppressed because one or more lines are too long

View file

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