codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-30 10:56:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved nanoscroller to bower components and related fixes.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/main.html
View file

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

3
app/styles/base.sass
View file

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

4
app/templates/play/level/hud.jade
View file

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

6
app/views/kinds/RootView.coffee
View file

@ -30,6 +30,10 @@ module.exports = class RootView extends CocoView
$el ?= @$el.find('.main-content-area')
super($el)
renderScrollbar: ->
$('.nano-pane').css('display','none')
$ -> $('.nano').nanoScroller()
afterInsert: ->
# force the browser to scroll to the hash
# 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 = hash
@buildLanguages()
renderScrollbar()
@renderScrollbar()
#@$('.antiscroll-wrap').antiscroll() # not yet, buggy
afterRender: ->

3
bower.json
View file

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

2
config.coffee
View file

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

4
vendor/scripts/jquery.nanoscroller.min.js vendored
View file

File diff suppressed because one or more lines are too long

272
vendor/styles/nanoscroller.scss vendored
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;
// }
// }