Visual overhaul on mobile devices

This commit is contained in:
kasperrt
2014-12-30 04:20:09 +01:00
parent 42b5f5b063
commit 80a2091e8c
5 changed files with 48 additions and 6 deletions

View File

@@ -13,6 +13,7 @@
<div class="bgimage" id="bgimage"></div>
<div class="top vcent centered">
<div id="change" class="small">
<div id="mobile-banner"></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" type="text" class="search_input innbox" spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off"/>
@@ -22,7 +23,7 @@
<div class="playlist" >
<div id="buttons" class="">
<!--<a href="/php/admin.php?list=<?php echo $list; ?>" title="Channel settings" ><img src="/static/settings2.png" class="skip middle" alt="Settings"/></a>-->
<img src="static/settings2.png" class="skip middle" alt="Settings" title="Settings" onclick="admin();"/>
<img src="static/settings2.png" id="settings" class="skip middle" alt="Settings" title="Settings" onclick="admin();"/>
<img src="static/skip.png" class="skip" alt="Skip" title="Skip" onclick="skip();">
</div>

View File

@@ -39,7 +39,7 @@ function updateList()
var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/&quot;/g,"'").replace(/&amp;/g,"&");
var video_id = listeID["id"];
var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/default.jpg";
var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg";
var odd = ""; if(j%2==0)odd=" oddlist";
var delsong = ""; if(pass_corr=="correct")delsong="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
var finalhtml="<div id='result' class='result lresult"+odd+"'>"+

View File

@@ -55,6 +55,7 @@ function search(search_input){
{
if(response.data.items)
{
var wrapper = "";
$.each(response.data.items, function(i,data)
{
if(data.duration > 720 && longS == 0){return;}
@@ -72,9 +73,14 @@ function search(search_input){
</div>\
</div>";
//+data.uploader+" • "+
$("#results").append(finalhtml);
//$("#results").append(finalhtml);
wrapper += finalhtml;
}
});
console.log(wrapper);
//$("#results").append(wrapper).show("slow");
$("<div style='display:none;'>"+wrapper+"</div>").appendTo('#results').slideDown('slow');
}
else{ $("#video").html("<div id='no'>No Video</div>");}
}

View File

@@ -351,6 +351,9 @@ function onPlayerReady(event) {
function setBGimage(id){
if(window.mozInnerScreenX == null && !window.mobilecheck()){
$("#bgimage").css("background-image", "url(http://img.youtube.com/vi/"+id+"/0.jpg)");
}else if(window.mobilecheck()){
$("#mobile-banner").css("background-image", "url(http://img.youtube.com/vi/"+id+"/hqdefault.jpg)");
$("#mobile-banner").css("width",$(window).width());
}
}

View File

@@ -99,7 +99,7 @@ input[type="radio"]{display: none;}
@media (max-width: 1000px) {
#controls{display:none;}
body{background-color: #2F2F2F;}
.bgimage{background-image: url(bg5.jpg);position:fixed;background-size:500%;}
.bgimage{background-image: none;position:fixed;background-size:500%;background-color:black;-webkit-filter: blur(0px) brightness(0);}
#player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;display:none;}
.playlist{width: 100%;}
.lresult{font-size: 40px; height: 90px; font-size: 50px;}
@@ -108,7 +108,7 @@ input[type="radio"]{display: none;}
.ltitle{height: 70px; /*color: #000;*/}
#plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
#plus{border-right:solid 3px rgb(172, 172, 172);}
#search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
#search{text-align: left; height: 100px; font-size: 40px; /*border: solid 2px #ccc;*/color:#FD00C0;width:100%;border-radius:0px;}
#buttons{text-align: center; height: 80px; margin: 0;}
.skip{height: 50px; -webkit-filter: brightness(300%);}
.vcent{
@@ -122,7 +122,39 @@ input[type="radio"]{display: none;}
padding-left: 2%;
padding-top: 0;
}
.footer{font-size: 40px; margin-top: 150px;}
.footer{font-size: 40px; position:fixed;}
::-webkit-input-placeholder {
color: #FD00C0;
font-weight:bold;
}
:-moz-placeholder { /* Firefox 18- */
color: #FD00C0;
font-weight:bold;
}
::-moz-placeholder { /* Firefox 19+ */
color: #FD00C0;
font-weight:bold;
}
:-ms-input-placeholder {
color: #FD00C0;
font-weight:bold;
}
#toptitle{color:#FD00C0;font-weight:bold;}
#mobile-banner{background-repeat: no-repeat;background-position: center center;height:265px;position: absolute;top: -16px;z-index: -100;background-size: 100%;}
#settings{display:none;}
#results{position:inherit;background-color: rgba(255,255,255,0.2);}
#title{color:#FD00C0;font-weight:bold;font-family: 'Open Sans', sans-serif;}
#add{display:none;}
.chan{font-weight:bold;}
#playlist{padding-bottom:50px;}
.main{width:100%;}
#results{width:100%; margin-left:0%;}
.lresult{height:120px;font-size: 35px !important;}
.lthumb{height:120px;width:initial;}
.ltitle{display: table-cell;vertical-align: bottom;width: 100%;position: static;}
}