Moved nanoscroller to bower components and related fixes.

This commit is contained in:
Aditya Raisinghani 2014-04-08 03:04:36 +05:30
parent 17c1bb7344
commit 7cc9d22254
8 changed files with 18 additions and 286 deletions

View file

@ -72,7 +72,7 @@
<!-- end olark code --> <!-- end olark code -->
</head> </head>
<body class="clearfix"> <body class="nano clearfix">
<div id="fb-root"></div> <div id="fb-root"></div>
<!-- begin facebook code --> <!-- begin facebook code -->
@ -162,21 +162,21 @@
<!-- end filepicker.io code --> <!-- end filepicker.io code -->
<!-- being nanascroller code --> <!-- being nanascroller code -->
<script type="text/javascript"> <!--<script type="text/javascript">
function renderScrollbar(){ function renderScrollbar(){
$('.nano-pane').css('display','none'); $('.nano-pane').css('display','none');
$(function(){ $(function(){
$('body').nanoScroller(); $('.nano').nanoScroller();
}); });
}; };
// Doesn't seem to load when you open for first time. // Doesn't seem to load when you open for first time.
$(function(){ $(function(){
setTimeout(function(){ setTimeout(function(){
$('body').nanoScroller(); $('.nano').nanoScroller();
},1000); },1000);
}); });
</script> </script>-->
<!-- end nanoscroller code --> <!-- end nanoscroller code -->
</body> </body>
</html> </html>

View file

@ -5,6 +5,9 @@
html html
background-color: #2f261d background-color: #2f261d
body
position: absolute !important
// https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important // https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important
.secret .secret
display: none display: none

View file

@ -9,8 +9,8 @@
.thang-name .thang-name
.thang-actions.thang-elem .thang-actions.thang-elem
.nano-table .nano
.nano-table-content .nano-content
.action-header(data-i18n="play_level.action_timeline") Action Timeline .action-header(data-i18n="play_level.action_timeline") Action Timeline
.table-container .table-container
.progress-arrow.progress-indicator .progress-arrow.progress-indicator

View file

@ -30,6 +30,10 @@ module.exports = class RootView extends CocoView
$el ?= @$el.find('.main-content-area') $el ?= @$el.find('.main-content-area')
super($el) super($el)
renderScrollbar: ->
$('.nano-pane').css('display','none')
$ -> $('.nano').nanoScroller()
afterInsert: -> afterInsert: ->
# force the browser to scroll to the hash # force the browser to scroll to the hash
# also messes with the browser history, so perhaps come up with a better solution # also messes with the browser history, so perhaps come up with a better solution
@ -38,7 +42,7 @@ module.exports = class RootView extends CocoView
location.hash = '' location.hash = ''
location.hash = hash location.hash = hash
@buildLanguages() @buildLanguages()
renderScrollbar() @renderScrollbar()
#@$('.antiscroll-wrap').antiscroll() # not yet, buggy #@$('.antiscroll-wrap').antiscroll() # not yet, buggy
afterRender: -> afterRender: ->

View file

@ -36,7 +36,8 @@
"underscore.string": "~2.3.3", "underscore.string": "~2.3.3",
"firebase": "~1.0.2", "firebase": "~1.0.2",
"catiline": "~2.9.3", "catiline": "~2.9.3",
"d3": "~3.4.4" "d3": "~3.4.4",
"nanoscroller": "~0.8.0"
}, },
"overrides": { "overrides": {
"backbone": { "backbone": {

View file

@ -70,7 +70,7 @@ exports.config =
stylesheets: stylesheets:
defaultExtension: 'sass' defaultExtension: 'sass'
joinTo: joinTo:
'stylesheets/app.css': /^(app|vendor)/ 'stylesheets/app.css': /^(app|vendor|bower_components)/
order: order:
before: [ before: [
'app/styles/bootstrap.scss' 'app/styles/bootstrap.scss'

File diff suppressed because one or more lines are too long

View file

@ -1,272 +0,0 @@
//
// nanoScrollerJS (Sass)
// --------------------------------------------------
/** initial setup **/
$nanoClass: "nano";
$paneClass: "nano-pane";
$sliderClass: "nano-slider";
$contentClass: "nano-content";
.#{$nanoClass} {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
.#{$contentClass} {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
overflow-x: hidden;
&:focus {
outline: thin dotted;
}
&::-webkit-scrollbar {
visibility: hidden;
}
}
> .#{$paneClass} {
width: 10px;
background: rgba(0,0,0,.25);
position: absolute;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
visibility: hidden\9; // Target only IE7 and IE8 with this hack
opacity: .01;
> .#{$sliderClass} {
background: #444;
background: rgba(0,0,0,.5);
position: relative;
margin: 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
}
.has-scrollbar > .#{$contentClass}::-webkit-scrollbar {
visibility: visible;
}
.#{$paneClass} {
.#{$nanoClass}:hover > &,
&.active,
&.flashed {
visibility: visible\9; // Target only IE7 and IE8 with this hack
opacity: 0.99;
}
}
.nano-table {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
.nano-table-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
overflow-x: hidden;
&:focus {
outline: thin dotted;
}
&::-webkit-scrollbar {
visibility: hidden;
}
}
> .#{$paneClass} {
width: 10px;
background: rgba(0,0,0,.25);
position: absolute;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
visibility: hidden\9; // Target only IE7 and IE8 with this hack
opacity: .01;
> .#{$sliderClass} {
background: #444;
background: rgba(0,0,0,.5);
position: relative;
margin: 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
}
.has-scrollbar > .nano-table-content::-webkit-scrollbar {
visibility: visible;
}
.#{$paneClass} {
.nano-table:hover > &,
&.active,
&.flashed {
visibility: visible\9; // Target only IE7 and IE8 with this hack
opacity: 0.99;
}
}
body {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
.nano-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
overflow-x: hidden;
&:focus {
outline: thin dotted;
}
&::-webkit-scrollbar {
visibility: hidden;
}
}
> .#{$paneClass} {
width: 10px;
background: rgba(0,0,0,.25);
position: absolute;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
visibility: hidden\9; // Target only IE7 and IE8 with this hack
opacity: .01;
> .#{$sliderClass} {
background: #444;
background: rgba(0,0,0,.5);
position: relative;
margin: 0 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
visibility: visible;
}
.#{$paneClass} {
body:hover > &,
&.active,
&.flashed {
visibility: visible\9; // Target only IE7 and IE8 with this hack
opacity: 0.99;
}
}
// .modal-content{
// width: 100%;
// height: 100%;
// position: absolute;
// overflow: hidden;
// .modal-body {
// // position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// overflow: scroll;
// overflow-x: hidden;
// &:focus {
// outline: thin dotted;
// }
// &::-webkit-scrollbar {
// visibility: hidden;
// }
// }
// > .#{$paneClass} {
// width: 10px;
// background: rgba(255,255,255,.6);
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// -webkit-transition: .2s;
// -moz-transition: .2s;
// -o-transition: .2s;
// transition: .2s;
// -webkit-border-radius: 5px;
// -moz-border-radius: 5px;
// border-radius: 5px;
// visibility: hidden\9; // Target only IE7 and IE8 with this hack
// opacity: .01;
// > .#{$sliderClass} {
// background: #444;
// background: rgba(0,0,0,.5);
// position: relative;
// margin: 0 1px;
// -webkit-border-radius: 3px;
// -moz-border-radius: 3px;
// border-radius: 3px;
// }
// }
// }
// .has-scrollbar > .modal-body::-webkit-scrollbar {
// visibility: visible;
// }
// .#{$paneClass} {
// .modal-content:hover > &,
// &.active,
// &.flashed {
// visibility: visible\9; // Target only IE7 and IE8 with this hack
// opacity: 0.99;
// }
// }