mirror of https://github.com/friendica/friendica
use perfect-scrollbars for nav-notifications-menu (and in vier aside)
This commit is contained in:
rabuzarus
parent
43d35315db
commit
e93156427e
|
|
@ -167,6 +167,10 @@
|
||||||
var notifications_mark = unescape($('<div>').append( $("#nav-notifications-mark-all").clone() ).html()); //outerHtml hack
|
var notifications_mark = unescape($('<div>').append( $("#nav-notifications-mark-all").clone() ).html()); //outerHtml hack
|
||||||
var notifications_empty = unescape($("#nav-notifications-menu").html());
|
var notifications_empty = unescape($("#nav-notifications-menu").html());
|
||||||
|
|
||||||
|
/* enable perfect-scrollbars for nav-notivications-menu */
|
||||||
|
$('#nav-notifications-menu').perfectScrollbar();
|
||||||
|
$('aside').perfectScrollbar();
|
||||||
|
|
||||||
/* nav update event */
|
/* nav update event */
|
||||||
$('nav').bind('nav-update', function(e,data){
|
$('nav').bind('nav-update', function(e,data){
|
||||||
var invalid = $(data).find('invalid').text();
|
var invalid = $(data).find('invalid').text();
|
||||||
|
|
@ -311,6 +315,9 @@
|
||||||
$.jGrowl(text, { sticky: false, theme: 'info', life: 5000 });
|
$.jGrowl(text, { sticky: false, theme: 'info', life: 5000 });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* update the js scrollbars */
|
||||||
|
$('#nav-notifications-menu').perfectScrollbar('update');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
NavUpdate();
|
NavUpdate();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
/* perfect-scrollbar v0.6.8 */
|
||||||
|
.ps-container {
|
||||||
|
-ms-touch-action: none;
|
||||||
|
overflow: hidden !important; }
|
||||||
|
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
|
||||||
|
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
|
||||||
|
display: block; }
|
||||||
|
.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;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-ms-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
-moz-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
-o-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
bottom: 3px;
|
||||||
|
/* there must be 'bottom' for ps-scrollbar-x-rail */
|
||||||
|
height: 8px; }
|
||||||
|
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||||
|
position: absolute;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
background-color: #aaa;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-ms-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-transition: background-color 0.2s linear;
|
||||||
|
-moz-transition: background-color 0.2s linear;
|
||||||
|
-o-transition: background-color 0.2s linear;
|
||||||
|
transition: background-color 0.2s linear;
|
||||||
|
bottom: 0;
|
||||||
|
/* there must be 'bottom' for ps-scrollbar-x */
|
||||||
|
height: 8px; }
|
||||||
|
.ps-container > .ps-scrollbar-y-rail {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-ms-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
-moz-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
-o-transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
transition: background-color 0.2s linear, opacity 0.2s linear;
|
||||||
|
right: 3px;
|
||||||
|
/* there must be 'right' for ps-scrollbar-y-rail */
|
||||||
|
width: 8px; }
|
||||||
|
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||||
|
position: absolute;
|
||||||
|
/* please don't change 'position' */
|
||||||
|
background-color: #aaa;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
-ms-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-transition: background-color 0.2s linear;
|
||||||
|
-moz-transition: background-color 0.2s linear;
|
||||||
|
-o-transition: background-color 0.2s linear;
|
||||||
|
transition: background-color 0.2s linear;
|
||||||
|
right: 0;
|
||||||
|
/* there must be 'right' for ps-scrollbar-y */
|
||||||
|
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; }
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,2 @@
|
||||||
|
/* perfect-scrollbar v0.6.8 */
|
||||||
|
.ps-container{-ms-touch-action:none;overflow:hidden !important}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.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;-ms-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color 0.2s linear,opacity 0.2s linear;-moz-transition:background-color 0.2s linear,opacity 0.2s linear;-o-transition:background-color 0.2s linear,opacity 0.2s linear;transition:background-color 0.2s linear,opacity 0.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;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color 0.2s linear;-moz-transition:background-color 0.2s linear;-o-transition:background-color 0.2s linear;transition:background-color 0.2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-webkit-transition:background-color 0.2s linear,opacity 0.2s linear;-moz-transition:background-color 0.2s linear,opacity 0.2s linear;-o-transition:background-color 0.2s linear,opacity 0.2s linear;transition:background-color 0.2s linear,opacity 0.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;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color 0.2s linear;-moz-transition:background-color 0.2s linear;-o-transition:background-color 0.2s linear;transition:background-color 0.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}
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<link rel="stylesheet" href="{{$baseurl}}/library/colorbox/colorbox.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="{{$baseurl}}/library/colorbox/colorbox.css" type="text/css" media="screen" />
|
||||||
<link rel="stylesheet" href="{{$baseurl}}/library/jgrowl/jquery.jgrowl.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="{{$baseurl}}/library/jgrowl/jquery.jgrowl.css" type="text/css" media="screen" />
|
||||||
<link rel="stylesheet" href="{{$baseurl}}/library/datetimepicker/jquery.datetimepicker.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="{{$baseurl}}/library/datetimepicker/jquery.datetimepicker.css" type="text/css" media="screen" />
|
||||||
|
<link rel="stylesheet" href="{{$baseurl}}/library/perfect-scrollbar/perfect-scrollbar.min.css" type="text/css" media="screen" />
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{$stylesheet}}" media="all" />
|
<link rel="stylesheet" type="text/css" href="{{$stylesheet}}" media="all" />
|
||||||
|
|
||||||
|
|
@ -37,6 +38,7 @@
|
||||||
<script type="text/javascript" src="{{$baseurl}}/library/jgrowl/jquery.jgrowl_minimized.js"></script>
|
<script type="text/javascript" src="{{$baseurl}}/library/jgrowl/jquery.jgrowl_minimized.js"></script>
|
||||||
<script type="text/javascript" src="{{$baseurl}}/library/datetimepicker/jquery.datetimepicker.js"></script>
|
<script type="text/javascript" src="{{$baseurl}}/library/datetimepicker/jquery.datetimepicker.js"></script>
|
||||||
<script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
|
<script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
|
||||||
|
<script type="text/javascript" src="{{$baseurl}}/library/perfect-scrollbar/perfect-scrollbar.jquery.js" ></script>
|
||||||
<script type="text/javascript" src="{{$baseurl}}/js/acl.js" ></script>
|
<script type="text/javascript" src="{{$baseurl}}/js/acl.js" ></script>
|
||||||
<script type="text/javascript" src="{{$baseurl}}/js/webtoolkit.base64.js" ></script>
|
<script type="text/javascript" src="{{$baseurl}}/js/webtoolkit.base64.js" ></script>
|
||||||
<script type="text/javascript" src="{{$baseurl}}/js/main.js" ></script>
|
<script type="text/javascript" src="{{$baseurl}}/js/main.js" ></script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue