mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
feat: replacing jquery.scrollbar by perfect-scrollbar
This commit is contained in:
Leclerc Gwendal
parent
fb77b7e737
commit
6686e925c0
9 changed files with 48 additions and 186 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,49 +10,45 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</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 := . }}
|
||||
{{ range $key , $value := .Site.Sections }}
|
||||
{{ if ne $key "" }}
|
||||
{{ $first := (index $value 0).Page }}
|
||||
<div class="highlightable">
|
||||
<ul class="topics">
|
||||
{{ $page := . }}
|
||||
{{ range $key , $value := .Site.Sections }}
|
||||
{{ 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 }}">
|
||||
<a href="{{ $first.RelPermalink }}">
|
||||
<span>
|
||||
{{ if isset $first.Params "icon" }}
|
||||
{{ 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>
|
||||
<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 }}">
|
||||
<span>
|
||||
{{ if isset $first.Params "icon" }}
|
||||
{{ printf $first.Params.icon | safeHTML }}
|
||||
{{ 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>
|
||||
<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>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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
2
static/css/perfect-scrollbar.min.css
vendored
Normal 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}
|
||||
|
|
@ -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; }
|
||||
|
|
|
|||
16
static/js/jquery.scrollbar.min.js
vendored
16
static/js/jquery.scrollbar.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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');
|
||||
|
|
|
|||
2
static/js/perfect-scrollbar.jquery.min.js
vendored
Normal file
2
static/js/perfect-scrollbar.jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
static/js/perfect-scrollbar.min.js
vendored
Normal file
2
static/js/perfect-scrollbar.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue