More similar header on mobile

This commit is contained in:
Kasper Rynning-Tønnesen
2017-02-01 23:21:10 +01:00
parent 3b3a984689
commit 9a52e5f7dd
9 changed files with 143 additions and 55 deletions

View File

@@ -124,7 +124,7 @@ var List = {
}
});
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none");
$(".first_page").css("display", "none");
$(".next_page_hide").css("display","none");
@@ -136,7 +136,7 @@ var List = {
$(".last_page").removeClass("hide");
}*/
} else if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none");
$(".next_page").css("display", "none");
$(".last_page").css("display", "none");
@@ -160,7 +160,7 @@ var List = {
List.empty = true;
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
}
$(".prev_page").css("display", "none");
$(".next_page").css("display", "none");

View File

@@ -183,13 +183,7 @@ function init(){
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
Crypt.set_width($(this).width());
if($(window).width() > 769){
var test_against_width = $(window).width() - $(".control-list").width() - $(".zbrand").outerWidth() - $(".brand-logo-navigate").outerWidth() - 66;
title_width = test_against_width;
$(".title-container").width(title_width);
} else {
$(".title-container").width("100%");
}
set_title_width();
},
handles: "e",
minWidth: 350,
@@ -244,6 +238,7 @@ function init(){
if(Helper.mobilecheck()) Mobile_remote.initiate_volume();
setup_admin_listener();
setup_list_listener();
setup_chat_listener();
@@ -278,8 +273,6 @@ function init(){
$(".castButton-unactive").css("display", "none");
}
console.log(chromecastReady);
if(chromecastAvailable){
hide_native(1);
} else if(chromecastReady) {
@@ -296,6 +289,8 @@ function init(){
}
}
}
if(!Helper.mobilecheck()) set_title_width();
}
initializeCastApi = function() {
@@ -533,6 +528,20 @@ function embed_code(autoplay, width, height, color){
return '<embed src="https://zoff.no/_embed#' + chan.toLowerCase() + '&' + color + autoplay + '" width="' + width + 'px" height="' + height + 'px">';
}
function set_title_width(start){
if($(window).width() > 760){
var add_width = $(".brand-logo").outerWidth()
if(start){
add_width = $(window).width()*0.15;
}
var test_against_width = $(window).width() - $(".control-list").width() - add_width - 66;
title_width = test_against_width;
$(".title-container").width(title_width);
} else {
$(".title-container").width("100%");
}
}
function randomString(length){
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
@@ -1115,13 +1124,7 @@ $(window).resize(function(){
List.element_height = (($("#wrapper").height()) / List.can_fit)-6;
$(".list-song").css("height", List.element_height + "px");
$("#player_overlay").width($("#player").width()+1);
if($(window).width() > 769){
var test_against_width = $(window).width() - $(".control-list").width() - $(".zbrand").outerWidth() - $(".brand-logo-navigate").outerWidth() - 66;
title_width = test_against_width;
$(".title-container").width(title_width);
} else {
$(".title-container").width("100%");
}
set_title_width();
}
})

View File

@@ -19,7 +19,7 @@ var Mobile_remote = {
$("#remote_channel").attr("placeholder", "Change channel");
$("#remote_header").html("Controlling " + id);
$("#volume-control-remote").css("display", "inline-block");
$(".slider-vol").attr("style", "display: inline-block !important");
$(".slider-vol-mobile").attr("style", "display: inline-block !important");
},
set_channel: function(channel_name) {