added nice buttton

This commit is contained in:
Nixo
2014-11-03 00:24:12 +01:00
parent e7ca421c3d
commit 99e391b520
2 changed files with 22 additions and 10 deletions

View File

@@ -63,10 +63,14 @@ function search(search_input){
var views=data.viewCount; var views=data.viewCount;
var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg"; var video_thumb = "http://i.ytimg.com/vi/"+data.id+"/default.jpg";
var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60); var length = Math.floor(data.duration/60)+":"+(data.duration-Math.floor(data.duration / 60)*60);
var finalhtml="<div id='result' class='result' onclick=\"submit('"+data.id+"','"+video_title+"');\">"+ var finalhtml="\
"<img src='"+video_thumb+"' class='thumb'>"+ <div id='result' class='result' onclick=\"submitAndClose('"+data.id+"','"+video_title+"');\">\
"<div id='title'>"+data.title+""+ <img src='"+video_thumb+"' class='thumb'>\
"<div class='result_info'>"+views+" views • "+length+"</div></div></div>"; <div id='title'>"+data.title+"\
<div class='result_info'>"+views+" views • "+length+"</div>\
<input id='add' title='Add several songs' type='button' class='button' value='+' onclick=\"submit('"+data.id+"','"+video_title+"');\">\
</div>\
</div>";
//+data.uploader+" • "+ //+data.uploader+" • "+
$("#results").append(finalhtml); $("#results").append(finalhtml);
} }
@@ -80,7 +84,15 @@ function search(search_input){
} }
function submitAndClose(id,title){
submit(id,title);
$("#results").html('');
console.log("sub&closed");
}
function submit(id,title){ function submit(id,title){
console.log($.ajax({ console.log($.ajax({
type: "GET", type: "GET",
url: "php/change.php", url: "php/change.php",
@@ -90,17 +102,14 @@ function submit(id,title){
console.log("added "+id); console.log("added "+id);
document.getElementById("search").value = ""; document.getElementById("search").value = "";
$("#search").addClass("success"); $("#search").addClass("success");
$("#results").html('');
//updateList();
}, },
error: function(){ error: function(){
console.log("error in adding"); console.log("error in adding");
document.getElementById("search").value = ""; document.getElementById("search").value = "";
$("#search").addClass("error"); $("#search").addClass("error");
$("#results").html('');
} }
}).responseText); }).responseText);
$("#search").focus(); $("#search").focus();
setTimeout(function(){ setTimeout(function(){
@@ -108,6 +117,7 @@ function submit(id,title){
$("#search").removeClass("error"); $("#search").removeClass("error");
},1500); },1500);
updateList(); updateList();
event.stopPropagation();
} }
// if(reply=="added"){$("#search").removeClass('success'); $("#search").addClass('success');} // if(reply=="added"){$("#search").removeClass('success'); $("#search").addClass('success');}

View File

@@ -47,7 +47,7 @@ body{background:#000; margin:0; }
.result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;} .result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;}
.result:hover, .result:hover #title, .result:hover .result_info {color:white !important;} .result:hover, .result:hover #title, .result:hover .result_info {color:white !important;}
.result:hover{background-color: rgba(0, 0, 0, 0.4);} .result:hover{background-color: rgba(0, 0, 0, 0.4);}
#title{ padding-left: 9%; padding-top: 16px; max-width: 76%; color: #000000; height: 36px;} #title{ padding-left: 9%; padding-top: 16px; color: #000000; height: 36px;}
.result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;} .result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;}
.thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;} .thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;}
@@ -60,8 +60,10 @@ body{background:#000; margin:0; }
.votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;} .votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;}
#plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; } #plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{color:#000;} #plus:hover,#minus:hover{color:#000;}
#del{float: right; font-weight: bold; margin-right: 20px; margin-top:0px; border-radius: 2px; } #del,#add{float: right; font-weight: bold; margin-right: 20px; margin-top:0px; border-radius: 2px; }
#del:hover{color:red;} #del:hover{color:red;}
#add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
#add:hover{color:red;}
#player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} #player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
#playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}