mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Visual overhaul on mobile devices
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -39,7 +39,7 @@ function updateList()
|
||||
|
||||
var video_title=listeID["title"].replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/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+"'>"+
|
||||
|
||||
@@ -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>");}
|
||||
}
|
||||
|
||||
@@ -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());
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user