From e56cc373b09f69c7770695d5572881e6c56c26aa Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Mon, 20 Oct 2014 01:12:54 +0200
Subject: [PATCH] Fixed new design on mobile and added buttons to searchbar

---
 index.php            |   4 ++--
 js/list.js           |   2 +-
 static/settings2.png | Bin 1349 -> 1151 bytes
 static/skip.png      | Bin 1483 -> 1233 bytes
 static/style.css     |  28 ++++++++++++++++------------
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/index.php b/index.php
index 4ded4649..b92f72e5 100755
--- a/index.php
+++ b/index.php
@@ -20,7 +20,7 @@
 				<div id="player" class="ytplayer"></div>
 
 				<div class="playlist" >
-				<div id="buttons" class="result">
+				<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/skip.png" class="skip" alt="Skip" title="Skip" onclick="skip();">
@@ -34,7 +34,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="footer small centered top anim">&copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT </a>&amp; David  </div>
+		<div class="footer small centered top anim">&copy; 2014 <a class="anim" href="//nixo.no">Nixo</a> &amp; <a class="anim" href="//kasperrt.no">KasperRT </a></div>
 
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 		<script type="text/javascript" src="/js/iscroll.js"></script>  
diff --git a/js/list.js b/js/list.js
index b787ab52..6070978b 100755
--- a/js/list.js
+++ b/js/list.js
@@ -40,7 +40,7 @@ function updateList()
 		{
 			if(!window.mobilecheck())
 			{
-				$("#playlist").css({height: $("#player").height() - $("#buttons").height()-4});
+				$("#playlist").css({height: $("#player").height()});
 				$("#playlist").css({overflow: "hidden"});
 				if(scroller == false)
 				{
diff --git a/static/settings2.png b/static/settings2.png
index 530e6e224431cab92739461af4ed34a2e0195072..f64026bc2d8707b94ea01d584fe473733e749fd6 100755
GIT binary patch
delta 1070
zcmV+}1kwA&3jYX@V1E-A01gr@uiXFu1OG`xK~z}7?U-9=Ttyhie`i}wEVxmWTCkv2
ztzw8tEfECyM6J+9d=jiE=Ak|&ctiRi6nlLrYC+h2(FYNP`mQx;qZt0;4bpl+5h+wr
z#A~U$P>H4F_|Tc`<mB9TlZ6&LuyD@KcmDIAZ|1v3EMb`06o0U(gy<*0-IC%?)~Rp-
zjEf|@O0r2k^|>3PL9I|`Wg5XMW0=`~Kvj($^8YR2BqH~VGu9dao&&a}8CR5HwT}aD
zx!3KIUTRPyBJ!XcfPKI{z^W1?{{=n=_DY&c5PS@H(<yA1q@9^08`SAL_t7R`D%f=d
zyejD#GrJt90e_=zF3#F$%J8z2z^J4@&Fop=Kw_<JlHTxq7HQJVt_QvYdV)C*egwD;
zSlcGKG@=dQFz`qM%Rk>G>9cuF25Mgm{9FLOTq6$dXp}KGDCz44^_GB{{R*t<0-;Vf
z@DH$B(&@;|E(MMO{pSI}B+*}h{*}(MIwcq<TuYo{lz&kN*k1Np;GGI^FtKPS$Fdz5
z1Xf8};S8@I7za+K`N$I3UjDVn-N$}l2IwuhYcKPaq#++U`WRp2s2%<Uu(?g_IpBUt
z)0HN5Bz+644|ZJ!<QrgP%g2r{5UMgZA5tZ40S=YasFxX%G`+yO11ta19bMk8&j7t;
z^TWW+{eK2rQ?U7;fB{L(MX|Tp3iNjXUleF`x1_jCa*(*{FXU)40)7W>k<<*aE3M-h
z_eV1a%oeOT*-YHQyisk*eOMscBWV^`fSr}a++0BNM71Qra7g+gN0TvdMLVh1)p-|O
z(y1;uaPMg<Wl8>(cPGv4$}UA2f89!vJYKNlb$^XEGxi2G%<Q_H%}2oBxyS9T+o`*^
zfaFMD;0KEd&im2LMai+5^(4!dWIkDO?&tObKY13oOw!pd_{kH%h6R4oGd8mufIl2T
zatOvQ)jw)xm*f>w9@`O|a0KImq+%U#(#!@uhPSAjT$t-=Grk@Jh9%84sfGTK@ZHRg
z0Dlj35W7bt9gfUw3-Df|&S)nKngw12CV=lHopCwpjljLYZs4j8>LJf%G%~Y;z@z6`
zJ{gXWDz5T7+Ck2jBoaAq;eSzLzHOiBGV_Nnh#IF7_@iNWS);r(W;vrv0q&iWPA|$Q
zUEO^gSdmf-PXGhURCk|p4T!9|dsxy;N`J(uBk4!r!Qg)Sj}Ay00d56ePk^>lv-l3i
zdP!S>r&HE?LefklE8+wi9d%VC!1Iz`N$CacaW1B8FX&@nkEH2yA$T6^Vc=~SAa+RF
zTiCD)dO|M)lak)g>Z+O92f%$LNPg<t(Q_GV4FOL9Prj?IadNFFFV-fXyU{bx!za&8
o)xwX80G2w+;9u;S|F1~?2RR+L#Bl08MF0Q*07*qoM6N<$f}be=aR2}S

delta 1269
zcmV<R1Pc5A2*nDJV1Ef05(6vD6i5I71jR{2K~z}7?U>)I6;%|+Ki{KyO=wS2q>xZr
zS#;5>#tj4^ECYYgTUZp`prDsM^n=2OAS$VcD1>6>r5;2O`~$-Laf^h&3j9%Fgh&>J
z*bhZ#z)G>ZdYGAe=A3(H?i|lGiyAnbJ?G4<{oUWS_FCVyMSmYxLOd#1Gu3kj`@vQP
zgmx+OwE6)l{+_EZkoIo?c}1B_i6<Rj4ki<#-a)3sI6Nuw8wv4-d|bt3s|V6G*<1l3
zDe;n&cxy_m#vV(E9~ErRZ#Oyon+Xv@I6MjQa>45c_Xy@Rh~D#{&kbG+@S|li65>Y$
z+klzCs}BE4C4b0-m>_#;4cMqq;Y}I59pIl$iLU`7V5H>nhM{Q&60qB_k$~{mgy=b;
zEtws|vj3k5@LLN!6PQehZWeq48YumjTerQyouCE1f$NCj;=M$$2W(@;L3^%zywc%6
z8)vc<gA0HkCpT`UY?ae>6<{V?Y(dJ9Bm62MF1tHA34fZeOJwOXEZ{f8ZU_j^DIuCA
zbO;#a$^$I1X%adCHaHWstq*`@w{@pZmA-qmEoG122ztK-w!^T(zBNZ@<8A>q88!qq
z$Khvy4FH1%p<$=H7SeR_mZN%Cc{~mZ9WZRRI(OSt41VeG%Zkbo5Kbrx`FIzwwjra%
zGh@Jg4u8L|m1q604HgTXp2|p(MhrV*a92CWh8@q9E0x2qGuUaEa)RnSB*V<GWe&fu
zV|SO5`WIkBQ!skLu-Q%ZVJXf11k9^r(6AqbmN<Mmp?0U^h2B;O4uh$N&CLO!H4z7$
z`^jFkirBOa;Lk$0JA7KUt%{ZJ2Ugb9w_#xiU4NI08z}jOz_+UQ&{>C{+eoSzc3X`f
zO>n$dfB*shyQ-MX<M7%ZM6a$_P0DciGt(`Vv$87^qE;i2f>U+7JSCnx{c7F}jDT>g
zY5Q=jW(&w*QBtGWs}y)jbW=4>N$6~?yNlhO61RZaRo+%63fBiUihYs|ljl*bogzn`
zPk)I9y4x0Yx-n{j4g*Uq+aRha2Nw;yIv~8*Yo0Wiry5ZK90!&MgzY?8AWn%F8u|rT
zS}<0@qyaO94yMFc)iqP4ic^%vd8)2B5<+N^(CLJDsIXDg?puY900T|xYaxOSJ0vvh
z@M9?vuA_Fh?^EKv2KP7As)bA&1J*nI9)Bf7>x4cim4&8~s+jN(;AMkd!j3w^3n}p|
z!)_5;4Qw{Ju17I#?Ubw$CB!?x9?pL0xkV_tD=XcP=X@b@R{9Xr_DM@HB6KhZ*lWLE
ztg7g%TN?jJCGmO*i#LE1zym4;`AM+(hD`sk9;a2xN5h83DgaLR*;El0R;ib;yMF`1
za})Gr)_3a|Fr#o$sh!<rutd;T-<^|i1{ei4cID&3?y$ojn55#w1ccukwxQIM<N$4p
z!><>12k@S?wWjsp!UD{0u*DAlkYUf1=dx`4n8P0^m)%xb?q_l;+-vZ7X*0aw2%paq
zw$3^HQ$i~Yb^^aQ1bG4Y7+CG_>u!KkIVtY|4;uWLFZ?Bk-=535YEjZY6N=sf?GErC
zmYb@sit-U~Z-dVAQ(#rM!YQ3UEfe-M=t;o3=Tcp*?H*r_GxIw8wNkD8(o_cey_(qn
f|6u<=b+G>z7?L7f1hUq)00000NkvXXu0mjfTKri8

diff --git a/static/skip.png b/static/skip.png
index 2d03b3d72fabb5ae2c2339af8216fbc2413db10b..a7fdcfd950504a4a53ae22af96a3e120b3e68787 100755
GIT binary patch
delta 1118
zcmV-k1fl!O3(*OXUkM5m7XS&2NjiR!XeWOJEJ;K`RA}DqnQusIbr{E=qqn#;6qyX$
zjf)sr$z^Czfn%Oy=j7^u?0QAVrtf;;NM;8~*0y8Y*}R_VOkZRLY7lC%7s_p(rqjXZ
zHpjr~Hk3<{(hVar;W9y5v4T!7+CYSB*X_3h7yQ248NcsyKIc5o^ZRo!y<UI+<m7*(
z(&2C@)oS(MP^7F@>qIh{93n~b6^`S+1w@*dn1JKs<AFpX@!{G3Dk>^O499UXe?hC&
zK07=-{F6?n13?f93V7O&qA0V|>HHWK%xUklDm(on6bjvUI2<<xK>&)PiVhqOhd*Lj
zHZ(Ukhe3%|cJ@Lv8uc>_b0-`Q!_a@wP|*Rlwzk?97Z?BW`~6oX1pxp^rBb(W92bp7
z<CCZYO-)Vx$@Bbcl7i$lI5?P{oSeLYD%kq^dSqZ=;62Gf00352R_?X6wS5HupjNAk
z4!E<kGiJBj@2st@Js~Lw06;dIZD$zf^JFrKBxoX$xHUF5_Ls-wc`Dc4qyc}))lDys
z<Dw{vpwsD)00o1=49l`Fg~MU#K=L98LZoS02>{^ncu;h;?`WD%N)7@5;Pd%@Wm)!Z
zo6UwKEi#!*Gs7@J$w6{Y@)L$(KJDr0DMyiJsZ{Ds9LGhM%k?w>0LO6`8jqbf?LVqw
zu^5J77}VF-gHow1+K(j3=Q)3l+b2m9B9X|&mnembAPCXx^~(15_mMP#NF=gnHk;o)
z4N<bxI;%h+@H@-0EGoa<-Q5qmySw)Q08}cKbRfC9xsB5A=;){($8phWwLT+BjYy%^
z*49^}(dgHYJ&2^KbqR6_atU$?atV@`Mx&u0dl0=|{{qkR>ym+JG@5_UP(#Gyacp&U
zbx*R?YHx2h@I3z(!iVxjJRZmT`uZRk{Qo`I6%;}9`w<kUEV*^n%Wk*(u2!ps+1c6B
z7kgDz)z6)so#hzz--#%SQx=M%YTa)4U8mCtp-||N#})iWnwy*7A0HpTeRz0?<Soc#
zvJ;cZbgiSKBLe{7a=CvlG`=7Znx@~d*=(V%t}a+!UM?D<va<4CAP`U~6bk9)k@@*~
z*~Z332mp{kkR<tfAP`Ui04yvllpds}rsjuOEQZz9)%_8TMp1P-CC71LqtPhM%uW!*
zJ4;JTFXoH7ST!^>{Ae&3u39XX-|Tif_<X+7gAfGKGBPqUZ8m?Kkw8>eS4U=MW}e&L
z-p&F5@H~&i_uQ>+e}DfqgTZj2wsf8!Ns^r$$9-Ao&7S9d<stLKFM=RkFE2-OhzI}x
zy}i8(lgacz($%jZ2-j<CYhiP9v*-YFxjao#RGG<SdSJ0wq*=zdw6xra$K#k>E{B7I
zgQCqF8yiRbet$}})9Dle0K8sr=|JRic^Uw~U@+8;j*fm00FX|n3pP|J6yM~U#LemH
kX$Q)iZE9+I=y!~N0iLjcQoGrCi2wiq07*qoM6N<$g0L1LH2?qr

delta 1370
zcmV-g1*Q7Y3CjzRUkL~l4iOYcc7~CWXeWOKCP_p=RA}DqnQd%SRT#(r=kD&_(v5X&
zf?WU?vn>;`5sU??8bga)$5=Pq&=HLx5HXN}(JUB-hLOM!7X5&O4;a7^4Op5vZrBTx
zZUoGfjh843AXRZ0G9-nuG3q^CdygN=V7v@RZ+nv^JfE7}d!N(aIsHHX=RPHL&i;QR
zEU5g;e>80#pZD|tR0f@Qppx~{MI<FIM|9ecBSKMGS&5ZLpIyOv=@tNiyDoBsBeL1a
z;0pkHK1ebXGsJJQE;t+xNRkxRg0k6p9=<?2076X3CF0)ft&xI}&CUbx1#%yBjl2EH
z7vR__@1L}&AzzXt*lad6YZ3rpr>}oj(So`r|C*l&q8!{ki!*k%r<U5Ky>7P~rKP26
z^E2k@eO+n(`=5brr*&F^+}X*l{<q{=uC~u|J`hyq51mAx|B2wPvsdW5Kg`w&<WBVY
z&4EvjUH8A=GBpD05cmS|?DW-UYL`}M3lf4Eqx{(2A=_%L0AR6L)WP@_#=3v{w@^o2
z&A`qxvD$$Q#$}(I+NB+>t*wZ}PmTT2J3m-`PNs_v=>e!MERO&JFxJ(-Sf1rN!x)3Z
z;TZl-encr5yfVjr@%GSyy6JAWTQiVB(N3W=_T6x0ew+dT8#ive|IUCi@_c?JmR-1U
zQnuB8s1*o?_)VNr-+74^)GdEoy?V8JzX>S7W#1Rn9;O3_4KnCAp5ATLE^TeFY>0`3
zSXozpp8Q&kmlhv10zi3rdDKCM`pt6X(8UvsF#teDM#e}r^5F2w$?UhDZu(|pMtONT
ztX6B(L57y-=jpWXZuplp$9X)Sk!oc4@GFdYuAirNX<2h~vxXocfyaL<$FKC$g1R*k
zG0%|SY@>7b9|QoC$)piT2!=6F?|R6=^oYO!VBI&f<XNsuC*S^hqIMvIB~@XO?R5M6
zDZzceU!+A1X7C&v*1j+rLJl%^wx<nxUXv4vW{_JRHtIp3rA8iuJO&wsAfd7=aHAT8
zfg^;Z8FHZG8?^voQNe!@xU1ZpNtvRQ+lYV?j5Y`ZKuDTl7xcU*Vh~AUo9<Nc`22Gf
z=e5xYN5H*gEEc8Q#j4u)Aty`H4BzUG7S3F{bSWAd8vgeoUiG30LZ8@Lm`Df-O<4vM
z^(Q-J+>4?s=R{Uk7PfES9@VN9(t}Z7$GtE<iI7kSp?b=q=VgClN=_ABIVaYxU5los
zrV&5NhrMg5V?Pz^^VXaD%;8K??vDv$+F}-@TVt1-ZUVr%b?c(+BLWvB<_Xziect+_
zq9U}nx2r9!fKk6i*D`<RlAkMYhMS0glv9A7?~2`Jd&X8$=mP+k%cV*S;D|z|jLR0C
zb~ga*-n~2O&Q5<wN?g6zw&1Cl=aPMg4<A<FmL~|{W;{7bblTku7cPu?ixMh@nTadK
zL;1ObqE<~YF|LEN7<Ix9>*cbtGVIy2C(0lKM@VMkt76UEFH1^FM*8mlP(6^8xD8@c
zzUe*hR}=s$Dk>tfIm2rtLAVf8nD%mP>GW;@sH&<`Cu)CP3?XTTH$<oXdjP1eu8wFY
z!#_}jMtzgcU64Inr}}@H!6MPeStq3nn=D=}+IV(LgvB~{L3V0tDq31v!q^(_Zc!Wc
z9VE>#PS|Aeu3EJ!YArH<mmX5bP8Dl&&m<)!p|i6yyo@1@giLdCe3{tjxIMDpym_<A
zZ_7OdBtb^_6+Ab<S&T)(=db()0N1Wv3%?>6#3KwalF9M!h&6MiNbWi@2*+4J$psL+
cXTlQv4^6Z2%>ejQb^rhX07*qoM6N<$f~ISiC;$Ke

diff --git a/static/style.css b/static/style.css
index 21f05176..50fe7936 100755
--- a/static/style.css
+++ b/static/style.css
@@ -42,26 +42,27 @@ body{background:#000; margin:0;}
 .chan{color:#CCC; cursor:pointer; display: inline;}
 .bigchan{color: #ed207f; font-size: 10vw; padding-top: 25%;}
 
-#buttons{cursor: default; text-align: right;}
+#buttons{cursor: default; text-align: right; -webkit-filter: brightness(1.6);margin-top: -65px; margin-bottom: 18px;}
+#buttons:hover{background-color: none !important;}
 .skip{cursor: pointer; height: 25px; padding:8px 21px 0 0;}
 .skip:hover{ -webkit-filter: brightness(0.6);}
 
 #results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 2; font-family: sans-serif;}
 .result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer;}
-.result:hover{background-color: #DDD;}
+.result:hover{background-color: rgba(0,0,0,0.2);}
 #title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f; height: 36px;}
 .result_info{color:#888; font-size: 12px; float:right;}
 .thumb{height: 40px; width:80px; float: left;}
 
 .main{width:90%; margin: 0 auto 0 auto;}
 .playlist{background-color: none; width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px);}
-.lresult{padding:0; height: 60px; border-top: none; cursor: default;}
-.lthumb{height: 35px; margin-right: 10px; display: inline;}
-.ltitle{ color:#FFF; overflow: hidden; height: 60px; }
+.lresult{padding:10px 0 10px 0; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2);}
+.lthumb{height: 70px; margin-right: 10px; display: inline; width: 109px; border-radius: 3px;}
+.ltitle{ color:#FFF; overflow: hidden; height: 40px; }
 
-.votes{float: right; position: relative; margin-top: -1.4em; padding:0 3 0 4; background-color: rgba(50,50,50,0.45); color:#000; border-radius: 1px;}
-#plus, #minus {text-decoration: none; color:white; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
-#plus:hover,#minus:hover{background-color: #111;}
+.votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;}
+#plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
+#plus:hover,#minus:hover{color:#000;}
 
 #player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; }
 #adminForm{text-align:left;}
@@ -72,15 +73,18 @@ body{background:#000; margin:0;}
 .nomargin{padding: 0;margin:0;}
 
 @media (max-width: 1000px) {
+    body{background-color: #fff;}
+    .bgimage{display: none;}
     #player{width: 100%; height:45%; margin-bottom: 20px;}
     .playlist{width: 100%;}
     .lresult{font-size: 40px; height: 90px; font-size: 50px;}
-    .votes{font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
+    .votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
     .lthumb{height: 90px;}
+    .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;}
-    #buttons{text-align: center; height: 80px;}
+    #buttons{text-align: center; height: 80px; margin: 0;}
     .skip{height: 50px;}
     .vcent{
    	 	top: inherit; 
@@ -97,5 +101,5 @@ body{background:#000; margin:0;}
 }
 
 @-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:#00FF00;}to{background-color: #FFF;}}@keyframes fadecol{background-color: #00FF00;}to{background-color: #FFF;}}@-moz-keyframes fadecol{from{background-color: #00FF00;}to{background-color: #FFF;}}@-o-keyframes fadecol{background-color: #00FF00;}to{background-color: #FFF;}}
-@-webkit-keyframes fadewrong{from {background-color:#FF0000;}to{background-color: #FFF;}}@keyframes fadewrong{background-color: #FF0000;}to{background-color: #FFF;}}@-moz-keyframes fadewrong{from{background-color: #FF0000;}to{background-color: #FFF;}}@-o-keyframes fadewrong{background-color: #FF0000;}to{background-color: #FFF;}}
+@-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 fadewrong{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadewrong{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}