Made the suggested bos alot nicer

index.php

@@ -202,6 +202,10 @@
                 </div>
             </div>
             <div id="playlist" class="col s12 m3">
+              <ul class="tabs playlist-tabs 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="#suggestions">Suggested</a></li>
+              </ul>
                 <div id="wrapper">
                     <div id="preloader" class="progress channel_preloader">
                         <div class="indeterminate"></div>
@@ -226,6 +230,12 @@
                         </div>
                     </div>
                 </div>
+                <div id="suggestions">
+                        <p class="suggest-title-info">YouTube Suggests:</p>
+                        <div class="suggest_bar" id="suggest-song-html">
+                            
+                        </div>  
+                </div>
             </div>
         </div>
         <div id="playbar">

php/panel.php

@@ -155,34 +155,6 @@
     </ul>
 </li>
 
-<li class="no-padding suggestion-panel hide-on-small-only hide">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect suggested">Suggested Songs
-                <i class="mdi-av-playlist-add"></i>
-            </a>
-            <div class="collapsible-body">
-                <ul>
-                    <li class="white-bg suggestion-container">
-                        <p class="suggest-title-info">YouTube Suggests:</p>
-                        <div class="suggest_bar" id="suggest-song-html">
-                            <div class="suggest-songs">
-                                <div class="inner-suggest">
-                                <img class="suggest_thumb" src="/static/images/loading.png" alt="Thumb"/>
-                                <div class="collection-suggestion-info">
-                                <span class="suggest_title truncate"></span>
-                                <span class="duration-song truncate">10m 20s</span>
-                                </div>
-                                <span class="suggest_buttons"><button class="accept waves-effect waves-light btn light-green">Add</button><button class="decline waves-effect waves-light btn red">Delete</button></span>
-                                </div>
-                            </div>
-                        </div>
-                    </li>   
-                </ul>
-            </div>
-        </li>
-    </ul>
-</li>
 <!--
 <li class="no-padding">
     <h5 id="desc-title">List description</h5>

static/css/style.css

@@ -515,12 +515,28 @@ hide mdi-action-visibility mdi-action-visibility-off
   line-height:24px;
 }
 
+.playlist-tabs .indicator{
+  background-color:white !important;
+}
+
+.playlist-tabs .indicator, .tabs .indicator{
+  width:50%;
+}
+
+.playlist-tab-links{
+  color:white !important;
+}
+
+.playlist-tabs{
+  background-color:rgba(0,0,0,0) !important;
+}
+
 .duration-song{
   font-size:12px;
 }
 
 .suggest-title-info{
-  color: rgb(68,68,68);
+  color: white;
   padding: 10px 0 10px 10px !important;
   line-height: 34px;
   margin: 0 0 -10px 0 !important;
@@ -855,10 +871,11 @@ nav ul li:hover, nav ul li.active {
   padding-left: 10px;
 }
 
-#del{
+#del, #del_suggested{
     height: 100%;
     line-height: normal;
     padding: 2px 12px;
+    color:white;
 }
 
 .result {

static/js/admin.js

@@ -75,7 +75,7 @@ var Admin = {
     		$("#admin-lock").removeClass("mdi-action-lock");
             $("#password").val("");
             $("#password").attr("placeholder", "Change channel password")
-            $(".suggestion-panel").removeClass("hide");
+            $(".playlist-tabs").removeClass("hide");
 
             if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
     		  $("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -131,8 +131,8 @@ var Admin = {
     		$("#admin-lock").addClass("mdi-action-lock");
         }
 
-        if(!Helper.contains($(".suggestion-panel").attr("class").split(" "), "hide")){
-            $(".suggestion-panel").addClass("hide");
+        if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")){
+            $(".playlist-tabs").addClass("hide");
         }
 
     	if($(".card-action").length != 0 && 
@@ -140,6 +140,7 @@ var Admin = {
     		$(".card-action").addClass("hide");
         }
 
+        $('ul.tabs').tabs('select_tab', 'wrapper');
         $("#admin-lock").removeClass("mdi-action-lock-open clickable");
         $("#password").attr("placeholder", "Enter channel password");
     },

static/js/list.js

@@ -49,7 +49,8 @@ var List = {
 
 		$.each(full_playlist, function(j, current_song){
 			if(!current_song.now_playing){ //check that the song isnt playing
-                $("#wrapper").append(List.generateSong(current_song, false, true));
+                console.log(current_song);
+                $("#wrapper").append(List.generateSong(current_song, false, true, true));
 			}
 		});
 
@@ -186,9 +187,9 @@ var List = {
         i = List.getIndexOfSong(song_info.id);
 
         if(i === 0) 
-         	$("#wrapper").prepend(List.generateSong(song_info, transition));
+         	$("#wrapper").prepend(List.generateSong(song_info, transition, false, true));
         else
-            $("#wrapper > div:nth-child(" + (i) + ")").after(List.generateSong(song_info, transition));
+            $("#wrapper > div:nth-child(" + (i) + ")").after(List.generateSong(song_info, transition, false, true));
         
         if(transition)
         {
@@ -199,7 +200,7 @@ var List = {
         }
     },
 
-    generateSong: function(song_info, transition, lazy)
+    generateSong: function(song_info, transition, lazy, list)
     {
     	var video_id    = song_info.id;
     	var video_title = song_info.title;
@@ -208,6 +209,9 @@ var List = {
         var song        = $("<div>"+list_html+"</div>");
         var image_attr  = "style";
 
+        var attr;
+        var del_attr;
+
         if(transition) song.find("#list-song").css("height", 0);
         if(!w_p) song.find(".card-action").removeClass("hide");
         if(video_votes == 1)song.find(".vote-text").text("vote");
@@ -216,14 +220,32 @@ var List = {
             image_attr  = "data-original";
         } 
 
+        if(list){
+            song.find(".list-votes").text(video_votes);
+            song.find("#list-song").attr("id", video_id);
+
+            attr     = ".vote-container";
+            del_attr = "#del";
+        }else if(!list){
+            console.log(song_info);
+            song.find(".vote-text").text(song_info.duration);
+
+            attr     = ".add-suggested";
+            del_attr = "#del_suggested";
+
+            song.find(".vote-container").attr("class", "clickable add-suggested");
+            song.find("#del").attr("id", "del_suggested");
+            song.find(attr).attr("data-video-title", video_title);
+            song.find(attr).attr("data-video-length", song_info.length);
+            song.find("#list-song").attr("id", "suggested-" + video_id);
+        }
+
     	song.find(".list-title").text(video_title);
     	song.find(".list-title").attr("title", video_title);
-    	song.find(".list-votes").text(video_votes);
     	//song.find(".vote-container").attr("onclick", "vote('"+video_id+"','pos')");
-        song.find(".vote-container").attr("data-video-id", video_id);
+        song.find(attr).attr("data-video-id", video_id);
     	song.find(".list-image").attr(image_attr,video_thumb);
-    	song.find("#list-song").attr("id", video_id);
-        song.find("#del").attr("data-video-id", video_id);
+        song.find(del_attr).attr("data-video-id", video_id);
     	//song.find("#del").attr("onclick", "vote('"+video_id+"', 'del')");
 
     	return song.html();

static/js/listeners.js

@@ -313,18 +313,18 @@ $("#wrapper").on( "click", "#del", function(e){
 	List.vote(id, "del");
 });
 
-$(".suggestion-container").on( "click", ".accept", function(e){
+$("#suggestions").on( "click", ".add-suggested", function(e){
 	var id 		= $(this).attr("data-video-id");
 	var title 	= $(this).attr("data-video-title");
 	var length 	= $(this).attr("data-video-length");
 
 
 	Search.submit(id, title, length);
-	$(".suggest-" + id).remove();
+	$("#suggested-" + id).remove();
 });
 
-$(".suggestion-container").on( "click", ".decline", function(e){
+$("#suggestions").on( "click", "#del_suggested", function(e){
 	var id = $(this).attr("data-video-id");
 
-	$(".suggest-" + id).remove();
+	$("#suggested-" + id).remove();
 });