Use native scrollbars
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -2,20 +2,12 @@ function projectNavCollapse() {
|
|||||||
|
|
||||||
$("#project-side-container").addClass('collapsed');
|
$("#project-side-container").addClass('collapsed');
|
||||||
$("ul.breadcrumb.context").addClass('active');
|
$("ul.breadcrumb.context").addClass('active');
|
||||||
|
|
||||||
if (typeof Ps !== 'undefined'){
|
|
||||||
Ps.destroy(document.getElementById('project_tree'));
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function projectNavExpand() {
|
function projectNavExpand() {
|
||||||
|
|
||||||
$("#project-side-container").removeClass('collapsed');
|
$("#project-side-container").removeClass('collapsed');
|
||||||
$("ul.breadcrumb.context").removeAttr('class');
|
$("ul.breadcrumb.context").removeAttr('class');
|
||||||
|
|
||||||
if (typeof Ps !== 'undefined'){
|
|
||||||
Ps.initialize(document.getElementById('project_tree'), {suppressScrollX: true});
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function projectNavCheck(){
|
function projectNavCheck(){
|
||||||
@@ -177,7 +169,4 @@ function containerResizeY(window_height){
|
|||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (projectTree){ Ps.update(projectTree) }
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@@ -740,6 +740,7 @@ ul.project_nav-edit-list
|
|||||||
position: relative // for scrollbar alignment
|
position: relative // for scrollbar alignment
|
||||||
margin-top: $project_header-height
|
margin-top: $project_header-height
|
||||||
background-color: $color-background-light
|
background-color: $color-background-light
|
||||||
|
overflow-y: auto
|
||||||
|
|
||||||
&.edit
|
&.edit
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
@@ -309,10 +309,9 @@ $search-hit-width_grid: 100px
|
|||||||
border-left: 2px solid darken(white, 3%)
|
border-left: 2px solid darken(white, 3%)
|
||||||
|
|
||||||
#search-hit-container
|
#search-hit-container
|
||||||
position: absolute // for custom scrollbars
|
position: absolute // for scrollbars
|
||||||
width: 100%
|
width: 100%
|
||||||
.ps-scrollbar-y-rail
|
overflow-y: auto
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
#error_container
|
#error_container
|
||||||
position: relative
|
position: relative
|
||||||
|
@@ -19,6 +19,5 @@
|
|||||||
|
|
||||||
@import plugins/_jstree
|
@import plugins/_jstree
|
||||||
@import plugins/_js_select2
|
@import plugins/_js_select2
|
||||||
@import plugins/js_perfectscrollbar
|
|
||||||
|
|
||||||
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */
|
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */
|
||||||
|
@@ -1,147 +0,0 @@
|
|||||||
$color-scrollbars-base: lighten($color-background-nav, 25%)
|
|
||||||
|
|
||||||
.ps-container
|
|
||||||
.ps-scrollbar-y
|
|
||||||
opacity: 0
|
|
||||||
transition: opacity 150ms ease-in-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
.ps-scrollbar-y
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
|
|
||||||
/* perfect-scrollbar v0.6.3 */
|
|
||||||
.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-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 .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
|
|
||||||
/* 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: $color-scrollbars-base
|
|
||||||
-webkit-border-radius: 4px
|
|
||||||
-moz-border-radius: 4px
|
|
||||||
-ms-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
|
|
||||||
/* there must be 'bottom' for ps-scrollbar-x */
|
|
||||||
height: 5px
|
|
||||||
|
|
||||||
.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.6
|
|
||||||
-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
|
|
||||||
/* there must be 'right' for ps-scrollbar-y-rail */
|
|
||||||
width: 5px
|
|
||||||
margin:
|
|
||||||
top: 5px
|
|
||||||
bottom: 5px
|
|
||||||
|
|
||||||
#project_nav.ps-container > .ps-scrollbar-y-rail
|
|
||||||
margin-top: $project_header-height + 10
|
|
||||||
|
|
||||||
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y
|
|
||||||
position: absolute
|
|
||||||
/* please don't change 'position' */
|
|
||||||
background-color: $color-scrollbars-base
|
|
||||||
-webkit-border-radius: 4px
|
|
||||||
-moz-border-radius: 4px
|
|
||||||
-ms-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, height .2s linear
|
|
||||||
right: 0
|
|
||||||
/* there must be 'right' for ps-scrollbar-y */
|
|
||||||
width: 5px
|
|
||||||
|
|
||||||
|
|
||||||
.ps-container.ps-in-scrolling
|
|
||||||
pointer-events: none
|
|
||||||
|
|
||||||
&.ps-x
|
|
||||||
.ps-scrollbar-x-rail
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
opacity: 0.9
|
|
||||||
.ps-scrollbar-x
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
|
|
||||||
&.ps-y
|
|
||||||
.ps-scrollbar-y-rail
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
opacity: 0.9
|
|
||||||
.ps-scrollbar-y
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
|
|
||||||
|
|
||||||
.ps-container:hover
|
|
||||||
|
|
||||||
.ps-scrollbar-x-rail, .ps-scrollbar-y-rail
|
|
||||||
opacity: 0.6
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
opacity: 0.9
|
|
||||||
|
|
||||||
.ps-scrollbar-x, .ps-scrollbar-y
|
|
||||||
background-color: $color-scrollbars-base
|
|
||||||
|
|
||||||
|
|
||||||
&.ps-in-scrolling
|
|
||||||
pointer-events: none
|
|
||||||
|
|
||||||
&.ps-x
|
|
||||||
.ps-scrollbar-x-rail
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
opacity: 0.9
|
|
||||||
|
|
||||||
.ps-scrollbar-x
|
|
||||||
background-color: rgba($color-scrollbars-base, .1)
|
|
||||||
|
|
||||||
&.ps-y
|
|
||||||
.ps-scrollbar-y-rail
|
|
||||||
background-color: rgba($color-scrollbars-base, .2)
|
|
||||||
opacity: 0.9
|
|
||||||
|
|
||||||
.ps-scrollbar-y
|
|
||||||
background-color: rgba($color-scrollbars-base, .1)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@@ -45,6 +45,7 @@ body.theatre .container-page
|
|||||||
width: 100%
|
width: 100%
|
||||||
padding: 25px
|
padding: 25px
|
||||||
position: relative
|
position: relative
|
||||||
|
overflow: auto
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
ul#theatre-tools
|
ul#theatre-tools
|
||||||
@@ -145,6 +146,7 @@ body.theatre .container-page
|
|||||||
border-left: 2px solid $color-background-nav
|
border-left: 2px solid $color-background-nav
|
||||||
transition: right 200ms ease-in-out
|
transition: right 200ms ease-in-out
|
||||||
position: absolute
|
position: absolute
|
||||||
|
overflow-y: auto
|
||||||
|
|
||||||
.theatre-info-header
|
.theatre-info-header
|
||||||
border-bottom: thin solid $color-background
|
border-bottom: thin solid $color-background
|
||||||
|
@@ -408,7 +408,6 @@ html(lang="en")
|
|||||||
link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css')
|
link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css')
|
||||||
|
|
||||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}")
|
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}")
|
||||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/perfect-scrollbar-0.6.14.min.js') }}")
|
|
||||||
|
|
||||||
script.
|
script.
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
@@ -417,10 +416,6 @@ html(lang="en")
|
|||||||
|
|
||||||
// Resize #notifications and change overflow for scrollbars
|
// Resize #notifications and change overflow for scrollbars
|
||||||
$(window).on("resize", function() { notificationsResize(); });
|
$(window).on("resize", function() { notificationsResize(); });
|
||||||
|
|
||||||
// Load perfectScrollbar
|
|
||||||
Ps.initialize(document.getElementById('notifications'), {suppressScrollX: true});
|
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -49,9 +49,6 @@ include ../_scripts
|
|||||||
script.
|
script.
|
||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
// Load scrollbar for sidebar
|
|
||||||
Ps.initialize(document.getElementById('theatre-info'), {suppressScrollX: true});
|
|
||||||
|
|
||||||
var file_width = {{ node.file.width }};
|
var file_width = {{ node.file.width }};
|
||||||
var file_height = {{ node.file.height }};
|
var file_height = {{ node.file.height }};
|
||||||
var theatre_media = document.getElementById('theatre-media');
|
var theatre_media = document.getElementById('theatre-media');
|
||||||
@@ -80,11 +77,9 @@ script.
|
|||||||
if (started_zoomed_in) {
|
if (started_zoomed_in) {
|
||||||
$theatre_media.removeClass('zoomed-in');
|
$theatre_media.removeClass('zoomed-in');
|
||||||
$theatre_media.addClass('zoomed-out');
|
$theatre_media.addClass('zoomed-out');
|
||||||
Ps.destroy(theatre_media);
|
|
||||||
} else {
|
} else {
|
||||||
$theatre_media.addClass('zoomed-in');
|
$theatre_media.addClass('zoomed-in');
|
||||||
$theatre_media.removeClass('zoomed-out');
|
$theatre_media.removeClass('zoomed-out');
|
||||||
Ps.initialize(theatre_media);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Style toolbar button
|
// Style toolbar button
|
||||||
|
@@ -265,12 +265,6 @@ script(type="text/javascript").
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
/* Scrollbars */
|
|
||||||
if (typeof Ps !== 'undefined'){
|
|
||||||
Ps.initialize(searchList, {suppressScrollX: true});
|
|
||||||
Ps.initialize(document.getElementById('search-hit-container'), {suppressScrollX: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide site-wide search, kinda confusing */
|
/* Hide site-wide search, kinda confusing */
|
||||||
$('.search-input').hide();
|
$('.search-input').hide();
|
||||||
|
|
||||||
|
@@ -174,11 +174,6 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets
|
|||||||
|
|
||||||
script(type="text/javascript").
|
script(type="text/javascript").
|
||||||
|
|
||||||
/* Initialize scrollbars */
|
|
||||||
if ((typeof Ps !== 'undefined') && window.innerWidth > 768){
|
|
||||||
Ps.initialize(document.getElementById('project_tree'), {suppressScrollX: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.project-mode-edit').show();
|
$('.project-mode-edit').show();
|
||||||
|
|
||||||
ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''});
|
ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''});
|
||||||
|
@@ -244,11 +244,6 @@ script.
|
|||||||
|
|
||||||
var projectTree = document.getElementById('project_tree');
|
var projectTree = document.getElementById('project_tree');
|
||||||
|
|
||||||
/* Initialize project_tree scrollbar */
|
|
||||||
if ((typeof Ps !== 'undefined') && projectTree && window.innerWidth > 768){
|
|
||||||
Ps.initialize(projectTree, {suppressScrollX: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
var urlNodeMove = "{{url_for('projects.move_node')}}";
|
var urlNodeMove = "{{url_for('projects.move_node')}}";
|
||||||
var urlNodeFeature = "{{url_for('projects.add_featured_node')}}";
|
var urlNodeFeature = "{{url_for('projects.add_featured_node')}}";
|
||||||
var urlNodeDelete = "{{url_for('projects.delete_node')}}";
|
var urlNodeDelete = "{{url_for('projects.delete_node')}}";
|
||||||
@@ -564,18 +559,6 @@ script.
|
|||||||
displayStorage(data.node.original.storage_node, data.node.original.path);
|
displayStorage(data.node.original.storage_node, data.node.original.path);
|
||||||
jstreeAPI.toggle_node(data.node);
|
jstreeAPI.toggle_node(data.node);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Update scrollbar */
|
|
||||||
Ps.update(projectTree);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(projectTree).on("open_node.jstree", function () {
|
|
||||||
/* Update scrollbar */
|
|
||||||
Ps.update(projectTree);
|
|
||||||
});
|
|
||||||
$(projectTree).on("close_node.jstree", function () {
|
|
||||||
/* Update scrollbar */
|
|
||||||
Ps.update(projectTree);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -593,12 +576,6 @@ script.
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (projectTree){
|
|
||||||
$(projectTree).hover(function(){
|
|
||||||
Ps.update(projectTree);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
| {% endblock %}
|
| {% endblock %}
|
||||||
|
|
||||||
| {% block comment_scripts %} {% endblock%}
|
| {% block comment_scripts %} {% endblock%}
|
||||||
|
@@ -96,10 +96,6 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select
|
|||||||
|
|
||||||
script(type="text/javascript").
|
script(type="text/javascript").
|
||||||
|
|
||||||
if (typeof Ps !== 'undefined'){
|
|
||||||
Ps.initialize(document.getElementById('hits'), {suppressScrollX: true});
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayUser(userId) {
|
function displayUser(userId) {
|
||||||
var url = '/u/' + userId + '/edit?embed=1';
|
var url = '/u/' + userId + '/edit?embed=1';
|
||||||
$.get(url, function(dataHtml){
|
$.get(url, function(dataHtml){
|
||||||
|
Reference in New Issue
Block a user