Fixed some playlist elements

- Fixed issue with full song not being shown on mobile always
- Fixed issue where navigationbuttons are placed weirdly on desktop and mobile
- Fixed weird positioning issue on embedded player of songs
- Added navigationbuttons to embedded player
This commit is contained in:
Kasper Rynning-Tønnesen
2017-12-27 17:38:11 +01:00
parent 505e2ef47b
commit a0ab993ffb
4 changed files with 60 additions and 14 deletions

View File

@@ -49,6 +49,8 @@
#pageButtons{
text-align: center;
padding-top:15px;
display: flex;
justify-content: space-around;
}
#pageButtons, #pageButtons a{
@@ -365,17 +367,25 @@ html {
}
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
padding:0 10px;
float:left;
padding:0 1px;
}
.next_page_hide, .next_page, .last_page, .last_page_hide{
padding:0 10px;
float:right;
padding:0 0px;
display: flex;
}
.first_page, .first_page_hide {
padding: 0 0 0 10px;
}
.last_page, .last_page_hide {
padding: 0 10px 0 0;
}
.vote-container {
height: 100%;
width: 100%;
}
.card-duration {

View File

@@ -160,14 +160,22 @@ li.disabled span {
}
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
padding:0 10px;
padding:0 1px;
}
.next_page_hide, .next_page, .last_page, .last_page_hide{
padding:0 10px;
padding:0 0px;
display: flex;
}
.first_page, .first_page_hide {
padding: 0 0 0 10px;
}
.last_page, .last_page_hide {
padding: 0 10px 0 0;
}
.settings_embed:focus{
border:none !important;
box-shadow: none !important;
@@ -2334,10 +2342,10 @@ nav ul li:hover, nav ul li.active {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
-webkit-transition: position .5s ease-in-out;
-moz-transition: position .5s ease-in-out;
-o-transition: position .5s ease-in-out;
transition: position .5s ease-in-out;
cursor: pointer;
}

View File

@@ -71,6 +71,33 @@
</div>
</div>
</div>
<div id="pageButtons" class="hide">
<span class="first_page_hide btn-flat disabled">
<i class="material-icons">first_page</i>
</span>
<a class="first_page waves-effect waves-light btn-flat">
<i class="material-icons">first_page</i>
</a>
<span class="prev_page_hide btn-flat disabled">
<i class="material-icons">navigate_before</i> prev
</span>
<a class="prev_page waves-effect waves-light btn-flat">
<i class="material-icons">navigate_before</i> prev
</a>
<span id="pageNumber">1</span>
<a class="next_page waves-effect waves-light btn-flat">
next <i class="material-icons">navigate_next</i>
</a>
<span class="next_page_hide btn-flat disabled">
next <i class="material-icons">navigate_next</i>
</span>
<a class="last_page waves-effect waves-light btn-flat">
<i class="material-icons">last_page</i>
</a>
<span class="last_page_hide btn-flat disabled">
<i class="material-icons">last_page</i>
</span>
</div>
</div>
</div>
</body>

View File

@@ -135,6 +135,7 @@ var List = {
},
populate_list: function(msg, no_reset) {
// This math is fucked and I don't know how it works. Should be fixed sometime
if(!Helper.mobilecheck() && !embed){
List.can_fit = Math.round(($("#wrapper").height()) / 71)+1;
List.element_height = (($("#wrapper").height()) / List.can_fit)-5.3;
@@ -142,14 +143,14 @@ var List = {
List.can_fit = Math.round(($("#wrapper").height()) / 91) + 1;
List.element_height = (($("#wrapper").height()) / List.can_fit)-4;
} else {
List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / 71)+1;
List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71)+1;
List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / List.can_fit)-5;
}
if(List.element_height < 55.2){
List.can_fit = List.can_fit - 1;
List.element_height = 55.2;
List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / 71);
List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71);
List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / List.can_fit)-5;
}
if(list_html === undefined) list_html = $("#list-song-html").html();
full_playlist = msg;