From 223c3566cf4265c8af89b2937e77f3c05ba9fbe2 Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Wed, 22 Apr 2015 12:40:03 +0200
Subject: [PATCH] Search func, mobile layout

---
 index.php            | 19 ++++++++++++++-----
 php/footer.php       |  4 ++--
 php/nochan.php       |  4 ++--
 php/panel.php        |  1 +
 static/css/style.css | 34 ++++++++++++++++++++++++++++++++--
 static/js/list.js    |  2 ++
 static/js/search.js  |  2 ++
 static/js/youtube.js |  6 +++---
 8 files changed, 58 insertions(+), 14 deletions(-)
diff --git a/index.php b/index.php
index b76ceabf..135fed1a 100755
--- a/index.php
+++ b/index.php
@@ -6,6 +6,7 @@
     if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();}
     else $list=$list[1];
 
+
 ?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
 <head>
@@ -26,7 +27,7 @@
                 </div>
                 
                 <ul class="title-container hide-on-med-and-down">
-                    <li class="col s9" id="song-title" onclick="showSearch();">
+                    <li class="song-title" id="song-title" onclick="showSearch();">
                         Loading...
                     </li>
                     <li class="search-container hide" id="search-wrapper">
@@ -36,25 +37,25 @@
 
                 <ul class="right control-list">
                     <li>
-                        <a class="nav-btn" href="#" id="search-btn" onclick="showSearch();">
+                        <a class="nav-btn" href="#find" id="search-btn" onclick="showSearch();">
                             <i class="mdi-action-search"></i>
                             <span class="hover-text">Find</span>
                         </a>
                     </li>
                     <li>
-                        <a class="nav-btn" href="#" id="skip" onclick="skip();">
+                        <a class="nav-btn" href="#skip" id="skip" onclick="skip();">
                             <i class="mdi-av-skip-next"></i>
                             <span class="hover-text">Skip</span>
                         </a>
                     </li>
                     <li>
-                        <a class="nav-btn hide-on-small-only" href="#" id="shuffle" onclick="shuffle();">
+                        <a class="nav-btn hide-on-small-only" href="#stir" id="shuffle" onclick="shuffle();">
                             <i class="mdi-av-shuffle"></i>
                             <span class="hover-text">Stir</span>
                         </a>
                     </li>
                     <li>
-                        <a class="nav-btn" href="#" data-activates="settings-bar" id="settings">
+                        <a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
                             <i class="mdi-action-settings"></i>
                             <span class="hover-text">Conf</span>
                         </a>
@@ -65,6 +66,14 @@
                 </ul>
                 <div id="results"></div>
             </div>
+            <div class="nav-wrapper hide-on-large-only">
+                <ul class="second-title-container">
+                    <li class="song-title second-title" id="second-song-title" onclick="showSearch();" title="Loading">Loading</li>
+                    <li class="search-container hide" id="search-wrapper">
+                        <input id="search" class="search_input" type="search" required="" title="Search for songs..." spellcheck="false" placeholder="Find song on youtube" onsubmit="null;" autocomplete="off">
+                    </li>
+                </ul>
+            </div>
         </nav>
       </div>
     </header>
diff --git a/php/footer.php b/php/footer.php
index 2e6dda54..d785fa97 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -32,8 +32,8 @@
                             </a>
                         </p>
                         <p>
-                            <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" >
-                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
+                            <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L|1" >
+                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
                             </a>
                         </p>
                     </li>
diff --git a/php/nochan.php b/php/nochan.php
index e4e69a76..69612558 100755
--- a/php/nochan.php
+++ b/php/nochan.php
@@ -143,8 +143,8 @@ if(isset($_GET['chan'])){
                                 </a>
                             </p>
                             <p>
-                            <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" >
-                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
+                            <a href="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L|1" >
+                                <img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=http://<?php echo $_SERVER['HTTP_HOST'].'/'.$list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!">
                             </a>
                             </p>
                         </li>
diff --git a/php/panel.php b/php/panel.php
index a16dc928..9751dafb 100755
--- a/php/panel.php
+++ b/php/panel.php
@@ -14,6 +14,7 @@
                       <li class="white-bg">
                           <a class="white-bg">
                               <div class="input-field">
+                                <i class="mdi-action-lock"></i>
                                   <input placeholder="Enter channel password" id="password" type="password" class="validate">
                               </div>
                           </a>
diff --git a/static/css/style.css b/static/css/style.css
index 5cbcf378..37ef6e56 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -71,6 +71,24 @@ overflow: hidden;
 position: relative;
 font-size: 30px;
 padding: 0 20px;
+left: initial;
+display: inline;
+}
+
+@media only screen and (min-width: 992px) {
+    nav .zbrand {
+        display: inline-block;
+    } 
+}
+
+.navbar-fixed {
+    height: 128px;
+}
+
+@media only screen and (min-width: 992px){
+    .navbar-fixed {
+        height: 64px;
+    }
 }
 
 .fullwidth{
@@ -168,6 +186,8 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 .chan-name{
     text-transform: capitalize;
+    display: inline-block;
+    width: 100%;
 }
 
 /*#channels li{opacity: 0;}*/
@@ -225,11 +245,20 @@ hide mdi-action-visibility mdi-action-visibility-off
     display: block;
 }
 
-#song-title{
+.song-title{
     font-size: 22px;
     font-weight: 300;
 }
 
+.second-title{
+    width: 100%;
+}
+
+.second-title-container{
+    padding: 0 10%;
+    width: 100%;
+}
+
 #viewers{
     width: initial;
     padding-right: 3%;
@@ -237,6 +266,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 #player{
   height:95%;
+  height: calc(100% - 32px);
   position: relative;
 }
 
@@ -389,7 +419,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 #controls
 {
     opacity:0;
-    height:5%;
+    height:32px;
     background-color:rgba(255, 255, 255, 0.1);
     width:100%;
   color:white;
diff --git a/static/js/list.js b/static/js/list.js
index df0ada3a..9844b912 100755
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -117,10 +117,12 @@ function populate_list(msg, conf_only)
 
 function vote(id, vote){
 	socket.emit('vote', [chan, id, vote, guid, adminpass]);
+	return true;
 }
 
 function skip(){
 	socket.emit('skip', [chan, guid]);
+	return true;
 }
 
 function refresh_scroll()
diff --git a/static/js/search.js b/static/js/search.js
index e5830225..d9d758d6 100755
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -125,6 +125,8 @@ function search(search_input){
 		if(search_input !== ""){
 			var keyword= encodeURIComponent(search_input);
 
+			//response= http://nixo.no/txt/?4574f9b9dd286e0d#X+kzTvyFv5IrdkGQtqmoquhekDRCPJX9N24PSn86CFE=
+			//var yt_url = "https://www.googleapis.com/youtube/v3/search?videoEmbeddable=true&part=snippet&q=thefatrat&fields=items(id%2Csnippet)&type=video&videoDuration=medium&videoCategoryId=15&key=AIzaSyC3hq93zqwdwcjO8HyD9oToLLFotoAjyWo";
 			var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=30&v=2&alt=jsonc';
 
 			$.ajax({
diff --git a/static/js/youtube.js b/static/js/youtube.js
index 37ac5d59..a85ba9d5 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -49,7 +49,7 @@ socket.on(chan.toLowerCase()+",np", function(obj)
 	console.log(obj);
 	if(obj[0].length == 0){
 		console.log("Empty list");
-		document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!"
+		$('.song-title').innerHTML = "Empty channel. Add some songs!"
 	}
 	else{
 		console.log("gotten new song");
@@ -204,10 +204,10 @@ function getTitle(titt, v)
 {
 	var outPutWord = v > 1 ? "viewers" : "viewer";
 	var title= decodeURIComponent(titt);
-	var elem = document.getElementById('song-title');
+	var elem = $('#song-title');
 	document.title = title + " • Zöff";
 	if(!window.mobilecheck()){
-		elem.innerHTML = title;
+		elem.text = title;
 		document.getElementById('viewers').innerHTML = v + " " + outPutWord;
 		elem.title = title + " • " + v + " " + outPutWord;
 	}
