Search func, mobile layout

2025-10-29 18:00:23 +00:00 · 2015-04-22 12:40:03 +02:00
parent da4b56c926
commit 223c3566cf
8 changed files with 58 additions and 14 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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;
--- 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()
--- 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({
--- 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;
 	}