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{
max-width: 22%;
min-width: 200px;
overflow: hidden;
position: relative;
font-size: 30px;
padding: 0 20px;
left: initial;
display: inline;
display: inline-flex;
}
.navbar-fixed {
@@ -646,7 +645,7 @@ hide mdi-action-visibility mdi-action-visibility-off
transition: padding 1s ease;
}
.mdi-navigation-close {
.mdi-navigation-close {
text-align:right !important;
}
@@ -1295,6 +1294,7 @@ ul #chat-log{
.chan{
padding-right:10px;
max-width:22vw;
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;
}
#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);
position: absolute;
width: 14px;
@@ -1779,6 +1779,20 @@ nav ul li:hover, nav ul li.active {
.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){
#playbar{
display:block;
@@ -1793,7 +1807,7 @@ nav ul li:hover, nav ul li.active {
text-align: center;
}
.slider-vol{
.slider-vol-mobile{
display:none !important;
}
@@ -1806,6 +1820,7 @@ nav ul li:hover, nav ul li.active {
.brand-logo{
left: 0 !important;
padding-left: 0px !important;
-webkit-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important;
@@ -1979,6 +1994,8 @@ nav ul li:hover, nav ul li.active {
.chan {
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;}
@@ -1986,10 +2003,9 @@ nav ul li:hover, nav ul li.active {
nav .zbrand{
-webkit-transform:initial;
transform: initial;
display: block;
display: flex;
max-width: initial;
width: 70%;
width: calc(100% - 100px);
width: calc(100vw - 170px);
}
#search_loader{
@@ -2000,6 +2016,7 @@ nav ul li:hover, nav ul li.active {
.title-container{
background-color: rgba(0,0,0,0.1);
display: inline-block;
top:56px !important;
}
.title-container li {
width: 100%;
@@ -2041,6 +2058,10 @@ nav ul li:hover, nav ul li.active {
margin-top:56px;
}
.title-container{
top:64px;
}
}
@media only screen and (min-width: 769px){
@@ -2051,7 +2072,7 @@ nav ul li:hover, nav ul li.active {
}
nav .zbrand {
/*display: inline-block;*/
top:-22px;
/*top:-22px;*/
/*left:100px;*/
}
.title-container{
@@ -2123,6 +2144,7 @@ nav ul li:hover, nav ul li.active {
color: black;
text-align: center;
}
#volume-control, #volume-control-remote {
cursor:pointer;
float:left;
@@ -2137,7 +2159,7 @@ nav ul li:hover, nav ul li.active {
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;
width: 75px;
position: absolute;
@@ -2147,7 +2169,7 @@ nav ul li:hover, nav ul li.active {
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;
width: 36px;
background: rgb(255, 44, 44);
@@ -2160,6 +2182,58 @@ nav ul li:hover, nav ul li.active {
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{
float: none;
width: 70%;
@@ -2167,7 +2241,7 @@ nav ul li:hover, nav ul li.active {
margin-left: 10px;
margin-right: 0;
margin-top: 30px;
height: 10px;
height: 5px;
border-radius: 4px;
margin-bottom: 20px;
cursor: pointer;
@@ -2189,7 +2263,7 @@ nav ul li:hover, nav ul li.active {
/* margin-top: 0px; */
/* height:10px; */
/* background: black; */
height: 10px;
height: 5px;
/* width: 75px; */
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
@@ -2206,10 +2280,10 @@ nav ul li:hover, nav ul li.active {
/* display: none; */
/* height: 14px; */
/* width: 10px; */
height: 25px;
height: 20px;
padding: 0;
border: 1px solid white;
width: 25px;
width: 20px;
background: #000 50% 50% repeat-x;
position: absolute;
cursor: pointer;
@@ -2221,12 +2295,17 @@ nav ul li:hover, nav ul li.active {
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.slider-vol{
.slider-vol, .slider-vol-mobile{
float: right;
color: black;
font-size: 22px;
margin-right: 20px;
margin-top: 6px;
padding-left: 35px;
margin-top: 22px;
}
.slider-vol-mobile{
margin-top:5px;
}
.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){
$('<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");

35
public/js/listeners.js
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();
}
})

2
public/js/mobileremote.js
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) {

12
public/php/channel.php
View File

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

16
public/php/controller.php
View File

@@ -7,10 +7,14 @@
<header>
<nav id="fp-nav">
<div class="nav-wrapper">
<a href="//zoff.no" class="brand-logo hide-on-small-only">
<img id="zicon" src="/public/images/squareicon_small.png" alt="zöff" title="Zöff" />
<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>
<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">
<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>
@@ -85,8 +89,10 @@
</a>
</div>
<i class="material-icons slider-vol rc">volume_up</i>
<div class="rc" id="volume-control" title="Volume"></div>
<div class="volume-elements">
<div class="rc" id="volume-control" title="Volume"></div>
<i class="material-icons slider-vol rc">volume_up</i>
</div>
</div>

2
public/php/panel.php
View File

@@ -195,7 +195,7 @@
</button>
</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>
</ul>
</div>