only set player at bottom on mobile screens

panikweb_templates/static/css/specifics.css

@@ -84,6 +84,11 @@
 .wrapper .rightPart{margin-top:1em;}
 
 @media screen and (min-width: 760px) {
+	#player-container.fixed {
+		position: fixed;
+		top: 50px;
+		width: calc(0% + 235px);
+	}
 	.wrapper .rightPart{
         margin-top:0;
 	}
@@ -281,7 +286,6 @@ body{
 #mainHeader h1{
 	padding-left:75px;
 }
-#player-container.fixed { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
 #player-container #player{
     padding:0 0 0 0;
 }
@@ -341,10 +345,6 @@ body{
 		margin-top: 50px;
 	}
 
-	#Player .fixed #CurrentlyPlaying {
-		margin-top: 0;
-	}
-
 	ul#ticker {
 		margin-bottom: 10px;
 	}
@@ -515,9 +515,6 @@ h1.top#frequence {
 
 #player-container,
    #player-container *{border-color:#ff6600 !important;color:#ff6600 !important;}
-#player-container.fixed{
-	background:white 0% 50% no-repeat url('../img/logoPanikBW.png');
-}
 
 #player-container .metas, #player-container img{border-color:#fff;}
 #player-container .padded{padding:0.3em;}
@@ -540,15 +537,6 @@ h1.top#frequence {
 }
 #DirectStreamPanikControler .label{
 }
-#player-container.fixed{
-	z-index:500;
-	position:fixed;
-	width:100% !important;
-	/*top:2em;*/
-	font-size:80%;
-	bottom:0em;
-	border-bottom:none;
-}
 
 #Player.withoutPlaylist #player-container #audioPlayer{
     margin:auto;
@@ -557,41 +545,26 @@ h1.top#frequence {
 #Player.withoutPlaylist #player-container #audioPlayer #Live{
     font-size:150%;
 }
-#Player.withPlaylist #player-container.fixed #audioPlayer{
-	float:left;
-	width:50%;
-	border-right:2px solid black;
-}
-#Player.withPlaylist #player-container.fixed #Playlist{
-	float:right;
-	width:49%;
-	text-align:left;
-}
-#Player.withoutPlaylist #player-container.fixed #Playlist{
-}
 #Player.withPlaylist #player-container #Playlist{
 	border-top:2px solid black;
 }
-#Player.withPlaylist #player-container.normal #Playlist{
+#Player.withPlaylist #player-container #Playlist{
 	margin-top: 1em;
 	padding-top: 1em;
 }
 
-#player-container.normal #myPlaylist {
+#player-container #myPlaylist {
 	clear: both;
 	padding: 1em 0 0 0;
 	height: auto;
 }
 
-#player-container.normal #myPlaylist a {
+#player-container #myPlaylist a {
 	margin-right: 30px;
 	white-space: normal;
 	padding-bottom: 1ex;
 }
 
-#player-container.normal #myPlaylist li {
-}
-
 #player-container.minimized{
 	width:auto;
 	border-width:0px 2px 2px 0 !important;
@@ -604,11 +577,7 @@ h1.top#frequence {
 }
 
 /*Playlist*/
-#Playlist{
-}
 
-#Playlist button{
-}
 #Playlist #playlistLabel{
 	float:right;
 
@@ -642,8 +611,6 @@ h1.top#frequence {
 #player-container #Playlist ol{
 	clear:right;
 	padding:0 0 0 1.5em;
-	height:1.3em;
-	overflow:hidden;
 }
 #player-container #Playlist ol li{
 	line-height:1.3em;
@@ -694,17 +661,6 @@ h1.top#frequence {
 	}
 
 }
-@media screen and (min-width: 760px) {
-
-	#Player{
-    }
-	#Player #player-container.fixed #audioPlayer{
-		max-width:50%;
-	}
-    #Player.withPlaylist #player-container.fixed #Playlist{
-	    border-top:none;
-    }
-}
 
 /****************************************************/
 /**** #Changing #Footer ... ****/
@@ -1355,3 +1311,46 @@ div.userContent h2 { font-size: 1.8em; }
 div.userContent h3 { font-size: 1.5em; }
 div.userContent h4 { font-size: 1.5em; }
 div.userContent a { text-decoration: underline; }
+
+
+
+@media screen and (max-width: 760px) {
+	#MainHeader {
+		margin: 0 auto;
+	}
+	#All #backgroundBox h1.top {
+		width: 100%;
+	}
+
+	#player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
+	#player-container{
+		background:white 0% 50% no-repeat url('../img/logoPanikBW.png');
+	}
+	#player-container{
+		z-index:500;
+		position:fixed;
+		width:100% !important;
+		/*top:2em;*/
+		font-size:80%;
+		bottom:0em;
+		border-bottom:none;
+	}
+	#Player.withPlaylist #player-container #audioPlayer{
+		float:left;
+		width:50%;
+		border-right:2px solid black;
+	}
+	#Player.withPlaylist #player-container #Playlist{
+		float:right;
+		width:49%;
+		text-align:left;
+	}
+	#player-container #myPlaylist {
+		padding: 0;
+	}
+
+	#player-container #myPlaylist a {
+		white-space: nowrap;
+	}
+
+}

panikweb_templates/static/js/specifics.js

@@ -228,15 +228,13 @@ $(function() {
 	});
 	if($('#player-container').offset()){
 		var topPosition = 0;
-		topPosition = $('#player-container').offset().top;
+		topPosition = $('#mainHeader').offset().top + $('#mainHeader').height();
 		$(window).bind('scroll load',function (event) {
 			//$('#player-container').removeClass('fixed');
-			var y = $(this).scrollTop() + $('#metaNav').height() - $('#Player').height() + 10;
+			var y = $(this).scrollTop() + 40;
 			if (topPosition!== 0 && y >= topPosition) {
-				$('#Player').css({'min-height':$('#Player').height()});
 				$('#player-container').addClass('fixed').removeClass('normal');
 			} else {
-				$('#Player').css({'min-height':'auto'});	
 				$('#player-container').removeClass('fixed').addClass('normal');
 			}
 		});