Better voting functionality and style, some search shit, and some admin settings fix

index.php

@@ -26,6 +26,12 @@
                     <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
                 </div>
                 <ul class="right">
+                    <li>
+                        <a class="nav-btn" href="#" id="search-btn" onclick="">
+                            <i class="mdi-action-search"></i>
+                            <span class="hover-text">Find</span>
+                        </a>
+                    </li>
                     <li>
                         <a class="nav-btn" href="#" id="skip" onclick="skip();">
                             <i class="mdi-av-skip-next"></i>
@@ -86,14 +92,16 @@
             <div id="playlist" class="col s12 m3">
                 <div id="wrapper">
                     <div id="list-song-html">
-                        <div id="list-song" class="card list-song">
-                            <a class="clickable votebg" title="Vote!">
+                        <div id="list-song" class="card left-align clickable list-song" title="Vote!">
+                            <a class="clickable center-align votebg">
                                 <span class="card-image cardbg list-image"></span>
                             </a>
                             <span class="card-content">
                                 <span class="flow-text truncate list-title"></span>
-                                <span class="highlighted">Votes:&nbsp;</span>
-                                <span class="list-votes"></span>
+                                <span class="vote-span">
+                                    <span class="list-votes"></span>
+                                    <span class="highlighted vote-text">&nbsp;votes</span>
+                                </span>
                             </span>
                             <div class="card-action hide">
                                 <a id="del" onclick="vote('id','del')" class="waves-effect btn-flat clickable">Remove</a>

php/panel.php

@@ -1,11 +1,12 @@
 <li class="no-padding">
     <ul class="collapsible collapsible-accordion">
-        <li><a class="nav-btn close-settings" title="Close" href="#" onclick="hide_settings()" style="float:right;">
-            <i class="mdi-navigation-close center-align"></i>
-        </a>
-            <a class="col s9 collapsible-header bold waves-effect active">
+        <li>
+            <a class="col s9 collapsible-header bold waves-effect admin-settings active">
                 Channel Settings
                 <i class="mdi-image-tune"></i>
+                <div class="nav-btn close-settings clickable" title="Close" href="#" onclick="hide_settings()">
+                    <i class="mdi-navigation-close auto-margin"></i>
+                </div>
             </a>
             <div class="collapsible-body">
                 <ul>

static/css/style.css

@@ -79,6 +79,12 @@ nav .zbrand{
     opacity: 0;
 }
 
+.auto-margin{
+    margin-left: auto !important;
+    margin-right: auto !important;
+    float: center !important;
+}
+
 .clickable, .modal-trigger{cursor:pointer;}
 
 .cardbg{
@@ -196,6 +202,32 @@ hide mdi-action-visibility mdi-action-visibility-off
     float: left;
 }
 
+.list-image:after {
+    font-family: "Material-Design-Icons";
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    content: "\e800";
+    color:white;
+    font-size:44px;
+    position:absolute;
+    width:100%; height:100%;
+    top:0; left:0;
+    background:rgba(0,0,0,0.8);
+    opacity:0;
+    transition: all 0.3s;
+}
+.list-song:hover .list-image:after {
+    opacity:1;
+}
+
+.vote-span{
+    padding: 0 0 0 10px;
+}
 
 .list-song{
     background-color: rgba(255, 255, 255, 0.04);
@@ -208,6 +240,7 @@ hide mdi-action-visibility mdi-action-visibility-off
     color:white;font-size:1em;
     text-align:left;
     padding: 0 10px 0 10px;
+    line-height: 2.6rem;
 }
 .card-image{cursor:pointer}
 .card{margin:5px 0 5px 0 !important;}
@@ -217,6 +250,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 .result:hover {
   background-color: rgba(0,0,0,0.4);
  }
+
 .result {
   border-bottom: solid 1px #E5E5E5;
   text-align: left;
@@ -231,6 +265,18 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 #settings-button{color:white !important;}
 
+.admin-settings{
+    padding-right: 0 !important;
+    margin-right: 0 !important;
+}
+
+.close-settings{
+    float: right;
+    width: 73px;
+    text-align: center;
+    display: inline;
+}
+
 .setting-text {
     font-size: 13px !important;
     padding: 0 !important;

static/js/list.js

@@ -67,11 +67,12 @@ function populate_list(msg, conf_only)
 				song.find(".list-title").text(video_title);
 				song.find(".list-title").attr("title", video_title);
 				song.find(".list-votes").text(video_votes);
-				song.find(".votebg").attr("onclick", "vote('"+video_id+"','pos')");
+				song.find(".list-song").attr("onclick", "vote('"+video_id+"','pos')");
 				song.find(".list-image").attr("style",video_thumb);
 				song.attr("id",video_id);
 				song.find("#del").attr("onclick", "vote('"+video_id+"', 'del')");
 				if(!w_p) $(".card-action").removeClass("hide");
+				if(video_votes==1)song.find(".vote-text").text("vote");
 			}
 		});