archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Use native scrollbars

Browse Source
This commit is contained in:
Pablo Vazquez
2016-11-16 17:48:35 +01:00
parent 8959fac415
commit f1661f7efb
13 changed files with 5 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/scripts/tutti/1_project-navigation.js
View File

@@ -2,20 +2,12 @@ function projectNavCollapse() {
$("#project-side-container").addClass('collapsed');
$("ul.breadcrumb.context").addClass('active');
if (typeof Ps !== 'undefined'){
Ps.destroy(document.getElementById('project_tree'));
};
};
function projectNavExpand() {
$("#project-side-container").removeClass('collapsed');
$("ul.breadcrumb.context").removeAttr('class');
if (typeof Ps !== 'undefined'){
Ps.initialize(document.getElementById('project_tree'), {suppressScrollX: true});
}
};
function projectNavCheck(){
@@ -177,7 +169,4 @@ function containerResizeY(window_height){
}
};
if (projectTree){ Ps.update(projectTree) }
};

1
src/styles/_project.sass
View File

@@ -740,6 +740,7 @@ ul.project_nav-edit-list
position: relative // for scrollbar alignment
margin-top: $project_header-height
background-color: $color-background-light
overflow-y: auto
&.edit
margin-top: 0

5
src/styles/_search.sass
View File

@@ -309,10 +309,9 @@ $search-hit-width_grid: 100px
border-left: 2px solid darken(white, 3%)
#search-hit-container
position: absolute // for custom scrollbars
position: absolute // for scrollbars
width: 100%
.ps-scrollbar-y-rail
z-index: 1
overflow-y: auto
#error_container
position: relative

1
src/styles/main.sass
View File

@@ -19,6 +19,5 @@
@import plugins/_jstree
@import plugins/_js_select2
@import plugins/js_perfectscrollbar
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */

147
src/styles/plugins/_js_perfectscrollbar.sass
View File

@@ -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)

2
src/styles/theatre.sass
View File

@@ -45,6 +45,7 @@ body.theatre .container-page
width: 100%
padding: 25px
position: relative
overflow: auto
&:hover
ul#theatre-tools
@@ -145,6 +146,7 @@ body.theatre .container-page
border-left: 2px solid $color-background-nav
transition: right 200ms ease-in-out
position: absolute
overflow-y: auto
.theatre-info-header
border-bottom: thin solid $color-background

5
src/templates/layout.jade
View File

@@ -408,7 +408,6 @@ html(lang="en")
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/perfect-scrollbar-0.6.14.min.js') }}")
script.
$(document).ready(function() {
@@ -417,10 +416,6 @@ html(lang="en")
// Resize #notifications and change overflow for scrollbars
$(window).on("resize", function() { notificationsResize(); });
// Load perfectScrollbar
Ps.initialize(document.getElementById('notifications'), {suppressScrollX: true});
{% endif %}
});

5
src/templates/nodes/custom/asset/view_theatre_embed.jade
View File

@@ -49,9 +49,6 @@ include ../_scripts
script.
$(function () {
// Load scrollbar for sidebar
Ps.initialize(document.getElementById('theatre-info'), {suppressScrollX: true});
var file_width = {{ node.file.width }};
var file_height = {{ node.file.height }};
var theatre_media = document.getElementById('theatre-media');
@@ -80,11 +77,9 @@ script.
if (started_zoomed_in) {
$theatre_media.removeClass('zoomed-in');
$theatre_media.addClass('zoomed-out');
Ps.destroy(theatre_media);
} else {
$theatre_media.addClass('zoomed-in');
$theatre_media.removeClass('zoomed-out');
Ps.initialize(theatre_media);
}
// Style toolbar button

6
src/templates/nodes/search.jade
View File

@@ -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 */
$('.search-input').hide();

5
src/templates/projects/edit.jade
View File

@@ -174,11 +174,6 @@ script(type='text/javascript', src="{{ url_for('static_pillar', filename='assets
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();
ProjectUtils.setProjectAttributes({projectId: "{{project._id}}", isProject: true, nodeId: ''});

23
src/templates/projects/view.jade
View File

@@ -244,11 +244,6 @@ script.
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 urlNodeFeature = "{{url_for('projects.add_featured_node')}}";
var urlNodeDelete = "{{url_for('projects.delete_node')}}";
@@ -564,18 +559,6 @@ script.
displayStorage(data.node.original.storage_node, data.node.original.path);
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 %}
| {% block comment_scripts %} {% endblock%}

4
src/templates/users/index.jade
View File

@@ -96,10 +96,6 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select
script(type="text/javascript").
if (typeof Ps !== 'undefined'){
Ps.initialize(document.getElementById('hits'), {suppressScrollX: true});
}
function displayUser(userId) {
var url = '/u/' + userId + '/edit?embed=1';
$.get(url, function(dataHtml){