KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search func, mobile layout

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-22 12:40:03 +02:00
parent da4b56c926
commit 223c3566cf
8 changed files with 58 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.php
View File

@@ -6,6 +6,7 @@
if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();} if($list[1]==""||!isset($list[1])||count($list)<=1){$list="";include('php/nochan.php');die();}
else $list=$list[1]; else $list=$list[1];
?> ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head> <head>
@@ -26,7 +27,7 @@
</div> </div>
<ul class="title-container hide-on-med-and-down"> <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... Loading...
</li> </li>
<li class="search-container hide" id="search-wrapper"> <li class="search-container hide" id="search-wrapper">
@@ -36,25 +37,25 @@
<ul class="right control-list"> <ul class="right control-list">
<li> <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> <i class="mdi-action-search"></i>
<span class="hover-text">Find</span> <span class="hover-text">Find</span>
</a> </a>
</li> </li>
<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> <i class="mdi-av-skip-next"></i>
<span class="hover-text">Skip</span> <span class="hover-text">Skip</span>
</a> </a>
</li> </li>
<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> <i class="mdi-av-shuffle"></i>
<span class="hover-text">Stir</span> <span class="hover-text">Stir</span>
</a> </a>
</li> </li>
<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> <i class="mdi-action-settings"></i>
<span class="hover-text">Conf</span> <span class="hover-text">Conf</span>
</a> </a>
@@ -65,6 +66,14 @@
</ul> </ul>
<div id="results"></div> <div id="results"></div>
</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> </nav>
</div> </div>
</header> </header>

4
php/footer.php
View File

@@ -32,8 +32,8 @@
</a> </a>
</p> </p>
<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" > <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://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!"> <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> </a>
</p> </p>
</li> </li>

4
php/nochan.php
View File

@@ -143,8 +143,8 @@ if(isset($_GET['chan'])){
</a> </a>
</p> </p>
<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" > <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://zoff.no/<?php echo $list; ?>&choe=UTF-8&chld=L|1" alt="QRCode for link" title="QR code for this page, for easy sharing!"> <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> </a>
</p> </p>
</li> </li>

1
php/panel.php
View File

@@ -14,6 +14,7 @@
<li class="white-bg"> <li class="white-bg">
<a class="white-bg"> <a class="white-bg">
<div class="input-field"> <div class="input-field">
<i class="mdi-action-lock"></i>
<input placeholder="Enter channel password" id="password" type="password" class="validate"> <input placeholder="Enter channel password" id="password" type="password" class="validate">
</div> </div>
</a> </a>

34
static/css/style.css
View File

@@ -71,6 +71,24 @@ overflow: hidden;
position: relative; position: relative;
font-size: 30px; font-size: 30px;
padding: 0 20px; 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{ .fullwidth{
@@ -168,6 +186,8 @@ hide mdi-action-visibility mdi-action-visibility-off
.chan-name{ .chan-name{
text-transform: capitalize; text-transform: capitalize;
display: inline-block;
width: 100%;
} }
/*#channels li{opacity: 0;}*/ /*#channels li{opacity: 0;}*/
@@ -225,11 +245,20 @@ hide mdi-action-visibility mdi-action-visibility-off
display: block; display: block;
} }
#song-title{ .song-title{
font-size: 22px; font-size: 22px;
font-weight: 300; font-weight: 300;
} }
.second-title{
width: 100%;
}
.second-title-container{
padding: 0 10%;
width: 100%;
}
#viewers{ #viewers{
width: initial; width: initial;
padding-right: 3%; padding-right: 3%;
@@ -237,6 +266,7 @@ hide mdi-action-visibility mdi-action-visibility-off
#player{ #player{
height:95%; height:95%;
height: calc(100% - 32px);
position: relative; position: relative;
} }
@@ -389,7 +419,7 @@ hide mdi-action-visibility mdi-action-visibility-off
#controls #controls
{ {
opacity:0; opacity:0;
height:5%; height:32px;
background-color:rgba(255, 255, 255, 0.1); background-color:rgba(255, 255, 255, 0.1);
width:100%; width:100%;
color:white; color:white;

2
static/js/list.js
View File

@@ -117,10 +117,12 @@ function populate_list(msg, conf_only)
function vote(id, vote){ function vote(id, vote){
socket.emit('vote', [chan, id, vote, guid, adminpass]); socket.emit('vote', [chan, id, vote, guid, adminpass]);
return true;
} }
function skip(){ function skip(){
socket.emit('skip', [chan, guid]); socket.emit('skip', [chan, guid]);
return true;
} }
function refresh_scroll() function refresh_scroll()

2
static/js/search.js
View File

@@ -125,6 +125,8 @@ function search(search_input){
if(search_input !== ""){ if(search_input !== ""){
var keyword= encodeURIComponent(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'; var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&orderby=relevance&max-results=30&v=2&alt=jsonc';
$.ajax({ $.ajax({

6
static/js/youtube.js
View File

@@ -49,7 +49,7 @@ socket.on(chan.toLowerCase()+",np", function(obj)
console.log(obj); console.log(obj);
if(obj[0].length == 0){ if(obj[0].length == 0){
console.log("Empty list"); console.log("Empty list");
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!" $('.song-title').innerHTML = "Empty channel. Add some songs!"
} }
else{ else{
console.log("gotten new song"); console.log("gotten new song");
@@ -204,10 +204,10 @@ function getTitle(titt, v)
{ {
var outPutWord = v > 1 ? "viewers" : "viewer"; var outPutWord = v > 1 ? "viewers" : "viewer";
var title= decodeURIComponent(titt); var title= decodeURIComponent(titt);
var elem = document.getElementById('song-title'); var elem = $('#song-title');
document.title = title + " • Zöff"; document.title = title + " • Zöff";
if(!window.mobilecheck()){ if(!window.mobilecheck()){
elem.innerHTML = title; elem.text = title;
document.getElementById('viewers').innerHTML = v + " " + outPutWord; document.getElementById('viewers').innerHTML = v + " " + outPutWord;
elem.title = title + " • " + v + " " + outPutWord; elem.title = title + " • " + v + " " + outPutWord;
} }