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

Better autocomplete for channelsearch + descriptions on frontpage

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-02-09 14:17:59 +01:00
parent f2ca6da200
commit 53b4bb81cb
7 changed files with 124 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/css/style.css
View File

@@ -594,7 +594,13 @@ display: inline-flex;
.card .card-action {
padding: 0;
background: white;
}
.description_text:first-letter{
text-transform: uppercase;
}
.card .card-action a {
padding: 0;
margin: 0;
@@ -994,6 +1000,44 @@ hide mdi-action-visibility mdi-action-visibility-off
max-height: 400px;
}
.autocomplete-content.dropdown-content{
position:absolute;
width:100% !important;
margin-left: 0px !important;
top: 57px;
}
.card-title{
text-transform: capitalize;
}
.card .card-reveal {
padding: 10px;
transition: transform .1s;
display:none;
transform: translateY(0%);
}
.room-namer.autocomplete{
margin-left:0px !important;
}
.channel-finder .input-field{
display: flex;
width: 100%;
}
.channel-finder .input-field .prefix{
color:white;
font-size:17px;
left: 30px;
top: -8px;
}
.autocomplete-content li .highlight {
color: orange;
}
#thumbnail_image{
text-align: center;
}
@@ -1829,6 +1873,10 @@ nav ul li:hover, nav ul li.active {
}
@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){
.autocomplete-content.dropdown-content{
width:95vw !important;
}
#playbar{
display:block;
position: fixed;

4
public/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
public/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
public/js/frontpage.js
View File

@@ -44,7 +44,6 @@ var Frontpage = {
populate_channels: function(lists)
{
var output = "";
var num = 0;
var pinned;
if(lists[0].pinned == 1){
@@ -72,10 +71,12 @@ var Frontpage = {
{
var id = lists[x].id;
var viewers = lists[x].viewers;
var description = lists[x].description;
var img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
if(lists[x].thumbnail){
img = "background-image:url('" + lists[x].thumbnail + "');";
}
var song_count = lists[x].count;
//$("#channels").append(channel_list);
@@ -98,6 +99,14 @@ var Frontpage = {
card.find(".chan-bg").attr("style", img);
card.find(".chan-link").attr("href", chan);
if(description != ""){
card.find(".card-title").html(chan);
card.find(".description_text").html(description);
} else {
card.find(".card-reveal").remove();
card.find(".card").removeClass("sticky-action")
}
$("#channels").append(card.html());
//$("#channels").append(card);
@@ -108,17 +117,25 @@ var Frontpage = {
var options_list = lists.slice();
options_list = options_list.sort(Frontpage.sortFunction_active);
var data = {};
//num = 0;
for(var x in options_list){
if(options_list[x].count > 5 && Math.floor((new Date).getTime()/1000) - options_list[x].accessed < 604800){
var chan = options_list[x].channel;
output+="<option value='"+chan+"'> ";
}
//if(options_list[x].count > 5 && Math.floor((new Date).getTime()/1000) - options_list[x].accessed < 604800){
/*var chan = options_list[x].channel;
output+="<option value='"+chan+"'> ";*/
data[options_list[x].channel] = null;
//}
}
var to_autocomplete = "input.desktop-search";
if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
$(to_autocomplete).autocomplete({
data: data,
limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
});
document.getElementById("preloader").style.display = "none";
document.getElementById("searches").innerHTML = output;
document.getElementById("searches_mobile").innerHTML = output;
//Materialize.fadeInImage('#channels');
$("#channels").fadeIn(800);
$("#searchFrontpage").focus();

22
public/js/listeners.js
View File

@@ -634,9 +634,9 @@ window.disable_debug = disable_debug;
$(document).keyup(function(e) {
if(event.keyCode == 27){
$("#results").html("");
if(!Helper.contains($("#search-wrapper").attr("class").split(" "), "hide"))
if($("#search-wrapper").length != 0 && !Helper.contains($("#search-wrapper").attr("class").split(" "), "hide"))
$("#search-wrapper").toggleClass("hide");
if(Helper.contains($("#song-title").attr("class").split(" "), "hide"))
if($("#song-title").length != 0 && Helper.contains($("#song-title").attr("class").split(" "), "hide"))
$("#song-title").toggleClass("hide");
if($("#search-btn i").html() == "close")
@@ -644,12 +644,28 @@ $(document).keyup(function(e) {
//$("#search-btn i").html("mdi-navigation-close");
$("#search-btn i").html("search");
}
if(!Helper.contains($(".search-container").attr("class").split(" "), "hide")){
if($(".search-container").length != 0 && !Helper.contains($(".search-container").attr("class").split(" "), "hide")){
$("#results").toggleClass("hide");
}
}
});
$(document).on("mouseenter", ".card.sticky-action", function(e){
var that = this;
$(that).find(".card-reveal").attr("style", "display: block;");
setTimeout(function(){
$(that).find(".card-reveal").attr("style", "display: block;transform: translateY(-100%);");
}, 50);
});
$(document).on("mouseleave", ".card.sticky-action", function(e){
var that = this;
$(that).find(".card-reveal").attr("style", "display: block;transform: translateY(0%);");
setTimeout(function(){
$(that).find(".card-reveal").attr("style", "display: none;");
}, 100);
});
$(document).on("click", "#offline-mode", function(e){
e.preventDefault();
if(!Crypt.get_offline()){

3
public/js/remotecontroller.js
View File

@@ -16,7 +16,7 @@ $(document).ready(function (){
$("#about").modal();
$("#contact").modal();
if(window.location.hostname == "remote.zoff.no") add = "https://zoff.no";
else add = "localhost";
socket = io.connect(add + ':8080', connection_options);
@@ -101,7 +101,6 @@ var Remotecontroller = {
},*/
stop:function(event, ui) {
socket.emit("id", {id: id, type: "volume", value: ui.value});
//console.log(ui.value);
}
});
}else

47
public/php/frontpage.php
View File

@@ -81,24 +81,25 @@ if(isset($_GET['chan'])){
<div id="mega-background"></div>
<h5>Create a radio channel, collaborate and listen</h5>
<form class="channel-finder">
<p class="prething">zoff.no/</p>
<input
class="input-field room-namer"
type="text"
id="searchFrontpage"
name="chan"
placeholder="chill"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off"
autofocus=""
list="searches"
required
pattern="[a-zA-Z0-9]+"
spellcheck="false"
maxlength="18"
/>
<datalist id="searches"></datalist>
<button class="listen-button">Listen</button>
<div class="input-field">
<p class="prefix">zoff.no/</p>
<input
class="room-namer autocomplete desktop-search"
type="text"
id="autocomplete-input"
name="chan"
placeholder="chill"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off"
autofocus="on"
list="searches"
required
pattern="[a-zA-Z0-9]+"
spellcheck="false"
maxlength="18"
/>
<button class="listen-button col s2">Listen</button>
</div>
</form>
<div class="pitch outline">
<div>Live &amp; democratic playlists with YouTube Music</div>
@@ -110,9 +111,9 @@ if(isset($_GET['chan'])){
<form class="channel-finder-mobile row" id="base">
<div class="input-field col s12">
<input
class="input-field"
class="autocomplete mobile-search"
type="text"
id="search-mobile"
id="searchFrontpage"
name="chan"
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
autocomplete="off"
@@ -139,7 +140,7 @@ if(isset($_GET['chan'])){
<div id="channel-list-container">
<ul class="row" id="channels">
<li id="chan-card" class="col s6 m4 l3">
<div class="card">
<div class="card sticky-action">
<a class="chan-link">
<div class="chan-bg card-image cardbg"></div>
<div class="card-content">
@@ -157,6 +158,10 @@ if(isset($_GET['chan'])){
<div class="card-action noselect">
<span class="chan-link waves-effect waves-orange btn-flat">Listen</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"></span>
<p class="description_text"></p>
</div>
</a>
</div>
</li>