mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-07 22:45:46 +01:00
acp - nanoscroller ftw
This commit is contained in:
psychobunny
@@ -39,6 +39,10 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.nano-content {
|
||||||
|
top: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@@ -34,6 +34,8 @@ define('forum/admin/footer', ['forum/admin/settings'], function(Settings) {
|
|||||||
$('.sidebar-nav .nav-header').on('click', function() {
|
$('.sidebar-nav .nav-header').on('click', function() {
|
||||||
$(this).parents('.sidebar-nav').toggleClass('open');
|
$(this).parents('.sidebar-nav').toggleClass('open');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.nano').nanoScroller();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupPills() {
|
function setupPills() {
|
||||||
|
|||||||
54
public/vendor/nanoscroller/nanoscroller.css
vendored
Normal file
54
public/vendor/nanoscroller/nanoscroller.css
vendored
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
/** initial setup **/
|
||||||
|
.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 : rgba(0,0,0,.25);
|
||||||
|
position : absolute;
|
||||||
|
width : 10px;
|
||||||
|
right : 0;
|
||||||
|
top : 0;
|
||||||
|
bottom : 0;
|
||||||
|
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
|
||||||
|
opacity : .01;
|
||||||
|
-webkit-transition : .2s;
|
||||||
|
-moz-transition : .2s;
|
||||||
|
-o-transition : .2s;
|
||||||
|
transition : .2s;
|
||||||
|
-moz-border-radius : 5px;
|
||||||
|
-webkit-border-radius : 5px;
|
||||||
|
border-radius : 5px;
|
||||||
|
}
|
||||||
|
.nano > .nano-pane > .nano-slider {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
position : relative;
|
||||||
|
margin : 0 1px;
|
||||||
|
-moz-border-radius : 3px;
|
||||||
|
-webkit-border-radius : 3px;
|
||||||
|
border-radius : 3px;
|
||||||
|
}
|
||||||
|
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
|
||||||
|
visibility : visible\9; /* Target only IE7 and IE8 with this hack */
|
||||||
|
opacity : 0.99;
|
||||||
|
}
|
||||||
4
public/vendor/nanoscroller/nanoscroller.min.js
vendored
Normal file
4
public/vendor/nanoscroller/nanoscroller.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="{relative_path}/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css">
|
<link rel="stylesheet" href="{relative_path}/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css">
|
||||||
<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/colorpicker/colorpicker.css">
|
<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/colorpicker/colorpicker.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/nanoscroller/nanoscroller.css">
|
||||||
<link rel="stylesheet" type="text/css" href="{relative_path}/admin.css?{cache-buster}" />
|
<link rel="stylesheet" type="text/css" href="{relative_path}/admin.css?{cache-buster}" />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -24,6 +25,7 @@
|
|||||||
<script type="text/javascript" src="{relative_path}/vendor/colorpicker/colorpicker.js"></script>
|
<script type="text/javascript" src="{relative_path}/vendor/colorpicker/colorpicker.js"></script>
|
||||||
<script type="text/javascript" src="{relative_path}/src/admin.js?{cache-buster}"></script>
|
<script type="text/javascript" src="{relative_path}/src/admin.js?{cache-buster}"></script>
|
||||||
<script type="text/javascript" src="{relative_path}/vendor/ace/ace.js"></script>
|
<script type="text/javascript" src="{relative_path}/vendor/ace/ace.js"></script>
|
||||||
|
<script type="text/javascript" src="{relative_path}/vendor/nanoscroller/nanoscroller.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
require.config({
|
require.config({
|
||||||
@@ -91,77 +93,79 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div id="main-menu">
|
<div id="main-menu" class="nano">
|
||||||
<div class="sidebar-nav">
|
<div class="nano-content">
|
||||||
<ul class="nav nav-list">
|
<div class="sidebar-nav">
|
||||||
<li class="nav-header">General</li>
|
<ul class="nav nav-list">
|
||||||
<li class="active"><a href="{relative_path}/admin/index"><i class="fa fa-fw fa-home"></i> Home</a></li>
|
<li class="nav-header">General</li>
|
||||||
<li><a href="{relative_path}/admin/languages"><i class="fa fa-fw fa-language"></i> Languages</a></li>
|
<li class="active"><a href="{relative_path}/admin/index"><i class="fa fa-fw fa-home"></i> Home</a></li>
|
||||||
<li><a href="{relative_path}/admin/settings/general"><i class="fa fa-fw fa-cogs"></i> Settings</a></li>
|
<li><a href="{relative_path}/admin/languages"><i class="fa fa-fw fa-language"></i> Languages</a></li>
|
||||||
<li><a href="{relative_path}/admin/sounds"><i class="fa fa-fw fa-volume-up"></i> Sounds</a></li>
|
<li><a href="{relative_path}/admin/settings/general"><i class="fa fa-fw fa-cogs"></i> Settings</a></li>
|
||||||
</ul>
|
<li><a href="{relative_path}/admin/sounds"><i class="fa fa-fw fa-volume-up"></i> Sounds</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Manage</li>
|
||||||
|
<li><a href="{relative_path}/admin/categories/active"><i class="fa fa-fw fa-folder"></i> Categories</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/tags"><i class="fa fa-fw fa-tags"></i> Tags</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/users/latest"><i class="fa fa-fw fa-user"></i> Users</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/groups"><i class="fa fa-fw fa-group"></i> Groups</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Appearance</li>
|
||||||
|
<li><a href="{relative_path}/admin/appearance/themes"><i class="fa fa-fw fa-th"></i> Themes</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/appearance/skins"><i class="fa fa-fw fa-th"></i> Skins</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/appearance/customise"><i class="fa fa-fw fa-th"></i> Custom HTML & CSS</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Extend</li>
|
||||||
|
<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Plugins</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/appearance/widgets"><i class="fa fa-fw fa-th"></i> Widgets</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Advanced</li>
|
||||||
|
<li><a href="{relative_path}/admin/database"><i class="fa fa-fw fa-hdd-o"></i> Database</a></li>
|
||||||
|
<li><a href="{relative_path}/admin/events"><i class="fa fa-fw fa-calendar-o"></i> Events</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Social Authentication</li>
|
||||||
|
<!-- IF !authentication.length -->
|
||||||
|
<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Install SSO Plugins</a></li>
|
||||||
|
<!-- ENDIF !authentication.length -->
|
||||||
|
<!-- BEGIN authentication -->
|
||||||
|
<li>
|
||||||
|
<a href="{relative_path}/admin{authentication.route}"><i class="fa fa-fw {authentication.icon}"></i> {authentication.name}</a>
|
||||||
|
</li>
|
||||||
|
<!-- END authentication -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Plugins</li>
|
||||||
|
<!-- BEGIN plugins -->
|
||||||
|
<li>
|
||||||
|
<a href="{relative_path}/admin{plugins.route}"><i class="fa fa-fw {plugins.icon}"></i> {plugins.name}</a>
|
||||||
|
</li>
|
||||||
|
<!-- END plugins -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- IF env -->
|
||||||
|
<div class="sidebar-nav">
|
||||||
|
<ul class="nav nav-list">
|
||||||
|
<li class="nav-header">Development</li>
|
||||||
|
<li><a href="{relative_path}/admin/logger"><i class="fa fa-fw fa-th"></i> Logger</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- ENDIF env -->
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Manage</li>
|
|
||||||
<li><a href="{relative_path}/admin/categories/active"><i class="fa fa-fw fa-folder"></i> Categories</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/tags"><i class="fa fa-fw fa-tags"></i> Tags</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/users/latest"><i class="fa fa-fw fa-user"></i> Users</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/groups"><i class="fa fa-fw fa-group"></i> Groups</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Appearance</li>
|
|
||||||
<li><a href="{relative_path}/admin/appearance/themes"><i class="fa fa-fw fa-th"></i> Themes</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/appearance/skins"><i class="fa fa-fw fa-th"></i> Skins</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/appearance/customise"><i class="fa fa-fw fa-th"></i> Custom HTML & CSS</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Extend</li>
|
|
||||||
<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Plugins</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/appearance/widgets"><i class="fa fa-fw fa-th"></i> Widgets</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Advanced</li>
|
|
||||||
<li><a href="{relative_path}/admin/database"><i class="fa fa-fw fa-hdd-o"></i> Database</a></li>
|
|
||||||
<li><a href="{relative_path}/admin/events"><i class="fa fa-fw fa-calendar-o"></i> Events</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Social Authentication</li>
|
|
||||||
<!-- IF !authentication.length -->
|
|
||||||
<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Install SSO Plugins</a></li>
|
|
||||||
<!-- ENDIF !authentication.length -->
|
|
||||||
<!-- BEGIN authentication -->
|
|
||||||
<li>
|
|
||||||
<a href="{relative_path}/admin{authentication.route}"><i class="fa fa-fw {authentication.icon}"></i> {authentication.name}</a>
|
|
||||||
</li>
|
|
||||||
<!-- END authentication -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Plugins</li>
|
|
||||||
<!-- BEGIN plugins -->
|
|
||||||
<li>
|
|
||||||
<a href="{relative_path}/admin{plugins.route}"><i class="fa fa-fw {plugins.icon}"></i> {plugins.name}</a>
|
|
||||||
</li>
|
|
||||||
<!-- END plugins -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!-- IF env -->
|
|
||||||
<div class="sidebar-nav">
|
|
||||||
<ul class="nav nav-list">
|
|
||||||
<li class="nav-header">Development</li>
|
|
||||||
<li><a href="{relative_path}/admin/logger"><i class="fa fa-fw fa-th"></i> Logger</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!-- ENDIF env -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12" id="content">
|
<div class="col-sm-12" id="content">
|
||||||
Reference in New Issue
Block a user