glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixed custom scroll bars on maps pages

Browse source
This commit is contained in:
Connor Turland 2014-02-24 12:29:54 -08:00
parent eb940a1f7b
commit 000089730c
7 changed files with 327 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/scroll/jquery.mCustomScrollbar.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
app/assets/javascripts/scroll/jquery.mousewheel.min.js vendored
View file

@ -9,4 +9,4 @@
* *
* Requires: 1.2.2+ * Requires: 1.2.2+
*/ */
(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery) (function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);

4
app/assets/stylesheets/application.css
View file

@ -1291,9 +1291,8 @@ left: 13px;
#cards { #cards {
height:100%; height:100%;
width:800px; width:820px;
margin:0 auto; margin:0 auto;
overflow-y:scroll;
} }
#cards p.empty { #cards p.empty {
@ -1896,6 +1895,7 @@ font-family:arial;
width: auto; width: auto;
padding: 0 30px; padding: 0 30px;
cursor:pointer; cursor:pointer;
font-weight:normal;
} }
.onConsole .new_map button:hover, .onConsole .new_map input.add:hover { .onConsole .new_map button:hover, .onConsole .new_map input.add:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;

3
app/assets/stylesheets/base.css
View file

@ -409,8 +409,7 @@ font-family: 'LatoLight';
/* Map Cards */ /* Map Cards */
.map { .map {
float:left; display:inline-block;
display:block;
width:226px; width:226px;
height:320px; height:320px;
color:#FFF; color:#FFF;

349
app/assets/stylesheets/jquery.mCustomScrollbar.css
View file

@ -2,26 +2,32 @@
/* vertical scrollbar */ /* vertical scrollbar */
.mCSB_container{ .mCSB_container{
width:auto; width:auto;
margin-right:15px; margin-right:30px;
overflow:hidden; overflow:hidden;
} }
.mCSB_container.mCS_no_scrollbar{ .mCSB_container.mCS_no_scrollbar{
margin-right:0; margin-right:0;
} }
.mCustomScrollBox .mCSB_scrollTools{ .mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
margin-right:30px;
}
.mCustomScrollBox>.mCSB_scrollTools{
width:16px; width:16px;
height:100%; height:100%;
top:0; top:0;
right:0; right:0;
} }
.mCSB_scrollTools .mCSB_draggerContainer{ .mCSB_scrollTools .mCSB_draggerContainer{
height:100%; position:absolute;
-webkit-box-sizing:border-box; top:0;
-moz-box-sizing:border-box; left:0;
box-sizing:border-box; bottom:0;
right:0;
height:auto;
} }
.mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer{ .mCSB_scrollTools a+.mCSB_draggerContainer{
padding-bottom:40px; margin:20px 0;
} }
.mCSB_scrollTools .mCSB_draggerRail{ .mCSB_scrollTools .mCSB_draggerRail{
width:2px; width:2px;
@ -47,26 +53,33 @@
} }
.mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{ .mCSB_scrollTools .mCSB_buttonDown{
display:block;
position:relative;
height:20px; height:20px;
overflow:hidden; overflow:hidden;
margin:0 auto; margin:0 auto;
cursor:pointer; cursor:pointer;
} }
.mCSB_scrollTools .mCSB_buttonDown{ .mCSB_scrollTools .mCSB_buttonDown{
bottom:0; top:100%;
margin-top:-40px; margin-top:-40px;
} }
/* horizontal scrollbar */ /* horizontal scrollbar */
.mCSB_horizontal .mCSB_container{ .mCSB_horizontal>.mCSB_container{
height:auto; height:auto;
margin-right:0; margin-right:0;
margin-bottom:30px; margin-bottom:30px;
overflow:hidden; overflow:hidden;
} }
.mCSB_horizontal .mCSB_container.mCS_no_scrollbar{ .mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-bottom:0; margin-bottom:0;
} }
.mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools{ .mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
margin-right:0;
margin-bottom:30px;
}
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
width:100%; width:100%;
height:16px; height:16px;
top:auto; top:auto;
@ -75,19 +88,10 @@
left:0; left:0;
overflow:hidden; overflow:hidden;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer{ .mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
height:100%; margin:0 20px;
width:auto;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer{ .mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
padding-bottom:0;
padding-right:20px;
}
.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail{
width:100%; width:100%;
height:2px; height:2px;
margin:7px 0; margin:7px 0;
@ -95,11 +99,11 @@
-moz-border-radius:10px; -moz-border-radius:10px;
border-radius:10px; border-radius:10px;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger{ .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
width:30px; width:30px;
height:100%; height:100%;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%; width:100%;
height:4px; height:4px;
margin:6px auto; margin:6px auto;
@ -107,8 +111,10 @@
-moz-border-radius:10px; -moz-border-radius:10px;
border-radius:10px; border-radius:10px;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
display:block;
position:relative;
width:20px; width:20px;
height:100%; height:100%;
overflow:hidden; overflow:hidden;
@ -116,20 +122,22 @@
cursor:pointer; cursor:pointer;
float:left; float:left;
} }
.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
right:0;
bottom:auto;
margin-left:-40px; margin-left:-40px;
margin-top:-16px;
float:right; float:right;
} }
.mCustomScrollBox{
/* default scrollbar colors and backgrounds */ -ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
.mCustomScrollBox .mCSB_scrollTools{
opacity:0.75;
} }
.mCustomScrollBox:hover .mCSB_scrollTools{
/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox>.mCSB_scrollTools{
opacity:0.75;
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
}
.mCustomScrollBox:hover>.mCSB_scrollTools{
opacity:1; opacity:1;
filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
} }
.mCSB_scrollTools .mCSB_draggerRail{ .mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */ background:#000; /* rgba fallback */
@ -197,3 +205,270 @@
opacity:0.9; opacity:0.9;
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
} }
/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}
/*light-2*/
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-32px 0;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-32px -20px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-40px -40px;
}
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-40px -56px;
}
/*dark-2*/
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:4px;
margin:6px auto;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-112px 0;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-112px -20px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-120px -40px;
}
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-120px -56px;
}
/*light-thick*/
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(255,255,255,0.85);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(255,255,255,0.9);
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-16px 0;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-16px -20px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-20px -40px;
}
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-20px -56px;
}
/*dark-thick*/
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
width:4px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.1);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:6px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
height:4px;
margin:6px 0;
}
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:6px;
margin:5px auto;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-96px 0;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-96px -20px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-100px -40px;
}
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-100px -56px;
}
/*light-thin*/
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#fff; /* rgba fallback */
background:rgba(255,255,255,0.1);
}
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
/*dark-thin*/
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.15);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:2px;
background:#000; /* rgba fallback */
background:rgba(0,0,0,0.75);
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
width:100%;
}
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:100%;
height:2px;
margin:7px auto;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
background:rgba(0,0,0,0.85);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:rgba(0,0,0,0.9);
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
background-position:-80px 0;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
background-position:-80px -20px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
background-position:-80px -40px;
}
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
background-position:-80px -56px;
}

1
app/assets/stylesheets/maps.css.scss
View file

@ -6,7 +6,6 @@
.mapOrder { .mapOrder {
display: block; display: block;
background: #0F1519;
padding:5px 15px; padding:5px 15px;
margin:5px auto 0; margin:5px auto 0;
font-weight: bold; font-weight: bold;

6
app/views/maps/index.html.erb
View file

@ -31,12 +31,14 @@
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
<div class="mapsWrapper">
<div class="maps" id="cards"> <div class="maps" id="cards">
<% @maps.each do |map| %> <% @maps.each do |map| %>
<%= render map %> <%= render map %>
<% end %> <% end %>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
</div>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
@ -58,6 +60,8 @@ $(document).ready(function() {
s.height( s.height() ).mCustomScrollbar('update'); s.height( s.height() ).mCustomScrollbar('update');
}); });
$('.maps').height( (parseInt($('body').height()) - 54) ); $('.mapsWrapper').height( (parseInt($('body').height()) - 39) );
var s = $('.maps');
s.height( s.height() ).mCustomScrollbar();
}); });
</script> </script>