Fixed positions of the scrollbuttons

This commit is contained in:
Kasper Rynning-Tønnesen
2016-02-12 18:21:33 +01:00
parent 65d637015f
commit 982586dadb
4 changed files with 17 additions and 6 deletions

View File

@@ -229,8 +229,8 @@
</div> </div>
</div> </div>
<div id="playlist" class="col s12 m3"> <div id="playlist" class="col s12 m3">
<div id="top-button" title="Scroll to the top" class="hide hide-on-small-only">Top</div> <div id="top-button" title="Scroll to the top" class="rounded-bottom hide hide-on-small-only">Top</div>
<div id="bottom-button" title="Scroll to the bottom" class="hide hide-on-small-only">Bottom</div> <div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
<ul class="tabs playlist-tabs hide-on-small-only hide"> <ul class="tabs playlist-tabs hide-on-small-only hide">
<li class="tab col s3"><a class="playlist-tab-links" href="#wrapper">Playlist</a></li> <li class="tab col s3"><a class="playlist-tab-links" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li> <li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>

View File

@@ -1113,6 +1113,16 @@ nav ul li:hover, nav ul li.active {
width:15px; width:15px;
} }
.rounded-bottom{
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.rounded-top{
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#top-button, #bottom-button{ #top-button, #bottom-button{
color: white; color: white;
position: absolute; position: absolute;
@@ -1130,7 +1140,7 @@ nav ul li:hover, nav ul li.active {
} }
.top-button-with-tabs{ .top-button-with-tabs{
top:53px !important; top:48px !important;
} }
#bottom-button{ #bottom-button{

File diff suppressed because one or more lines are too long

View File

@@ -398,7 +398,8 @@ $(document).on("click", ".brand-logo-navigate", function(e){
$(document).on("mousemove", "#playlist", function(e) $(document).on("mousemove", "#playlist", function(e)
{ {
var y = e.pageY - this.offsetTop; var y = e.pageY - this.offsetTop;
if(y <= 27){ console.log(y);
if((y <= 27 && adminpass == "") || (y <= 80 && y >= 48 && adminpass != "")){
$("#top-button").removeClass("hide"); $("#top-button").removeClass("hide");
Helper.addClass("#bottom-button", "hide"); Helper.addClass("#bottom-button", "hide");
}else if(y >= $("#playlist").height() - 18){ }else if(y >= $("#playlist").height() - 18){