From 94774dba54cdb79a2774b669eb3956f9c7fee048 Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Fri, 17 Apr 2015 17:14:16 +0200
Subject: [PATCH] Better voting functionality and style, some search shit, and
 some admin settings fix

---
 index.php            | 16 +++++++++++----
 php/panel.php        |  9 +++++----
 static/css/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++++
 static/js/list.js    |  3 ++-
 4 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/index.php b/index.php
index 57ffa338..80963fff 100755
--- a/index.php
+++ b/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>
diff --git a/php/panel.php b/php/panel.php
index d971089a..a16dc928 100755
--- a/php/panel.php
+++ b/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>
diff --git a/static/css/style.css b/static/css/style.css
index 81ce8b3a..9c134b1a 100755
--- a/static/css/style.css
+++ b/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;
diff --git a/static/js/list.js b/static/js/list.js
index 593b2ac2..43dacb76 100755
--- a/static/js/list.js
+++ b/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");
 			}
 		});