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

More similar header on mobile

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

113
public/css/style.css
View File

@@ -522,14 +522,13 @@ main {
} }
nav .zbrand{ nav .zbrand{
max-width: 22%;
min-width: 200px; min-width: 200px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
font-size: 30px; font-size: 30px;
padding: 0 20px; padding: 0 20px;
left: initial; left: initial;
display: inline; display: inline-flex;
} }
.navbar-fixed { .navbar-fixed {
@@ -646,7 +645,7 @@ hide mdi-action-visibility mdi-action-visibility-off
transition: padding 1s ease; transition: padding 1s ease;
} }
.mdi-navigation-close { .mdi-navigation-close {
text-align:right !important; text-align:right !important;
} }
@@ -1295,6 +1294,7 @@ ul #chat-log{
.chan{ .chan{
padding-right:10px; padding-right:10px;
max-width:22vw;
text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42); text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42);
} }
@@ -1722,7 +1722,7 @@ nav ul li:hover, nav ul li.active {
background: #dadada; background: #dadada;
} }
#volume-control-remote .ui-state-active { #volume-control-remote .ui-state-active, #volume-control .ui-state-active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15);
position: absolute; position: absolute;
width: 14px; width: 14px;
@@ -1779,6 +1779,20 @@ nav ul li:hover, nav ul li.active {
.show-only-mobile{display:none; .show-only-mobile{display:none;
} }
@media only screen and (max-width: 992px){
nav .brand-logo {
left: 0%;
transform: translateX(0%);
-webkit-transform: translateX(0%);
padding-left: 0px;
}
.zbrand{
max-width: 35%;
}
}
@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){ @media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){
#playbar{ #playbar{
display:block; display:block;
@@ -1793,7 +1807,7 @@ nav ul li:hover, nav ul li.active {
text-align: center; text-align: center;
} }
.slider-vol{ .slider-vol-mobile{
display:none !important; display:none !important;
} }
@@ -1806,6 +1820,7 @@ nav ul li:hover, nav ul li.active {
.brand-logo{ .brand-logo{
left: 0 !important; left: 0 !important;
padding-left: 0px !important;
-webkit-transform: translateX(0%) !important; -webkit-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important; -moz-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important; -ms-transform: translateX(0%) !important;
@@ -1979,6 +1994,8 @@ nav ul li:hover, nav ul li.active {
.chan { .chan {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42); text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42);
width: calc(100vw - 170px);
max-width: 100%;
} }
.control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 0px;} .control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 0px;}
@@ -1986,10 +2003,9 @@ nav ul li:hover, nav ul li.active {
nav .zbrand{ nav .zbrand{
-webkit-transform:initial; -webkit-transform:initial;
transform: initial; transform: initial;
display: block; display: flex;
max-width: initial; max-width: initial;
width: 70%; width: calc(100vw - 170px);
width: calc(100% - 100px);
} }
#search_loader{ #search_loader{
@@ -2000,6 +2016,7 @@ nav ul li:hover, nav ul li.active {
.title-container{ .title-container{
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
display: inline-block; display: inline-block;
top:56px !important;
} }
.title-container li { .title-container li {
width: 100%; width: 100%;
@@ -2041,6 +2058,10 @@ nav ul li:hover, nav ul li.active {
margin-top:56px; margin-top:56px;
} }
.title-container{
top:64px;
}
} }
@media only screen and (min-width: 769px){ @media only screen and (min-width: 769px){
@@ -2051,7 +2072,7 @@ nav ul li:hover, nav ul li.active {
} }
nav .zbrand { nav .zbrand {
/*display: inline-block;*/ /*display: inline-block;*/
top:-22px; /*top:-22px;*/
/*left:100px;*/ /*left:100px;*/
} }
.title-container{ .title-container{
@@ -2123,6 +2144,7 @@ nav ul li:hover, nav ul li.active {
color: black; color: black;
text-align: center; text-align: center;
} }
#volume-control, #volume-control-remote { #volume-control, #volume-control-remote {
cursor:pointer; cursor:pointer;
float:left; float:left;
@@ -2137,7 +2159,7 @@ nav ul li:hover, nav ul li.active {
border-radius: 2px; border-radius: 2px;
} }
#volume-control .ui-slider-range-min, , #volume-control-remote .ui-slider-range-min{ #volume-control .ui-slider-handle, , #volume-control-remote .ui-slider-range-min{
height:5px; height:5px;
width: 75px; width: 75px;
position: absolute; position: absolute;
@@ -2147,7 +2169,7 @@ nav ul li:hover, nav ul li.active {
border-radius: 2px; border-radius: 2px;
} }
#volume-control .ui-slider-handle, #volume-control-remote .ui-slider-range-min { #volume-control .ui-slider-range-min, #volume-control-remote .ui-slider-range-min {
height: 15px; height: 15px;
width: 36px; width: 36px;
background: rgb(255, 44, 44); background: rgb(255, 44, 44);
@@ -2160,6 +2182,58 @@ nav ul li:hover, nav ul li.active {
margin-top:0px; margin-top:0px;
} }
.volume-elements{
display:flex;
}
#volume-control {
float: none;
/*width: 90%;*/
margin: auto;
margin-left: 10px;
margin-right: 0;
margin-top: 30px;
height: 5px;
border-radius: 4px;
margin-bottom: 20px;
cursor: pointer;
float: left;
position: relative;
background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
border: none;
outline: none;
}
#volume-control .ui-slider-range-min {
margin-left: 0px;
height: 5px;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
border: none;
outline: none;
}
#volume-control .ui-slider-handle {
margin-left: -12.5px !important;
width: 40px;
margin-top: -3px;
background: #2d2d2d;
border: none;
height: 20px;
padding: 0;
border: 1px solid white;
width: 20px;
background: #000 50% 50% repeat-x;
position: absolute;
cursor: pointer;
outline: none;
margin-left: -7.5px;
border-radius: 1000px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
#volume-control-remote{ #volume-control-remote{
float: none; float: none;
width: 70%; width: 70%;
@@ -2167,7 +2241,7 @@ nav ul li:hover, nav ul li.active {
margin-left: 10px; margin-left: 10px;
margin-right: 0; margin-right: 0;
margin-top: 30px; margin-top: 30px;
height: 10px; height: 5px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;
@@ -2189,7 +2263,7 @@ nav ul li:hover, nav ul li.active {
/* margin-top: 0px; */ /* margin-top: 0px; */
/* height:10px; */ /* height:10px; */
/* background: black; */ /* background: black; */
height: 10px; height: 5px;
/* width: 75px; */ /* width: 75px; */
position: absolute; position: absolute;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
@@ -2206,10 +2280,10 @@ nav ul li:hover, nav ul li.active {
/* display: none; */ /* display: none; */
/* height: 14px; */ /* height: 14px; */
/* width: 10px; */ /* width: 10px; */
height: 25px; height: 20px;
padding: 0; padding: 0;
border: 1px solid white; border: 1px solid white;
width: 25px; width: 20px;
background: #000 50% 50% repeat-x; background: #000 50% 50% repeat-x;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@@ -2221,12 +2295,17 @@ nav ul li:hover, nav ul li.active {
transition: background 0.2s ease, box-shadow 0.2s ease; transition: background 0.2s ease, box-shadow 0.2s ease;
} }
.slider-vol{ .slider-vol, .slider-vol-mobile{
float: right; float: right;
color: black; color: black;
font-size: 22px; font-size: 22px;
margin-right: 20px; margin-right: 20px;
margin-top: 6px; padding-left: 35px;
margin-top: 22px;
}
.slider-vol-mobile{
margin-top:5px;
} }
.about-remote{ .about-remote{

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

6
public/js/list.js
View File

@@ -124,7 +124,7 @@ var List = {
} }
}); });
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){ 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"); $(".prev_page").css("display", "none");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".next_page_hide").css("display","none"); $(".next_page_hide").css("display","none");
@@ -136,7 +136,7 @@ var List = {
$(".last_page").removeClass("hide"); $(".last_page").removeClass("hide");
}*/ }*/
} else if(!$("#pageButtons").length){ } 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"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
@@ -160,7 +160,7 @@ var List = {
List.empty = true; List.empty = true;
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
if(!$("#pageButtons").length){ 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"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");

35
public/js/listeners.js
View File

@@ -183,13 +183,7 @@ function init(){
stop: function(event, ui) { stop: function(event, ui) {
$('iframe').css('pointer-events','auto'); $('iframe').css('pointer-events','auto');
Crypt.set_width($(this).width()); Crypt.set_width($(this).width());
if($(window).width() > 769){ set_title_width();
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%");
}
}, },
handles: "e", handles: "e",
minWidth: 350, minWidth: 350,
@@ -244,6 +238,7 @@ function init(){
if(Helper.mobilecheck()) Mobile_remote.initiate_volume(); if(Helper.mobilecheck()) Mobile_remote.initiate_volume();
setup_admin_listener(); setup_admin_listener();
setup_list_listener(); setup_list_listener();
setup_chat_listener(); setup_chat_listener();
@@ -278,8 +273,6 @@ function init(){
$(".castButton-unactive").css("display", "none"); $(".castButton-unactive").css("display", "none");
} }
console.log(chromecastReady);
if(chromecastAvailable){ if(chromecastAvailable){
hide_native(1); hide_native(1);
} else if(chromecastReady) { } else if(chromecastReady) {
@@ -296,6 +289,8 @@ function init(){
} }
} }
} }
if(!Helper.mobilecheck()) set_title_width();
} }
initializeCastApi = function() { 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">'; 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){ function randomString(length){
var text = ""; var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_"; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
@@ -1115,13 +1124,7 @@ $(window).resize(function(){
List.element_height = (($("#wrapper").height()) / List.can_fit)-6; List.element_height = (($("#wrapper").height()) / List.can_fit)-6;
$(".list-song").css("height", List.element_height + "px"); $(".list-song").css("height", List.element_height + "px");
$("#player_overlay").width($("#player").width()+1); $("#player_overlay").width($("#player").width()+1);
if($(window).width() > 769){ set_title_width();
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%");
}
} }
}) })

2
public/js/mobileremote.js
View File

@@ -19,7 +19,7 @@ var Mobile_remote = {
$("#remote_channel").attr("placeholder", "Change channel"); $("#remote_channel").attr("placeholder", "Change channel");
$("#remote_header").html("Controlling " + id); $("#remote_header").html("Controlling " + id);
$("#volume-control-remote").css("display", "inline-block"); $("#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) { set_channel: function(channel_name) {

12
public/php/channel.php
View File

@@ -9,13 +9,13 @@
<div class="navbar-fixed"> <div class="navbar-fixed">
<nav id="nav"> <nav id="nav">
<div class="nav-wrapper"> <div class="nav-wrapper">
<a href="/" class="brand-logo brand-logo-navigate hide-on-med-and-down noselect">
<img id="zicon" src="public/images/squareicon_small.png" alt="zöff" title="Zöff" />
</a>
<div class="brand-logo truncate zbrand"> <div class="brand-logo truncate zbrand">
<a href="/" class="hide-on-large-only brand-logo-navigate">Zöff</a> <a href="/" class="brand-logo brand-logo-navigate noselect">
<span class="hide-on-large-only">/</span> <img id="zicon" src="public/images/squareicon_small.png" alt="zöff" title="Zöff" />
<span id="chan" class="chan clickable" title="Show big URL"><?php echo(ucfirst($list));?></span> </a>
<span id="chan" class="chan clickable truncate" title="Show big URL"><?php echo(ucfirst($list));?></span>
</div> </div>
<ul class="title-container"> <ul class="title-container">

16
public/php/controller.php
View File

@@ -7,10 +7,14 @@
<header> <header>
<nav id="fp-nav"> <nav id="fp-nav">
<div class="nav-wrapper"> <div class="nav-wrapper">
<a href="//zoff.no" class="brand-logo hide-on-small-only"> <a href="/" class="brand-logo brand-logo-navigate hide-on-med-and-down noselect">
<img id="zicon" src="/public/images/squareicon_small.png" alt="zöff" title="Zöff" /> <img id="zicon" src="public/images/squareicon_small.png" alt="zöff" title="Zöff" />
</a> </a>
<a href="//zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a> <div class="brand-logo truncate zbrand">
<a href="/" class="hide-on-large-only brand-logo-navigate">
<img id="zicon" src="public/images/squareicon_small.png" alt="zöff" title="Zöff" />
</a>
</div>
<ul class="right hide-on-med-and-down"> <ul class="right hide-on-med-and-down">
<li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li> <li><a class="waves-effect green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
<li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li> <li><a class="modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li>
@@ -85,8 +89,10 @@
</a> </a>
</div> </div>
<i class="material-icons slider-vol rc">volume_up</i> <div class="volume-elements">
<div class="rc" id="volume-control" title="Volume"></div> <div class="rc" id="volume-control" title="Volume"></div>
<i class="material-icons slider-vol rc">volume_up</i>
</div>
</div> </div>

2
public/php/panel.php
View File

@@ -195,7 +195,7 @@
</button> </button>
</div> </div>
<div class="" id="volume-control-remote" title="Volume"></div> <div class="" id="volume-control-remote" title="Volume"></div>
<i class="material-icons slider-vol">volume_up</i> <i class="material-icons slider-vol-mobile">volume_up</i>
</li> </li>
</ul> </ul>
</div> </div>