mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
Static nanoscroller integration
References #1892 A static integration of https://github.com/jamesflorentino/nanoScrollerJS This is WIP with the goal of getting feedback on and deciding how we should integrate this into Ghost.
This commit is contained in:
Paul Adam Davis
parent
e72b82a7cb
commit
d687170062
4 changed files with 252 additions and 1 deletions
52
assets/sass/lib/nanoscroller.scss
Normal file
52
assets/sass/lib/nanoscroller.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.nano {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nano > .nano-content {
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.nano > .nano-content:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
.nano > .nano-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.has-scrollbar > .nano-content::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.nano > .nano-pane {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
opacity: 0;
|
||||
transition: 0.35s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nano > .nano-pane > .nano-slider {
|
||||
background: #444;
|
||||
background: rgba(0,0,0,0.35);
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.nano.nanoShowScrollBar > .nano-pane,
|
||||
.nano-pane.active,
|
||||
.nano-pane.flashed {
|
||||
opacity: 1;
|
||||
}
|
||||
.nano > .nano-pane:hover {
|
||||
width: 10px;
|
||||
background: rgba(0, 0, 0, .15);
|
||||
opacity: 1;
|
||||
transition: 0.15s;
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
@import "../../../../bower_components/normalize-scss/_normalize"; // via Bower
|
||||
@import "lib/nprogress";
|
||||
@import "lib/codemirror";
|
||||
@import "lib/nanoscroller";
|
||||
|
||||
|
||||
//
|
||||
|
|
|
|||
198
html/scrollbars.html
Normal file
198
html/scrollbars.html
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scrollbars</title>
|
||||
<link rel="stylesheet" href="../assets/css/ghost.min.css">
|
||||
</head>
|
||||
<body class="manage">
|
||||
|
||||
<div id="container">
|
||||
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
|
||||
<nav class="global-nav" role="navigation">
|
||||
<a class="nav-item ghost-logo" href="/" title="/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-ghost"></i><span>Visit blog</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-content active" href="/ghost/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-content"></i> Content
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-new" href="/ghost/editor/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-add"></i> New Post
|
||||
</div>
|
||||
</a>
|
||||
<a class=" nav-item nav-settings" href="/ghost/settings/">
|
||||
<div class="nav-label">
|
||||
<i class="icon-settings2"></i> Settings
|
||||
</div>
|
||||
</a>
|
||||
<div class="nav-item user-menu" data-href="#">
|
||||
<div class=" nav-label">
|
||||
<div class="image">
|
||||
<img src="../../../core/shared/img/user-image.png" alt="<script id='metamorph-30-start' type='text/x-placeholder'></script>
|
||||
Paul Davis
|
||||
<script id='metamorph-30-end' type='text/x-placeholder'></script>
|
||||
's profile picture">
|
||||
</div>
|
||||
<div class="name">
|
||||
aul Davis <i class="icon-chevron-down"></i>
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" ghost-popover fade-in dropdown">
|
||||
<ul class="dropdown-menu dropdown-triangle-top-right" role="menu">
|
||||
<li role="presentation"><a class=" dropdown-item user-menu-profile" href="/ghost/settings/users/paul-davis/" tabindex="-1">Your Profile</a></li>
|
||||
<li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/">Help / Support</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="presentation"><a class=" dropdown-item user-menu-signout" href="/ghost/signout/" tabindex="-1">Sign Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main id="gh-main" class="viewport" role="main">
|
||||
<aside class=" notifications top"></aside>
|
||||
<aside class=" notifications bottom"></aside>
|
||||
<section class=" content-view-container">
|
||||
<header class="page-header">
|
||||
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||||
<h2 class="page-title">Content</h2>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
<a class=" btn btn-green" href="/ghost/editor/" title="New Post"><span class="hidden">New Post</span></a>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="content-list-content">
|
||||
<div class="nano">
|
||||
<div class="nano-content">
|
||||
<ol class="posts-list">
|
||||
<li>
|
||||
<a class="permalink" href="">
|
||||
<h3 class="entry-title">Lorem Ipsum</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
<span class="draft">Draft</span>
|
||||
</span>
|
||||
</section>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</section>
|
||||
<section class="content-preview js-content-preview" style="padding: 0;">
|
||||
|
||||
<div class="nano">
|
||||
<div class="nano-content">
|
||||
|
||||
<header class="post-preview-header" style="padding: 15px 15px 0 15px;">
|
||||
<button type="button" class="btn btn-default btn-back">Back</button>
|
||||
<button type="button" class="unfeatured" title="Feature this post">
|
||||
<span class="hidden">Star</span>
|
||||
</button>
|
||||
<small>
|
||||
<span class="status">Published</span>
|
||||
<span class="normal">by</span>
|
||||
<span class="author">Test User</span>
|
||||
</small>
|
||||
<section class="post-controls">
|
||||
<a class=" btn btn-default post-edit" href="/ghost/editor/34/"> Edit</a>
|
||||
</section>
|
||||
</header>
|
||||
<section class=" content-preview-content" style="padding: 15px;">
|
||||
<div class="wrapper">
|
||||
<h1>Lorem Ipsum</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nesciunt consectetur ipsa sapiente recusandae suscipit excepturi asperiores ex dolores laborum rerum vero nam non amet corrupti dignissimos eum odit ut quae iure, ad ratione neque. Ea minima minus aspernatur ut, nulla quam accusantium laboriosam libero vel quos repellendus repellat eius!</p>
|
||||
<p>Totam excepturi necessitatibus porro aperiam commodi quaerat blanditiis numquam sint minus placeat esse quas iste nulla doloremque eum voluptate ipsa enim ab ullam laboriosam dignissimos, quo voluptates soluta laudantium vero. Fuga assumenda quidem officiis eius, unde blanditiis! Quod eum, itaque quis, ea nobis ipsa delectus, sit modi nesciunt, harum cupiditate.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam, eum, ea provident neque blanditiis omnis quae quidem iusto est pariatur odio inventore magni voluptatem aut facere sint animi nam, maxime ex perferendis reprehenderit. Assumenda ex, vitae totam quia ea obcaecati rem veniam adipisci dolores. Eaque reiciendis, numquam itaque deserunt.</p>
|
||||
<p>Nihil ut eaque sit doloribus repellendus accusantium officiis, aliquam error minima fuga, in, consequatur ipsum blanditiis facilis enim quia nostrum numquam dignissimos neque ab magni rerum amet maiores exercitationem! Omnis tenetur, molestias cumque laudantium praesentium suscipit alias maxime tempora facere cum libero tempore architecto blanditiis, ullam nihil, voluptatem voluptatum! Itaque.</p>
|
||||
<p>Dolor magnam nobis tenetur impedit fugit cum debitis voluptatem delectus quisquam itaque quis placeat, odit eligendi qui, asperiores consectetur porro maiores sequi atque dolorem. Quam unde odio, aperiam, eius expedita laudantium illo quisquam, eaque rerum quaerat blanditiis facilis delectus. Blanditiis quae illo et similique velit aut fugiat atque harum adipisci.</p>
|
||||
<p>Temporibus expedita pariatur laboriosam nesciunt dicta, in eligendi veniam corporis veritatis aliquam esse quia quaerat eius unde sequi earum explicabo doloremque. Cupiditate numquam officia distinctio iure minus, iusto error voluptatum sed, molestiae asperiores reiciendis dolorum eos unde corporis explicabo maiores recusandae atque. Consectetur culpa quo earum laboriosam ratione fugiat assumenda!</p>
|
||||
<p>Ducimus sapiente minima ipsa magni aliquid consectetur corrupti ab a quos vel. Nihil optio cum, iure iusto ut sed qui hic odit. Cupiditate quos, explicabo sunt commodi magnam nam debitis pariatur in ratione. Asperiores quaerat impedit officia iusto quae molestias, nam consectetur eum aspernatur quas. Necessitatibus quam est id hic.</p>
|
||||
<p>Repudiandae deleniti minima perspiciatis quam cupiditate placeat quibusdam aspernatur, esse, libero, eveniet, fugit eaque nesciunt voluptatum. Illum tempora modi odio officiis odit exercitationem eos quis tenetur vero inventore fugit soluta voluptatibus saepe numquam, nemo, rerum atque quo cumque asperiores cum officia nisi sint animi! Eum est sed eligendi. Iure, aspernatur.</p>
|
||||
<p>Cumque deleniti ut esse sit laudantium voluptate totam, fuga consectetur architecto ad eveniet magnam in similique hic dignissimos minus modi temporibus laboriosam sapiente ab dolorum molestias quia. Velit officiis doloremque, vel magnam pariatur possimus beatae eligendi animi molestiae? Laboriosam reprehenderit veniam id fugiat suscipit animi nemo molestias cupiditate, pariatur corporis.</p>
|
||||
<p>Iste, nobis inventore, modi, atque harum eius necessitatibus voluptates nam deserunt aspernatur maiores similique vero sapiente vel doloribus quaerat deleniti et magnam sunt quae numquam, mollitia eveniet magni. Sequi rerum sit quaerat obcaecati molestias. Dolores voluptatibus sed quam adipisci ratione, necessitatibus asperiores commodi quasi cupiditate debitis in sit aliquam ex.</p>
|
||||
<p>Eum aliquam soluta accusantium amet neque pariatur velit in quaerat esse hic nam quibusdam aspernatur quae, iusto, sapiente, at voluptas harum eos. Quas eaque pariatur beatae accusantium fugit, explicabo nulla inventore ducimus minus facilis, impedit. Sequi vel repellat modi delectus quis sit, at suscipit, impedit ipsa quibusdam itaque ullam. Qui.</p>
|
||||
<p>Illo deserunt sunt commodi. Facere nemo quam delectus quo ad molestiae qui corporis dolorem, dignissimos consectetur iste repellendus animi suscipit sunt sequi, debitis reprehenderit illum repudiandae ipsam laborum fuga, quisquam atque aut unde. Culpa accusantium molestias quidem rerum tempore illo, quam a sit fuga molestiae beatae unde asperiores, deserunt sed.</p>
|
||||
<p>Accusantium porro nisi nihil corporis, quidem quam nostrum alias debitis distinctio magnam est illo quis veritatis recusandae totam beatae praesentium rem repellat corrupti, commodi minima similique nemo. Quos natus, distinctio culpa eius fugit asperiores corrupti ipsa aperiam, voluptate provident nisi voluptatum eligendi omnis quaerat similique consequuntur ad tempora deserunt unde!</p>
|
||||
<p>Tenetur culpa, natus aliquid molestiae odit architecto, velit amet, numquam necessitatibus non aut sunt nesciunt quas, odio cum illum provident quis repudiandae ea maxime rerum quidem autem laudantium sapiente. Molestiae ullam voluptatum facere magni optio tempora quos recusandae. Autem alias corporis saepe sit beatae illo, veniam voluptatem minima, adipisci nobis!</p>
|
||||
<p>Veniam ad, accusamus hic, facilis commodi natus eum cupiditate libero ratione perspiciatis tempora consequuntur vitae dignissimos optio error voluptatum totam quis dolores molestiae, animi excepturi debitis explicabo dolor? Dolorem eveniet cum ab facere eum praesentium ipsa quam itaque. Consequuntur distinctio magnam libero eveniet eum ratione itaque. Molestiae debitis dolorum voluptatem?</p>
|
||||
<p>Perferendis ut quia iusto illo, consequatur vitae obcaecati assumenda totam in molestiae modi eos rem sunt odio soluta qui at dicta, a aut deserunt voluptates nesciunt! Alias natus et dolores veniam fuga modi quo dolorem numquam! Quisquam inventore esse facere amet qui ducimus repudiandae natus mollitia consequatur ab libero, adipisci.</p>
|
||||
<p>Perspiciatis error ad odit earum excepturi, cumque, mollitia molestias blanditiis impedit consectetur commodi autem architecto nihil, cupiditate nobis laborum vero voluptatibus. Sit repellat autem dicta, mollitia, cum aliquid minima provident, officia quidem molestias est. Esse iusto optio saepe, dolores debitis culpa dolor quis praesentium consectetur. Quae iusto, fugiat labore! Placeat?</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="../../../core/shared/lib/nanoscroller/nanoscroller.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function debounce(fn, delay) {
|
||||
var timer = null;
|
||||
return function () {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
// Duplicate the post 40 times (for brevity of HTML)
|
||||
// Not required in any way
|
||||
var list = $(".posts-list li:first");
|
||||
for (var i = 0; i < 40; i++){list.clone().appendTo('.posts-list');}
|
||||
// Duplicate the post 40 times (for brevity of HTML)
|
||||
|
||||
|
||||
|
||||
$(".nano").nanoScroller({
|
||||
iOSNativeScrolling: true
|
||||
});
|
||||
|
||||
$(".nano").on("mouseenter", function(){
|
||||
var nano = $(this);
|
||||
nano.addClass("nanoShowScrollBar");
|
||||
setTimeout(function(){
|
||||
nano.removeClass("nanoShowScrollBar");
|
||||
}, 850);
|
||||
});
|
||||
|
||||
$(".nano-content").scroll(function() {
|
||||
var nano = $(this).parent(".nano");
|
||||
nano.addClass("nanoShowScrollBar");
|
||||
clearTimeout($.data(this, 'scrollTimer'));
|
||||
$.data(this, 'scrollTimer', setTimeout(function() {
|
||||
nano.removeClass("nanoShowScrollBar");
|
||||
}, 850));
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -85,4 +85,4 @@
|
|||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
Loading…
Reference in a new issue