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

Redesigned mobile interface in channel

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2015-02-15 22:15:15 +01:00
parent 800ad6fc71
commit e9d0b8264b
4 changed files with 85 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.php
View File

@@ -19,7 +19,15 @@
<div class="bgimage" id="bgimage"></div>
<div class="top vcent centered">
<div id="change" class="small">
<div id="mobile-banner"></div>
<div id="mobile-banner">
<div class="inner"></div>
<h3 id="innerTitle"><a href="/">Zöff</a>
<br>
<span id="innerChan"><?php echo(ucfirst($list));?></span>
</h3>
<div id="mobileTitle"></div>
<!--<div id="viewers">2 viewers</div>-->
</div>
<a id="toptitle" href="/">Zöff</a>
<div id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></div>
<input id="search" name="v" title="Search for songs..." type="text" class="search_input innbox" spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"/>

29
js/list.js
View File

@@ -164,19 +164,22 @@ function skip(){
}
function show(){
if(showToggle){
showToggle=false;
$("#toptitle").empty();
$("#chan").addClass("bigChan");
//$("#chan").html("zoff.no/"+encodeURI(chan));
$("#chan").html("zoff.no/"+chan);
}else{
showToggle=true;
$("#toptitle").html("Zöff");
$("#chan").removeClass("bigChan");
$("#chan").html(chan);
}
fitToScreen();
if(!window.mobilecheck())
{
if(showToggle){
showToggle=false;
$("#toptitle").empty();
$("#chan").addClass("bigChan");
//$("#chan").html("zoff.no/"+encodeURI(chan));
$("#chan").html("zoff.no/"+chan);
}else{
showToggle=true;
$("#toptitle").html("Zöff");
$("#chan").removeClass("bigChan");
$("#chan").html(chan);
}
fitToScreen();
}
}

9
js/youtube.js
View File

@@ -309,7 +309,14 @@ function getTitle()
var outPutWord = viewers[5].length > 1 ? "viewers" : "viewer";
var title= viewers[4].replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/g,"&");
document.title = title + " • Zöff";
document.getElementsByName('v')[0].placeholder = title + " • " + viewers[5].length + " " + outPutWord;
if(!window.mobilecheck())
document.getElementsByName('v')[0].placeholder = title + " • " + viewers[5].length + " " + outPutWord;
else
{
document.getElementById("mobileTitle").innerHTML = title + " • " + viewers[5].length + " " + outPutWord;
document.getElementsByName('v')[0].placeholder = "Search • " + viewers[5].length + " " + outPutWord;
//document.getElementById("viewers").innerHTML = viewers[5].length + " " + outPutWord;
}
}
});

61
static/style.css
View File

@@ -546,6 +546,10 @@ input[type="radio"] {
transition: opacity 1s;
}
#mobile-banner {
display:none;
}
@-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}
@-webkit-keyframes fadered{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadered{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}
@@ -557,6 +561,45 @@ input[type="radio"] {
}
@media only screen and (max-device-width: 1000px) {
#innerTitle {
height:139px;
background-color:rgba(0,0,0,0.8);
margin:0;
border-top:2px solid white;
text-align: left;
padding-left:10px;
}
.inner{
height:160px;
}
#mobileTitle {
position:relative;
top:-105px;
left:200px;
font-size:45px;
color:white;
width:79%;
overflow:hidden;
white-space: nowrap;
}
#innerChan {
color:#CCC;
font-size:40px;
}
#viewers {
position: relative;
top: -120px;
font-size: 40px;
text-align: right;
color: #CCC;
margin-right:10px;
}
#del {
margin-top:15px;
}
@@ -653,7 +696,7 @@ input[type="radio"] {
/*#plus{border-right:solid 3px rgb(172, 172, 172);}*/
#search {
text-align:left;
text-align:center;
height:100px;
font-size:40px;
/*border: solid 2px #ccc;*/
@@ -665,6 +708,7 @@ input[type="radio"] {
background:url(search2.png)no-repeat 10px 30px;
background-color:rgba(255,255,255,0.2);
background-size:5%;
margin:0 0 20px 0;
}
#buttons {
@@ -721,25 +765,23 @@ input[type="radio"] {
}
#toptitle {
color:#fff;
display:none;
/*color:#fff;
font-weight:700;
text-shadow:0 0 12px rgba(0,0,0,0.5);
text-shadow:0 0 12px rgba(0,0,0,0.5);*/
}
#mobile-banner {
display:block;
background-repeat:no-repeat;
background-position:center center;
height:200px;
height:300px;
/*position: absolute;*/
top:-16px;
z-index:-100;
background-size:100%;
}
/*#settings {
display:none;
}*/
#results {
position:inherit;
background-color:rgba(255,255,255,0.2);
@@ -757,7 +799,8 @@ input[type="radio"] {
}
.chan {
font-weight:700;
/*font-weight:700;*/
display:none;
}
#playlist {