KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2026-02-13 04:49:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored how menu-buttons are placed in playlist

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-11-22 10:29:20 +01:00
parent d4a2798dc8
commit 181d9741e2
3 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
server/public/assets/css/style.css
View File

@@ -1822,19 +1822,19 @@ nav ul li:hover, nav ul li.active {
.list-remove{ .list-remove{
width: 70px; width: 70px;
margin-top: -19px; /*margin-top: -19px;*/
font-size: 12px; font-size: 12px;
height: 0px;
display: inline-table; display: inline-table;
float: right; float: right;
padding-left: 10px; padding-left: 10px;
height: 100%;
} }
.playlist-element .list-remove { .playlist-element .list-remove {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
margin-top: -32px; /*margin-top: -32px;*/
margin-left: 0px; margin-left: 0px;
width: 10%; width: 10%;
} }

27
server/public/assets/js/list.js
View File

@@ -104,7 +104,7 @@ var List = {
var i = List.getIndexOfSong(song_info.id); var i = List.getIndexOfSong(song_info.id);
var display = "none"; var display = "none";
if(!song_info.now_playing){ if(!song_info.now_playing){
if(i >= List.page && i < List.page + (List.can_fit)) display = "inline-block" if(i >= List.page && i < List.page + (List.can_fit)) display = "inline-flex"
var add = List.generateSong(song_info, transition, false, true, false, display, false); var add = List.generateSong(song_info, transition, false, true, false, display, false);
if(i === 0) { if(i === 0) {
$("#wrapper").prepend(add); $("#wrapper").prepend(add);
@@ -113,12 +113,12 @@ var List = {
} }
var added = $("#wrapper").children()[i]; var added = $("#wrapper").children()[i];
$(added).css("display", display); $(added).css("display", display);
if(display == "inline-block" && $("#wrapper").children().length >= List.page + List.can_fit + 1){ if(display == "inline-flex" && $("#wrapper").children().length >= List.page + List.can_fit + 1){
$($("#wrapper").children()[List.page + List.can_fit]).css("display", "none"); $($("#wrapper").children()[List.page + List.can_fit]).css("display", "none");
} else if(i < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){ } else if(i < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
$($("#wrapper").children()[List.page]).css("display", "inline-block"); $($("#wrapper").children()[List.page]).css("display", "inline-flex");
} else if($("#wrapper").children().length > List.page + List.can_fit){ } else if($("#wrapper").children().length > List.page + List.can_fit){
$($("#wrapper").children()[List.page + List.can_fit - 1]).css("display", "inline-block"); $($("#wrapper").children()[List.page + List.can_fit - 1]).css("display", "inline-flex");
} }
if(change && List.page > 0){ if(change && List.page > 0){
$($("#wrapper").children()[List.page - 1]).css("display", "none"); $($("#wrapper").children()[List.page - 1]).css("display", "none");
@@ -252,7 +252,7 @@ var List = {
if(page > List.page || page < List.page){ if(page > List.page || page < List.page){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = page; List.page = page;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block"); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-flex");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
@@ -275,7 +275,7 @@ var List = {
if(way == 1){ if(way == 1){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page + List.can_fit; List.page = List.page + List.can_fit;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block"); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-flex");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
@@ -293,7 +293,7 @@ var List = {
} else if(way == 10) { } else if(way == 10) {
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = (Math.floor(($("#wrapper").children().length - 1)/ List.can_fit) * List.can_fit); List.page = (Math.floor(($("#wrapper").children().length - 1)/ List.can_fit) * List.can_fit);
$("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block"); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-flex");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
@@ -310,7 +310,7 @@ var List = {
} else if(way==-10) { } else if(way==-10) {
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = 0; List.page = 0;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block"); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-flex");
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".prev_page_hide").css("display", "inline-flex"); $(".prev_page_hide").css("display", "inline-flex");
@@ -330,7 +330,7 @@ var List = {
$(".last_page").css("display", "inline-flex"); $(".last_page").css("display", "inline-flex");
} }
} else { } else {
$("#wrapper").children().slice(List.page - List.can_fit, List.page).css("display", "inline-block"); $("#wrapper").children().slice(List.page - List.can_fit, List.page).css("display", "inline-flex");
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page - List.can_fit < 0 ? 0 : List.page - List.can_fit; List.page = List.page - List.can_fit < 0 ? 0 : List.page - List.can_fit;
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){
@@ -409,11 +409,11 @@ var List = {
if(index < List.page && $("#wrapper").children().length - (List.page + 2) >= 0){ if(index < List.page && $("#wrapper").children().length - (List.page + 2) >= 0){
$($("#wrapper").children()[List.page]).css("height", 0); $($("#wrapper").children()[List.page]).css("height", 0);
$($("#wrapper").children()[List.page]).css("display", "inline-block"); $($("#wrapper").children()[List.page]).css("display", "inline-flex");
$($("#wrapper").children()[List.page]).css("height", List.element_height); $($("#wrapper").children()[List.page]).css("height", List.element_height);
} else if($("#wrapper").children().length > List.page + (List.can_fit)){ } else if($("#wrapper").children().length > List.page + (List.can_fit)){
$($("#wrapper").children()[List.page + (List.can_fit)]).css("height", 0); $($("#wrapper").children()[List.page + (List.can_fit)]).css("height", 0);
$($("#wrapper").children()[List.page + (List.can_fit)]).css("display", "inline-block"); $($("#wrapper").children()[List.page + (List.can_fit)]).css("display", "inline-flex");
$($("#wrapper").children()[List.page + (List.can_fit)]).css("height", List.element_height); $($("#wrapper").children()[List.page + (List.can_fit)]).css("height", List.element_height);
} }
@@ -451,9 +451,9 @@ var List = {
if(!List.empty){ if(!List.empty){
$("#"+deleted).remove(); $("#"+deleted).remove();
if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){ if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
$($("#wrapper").children()[List.page - 1]).css("display", "inline-block"); $($("#wrapper").children()[List.page - 1]).css("display", "inline-flex");
} else if($("#wrapper").children().length > List.page + List.can_fit){ } else if($("#wrapper").children().length > List.page + List.can_fit){
$($("#wrapper").children()[List.page + (List.can_fit - 1)]).css("display", "inline-block"); $($("#wrapper").children()[List.page + (List.can_fit - 1)]).css("display", "inline-flex");
} }
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
} }
@@ -882,6 +882,7 @@ var List = {
song.find(attr).attr("data-added-by", added_by); song.find(attr).attr("data-added-by", added_by);
song.find("#list-song").attr("data-video-type", "suggested"); song.find("#list-song").attr("data-video-type", "suggested");
song.find("#list-song").attr("data-video-id", video_id); song.find("#list-song").attr("data-video-id", video_id);
song.find("#list-song").css("display", "inline-flex");
song.find("#list-song").attr("id", "suggested-" + video_id); song.find("#list-song").attr("id", "suggested-" + video_id);
song.find(".list-image").attr("class", song.find(".list-image").attr("class").replace("list-image", "list-suggested-image")); song.find(".list-image").attr("class", song.find(".list-image").attr("class").replace("list-image", "list-suggested-image"));

2
server/public/assets/js/listeners.js
View File

@@ -1675,7 +1675,7 @@ $(window).resize(function(){
List.dynamicContentPage(-10); List.dynamicContentPage(-10);
} }
if(List.can_fit < temp_fit){ if(List.can_fit < temp_fit){
$($("#wrapper").children()[List.page + temp_fit - 1]).css("display", "inline-block"); $($("#wrapper").children()[List.page + temp_fit - 1]).css("display", "inline-flex");
} else if(List.can_fit > temp_fit){ } else if(List.can_fit > temp_fit){
$($("#wrapper").children()[List.page + temp_fit]).css("display", "none"); $($("#wrapper").children()[List.page + temp_fit]).css("display", "none");
} }