Mobile styling, some toasts, more colors, now uses minified versions

index.php

@@ -19,7 +19,7 @@
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
                 </a>
                 <div class="brand-logo truncate zbrand">
-                    <a href="//zoff.no" class="hide-on-large-only">Zöff</a>
+                    <a href="/" class="hide-on-large-only">Zöff</a>
                     <span class="hide-on-large-only">/</span>
                     <span id="chan" class="chan clickable" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
                 </div>

php/footer.php

@@ -68,8 +68,7 @@
 <script type="text/javascript" src="static/js/youtube.js"></script>
 <script type="text/javascript" src="static/js/search.js"></script>
 <script type="text/javascript" src="static/js/admin.js"></script>
-<script type="text/javascript" src="static/js/lib/materialize.js"></script>
+<script type="text/javascript" src="static/js/lib/materialize.min.js"></script>
-<script type="text/javascript" src="static/js/lib/color-thief.min.js"></script>
 <script type="text/javascript" src="static/js/lib/iscroll-min.js"></script>
 
 <!-- Piwik tracking -->

php/header.php

@@ -14,6 +14,6 @@
 <meta property="og:title" content="Zöff">
 <meta property="og:description" content="The shared YouTube radio.">
 <meta property="og:type" content="website">
-<link type="text/css" rel="stylesheet" href="static/css/materialize.css"  media="screen,projection"/>
+<link type="text/css" rel="stylesheet" href="static/css/materialize.min.css"  media="screen,projection"/>
 <link rel="stylesheet" type="text/css" href="static/css/style.css" title="Default" />
 <link rel="icon" type="image/png" href="static/images/favicon.png"/>

php/nochan.php

@@ -163,7 +163,7 @@ if(isset($_GET['chan'])){
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
-    <script type="text/javascript" src="static/js/lib/materialize.js"></script>
+    <script type="text/javascript" src="static/js/lib/materialize.min.js"></script>
     <script type="text/javascript" src="static/js/nochan.js"></script>
 	  <noscript><p><img src="//zoff.no/analyse/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 	</body>

server/server.js

@@ -303,6 +303,7 @@ io.on('connection', function(socket){
   			if(lists[coll].length/2 <= docs[0]["skips"].length+1 && !contains(docs[0]["skips"], guid))
   			{
   				change_song(coll);
+          socket.emit("toast", "skip");
   			}else if(!contains(docs[0]["skips"], guid)){
   				db.collection(coll).update({views:{$exists:true}}, {$push:{skips:guid}}, function(err, d){
             socket.emit("toast", (Math.ceil(lists[coll].length/2) - docs[0]["skips"].length-1) + " more are needed to skip!");

static/css/style.css

@@ -76,48 +76,10 @@ left: initial;
 display: inline;
 }
 
-
-.title-container{
-    position: absolute;
-    margin-top: 64px;
-    width: 99%;
-    left: 0;
-}
 .navbar-fixed {
     height: 128px;
 }
 
-@media only screen and (max-width: 600px){
-    .navbar-fixed, #nav, .control-list{
-        position: relative !important;
-    }
-}
-
-@media only screen and (min-width: 992px){
-    .navbar-fixed {
-        height: 64px;
-    }
-    nav .zbrand {
-        display: inline-block;
-    }
-    .title-container{
-        position: initial;
-        margin-top: initial;
-        width: 65%;
-        width: calc(90% - 256px - 130px);
-        left: initial;
-    }
-    .title-container li {
-      width: 84%;
-    }
-    #playlist{
-        padding:0px 15px;
-        overflow: hidden;
-        height: 90%;
-        height: calc(100% - 64px);
-    }
-}
-
 .fullwidth{
     width:100%;
 }
@@ -251,16 +213,19 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 
 .title-container{
-    padding-left: 30px;
+    position: absolute;
-    display: inline-block;
+    display: block;
-    height: 100%;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+    left: 0;
 }
 
 .title-container li{
     height: 64px;
     height:100%;
     padding: 0 15px;
+    width: 100%;
 }
 
 .search-container{
@@ -375,7 +340,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 .add-many i{ line-height: 36px !important;}
 #results{
-    background-color: rgba(0,0,0,0.6);
+    background-color: rgba(0,0,0,0.8);
     margin-top: -27px;
     max-height: 600px;
     overflow: overlay;
@@ -579,7 +544,86 @@ hide mdi-action-visibility mdi-action-visibility-off
 {
     height:100%;
     background-color:rgba(0,0,0,0.5);
-    /*-webkit-transition: width 1s ease;
-    transition: width 1s ease;*/
 }
 
+
+/***************************************************************************
+****************************************************************************
+********************* Screen size specific rules ***************************
+****************************************************************************
+***************************************************************************/
+
+
+
+@media only screen and (max-width: 600px){
+    .navbar-fixed, #nav{
+        position: relative;
+    }
+    .control-list{
+        position: absolute !important;
+        width: 120px;  
+    }
+    .control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 5px;}
+
+    nav .zbrand{
+        -webkit-transform:initial;
+        transform: initial;
+        display: block;
+        max-width: initial;
+        width: 70%;
+        width: calc(100% - 100px);
+    }
+
+    .title-container{
+        background-color: rgba(0,0,0,0.1);
+        display: inline-block;
+    }
+    .title-container li {
+        width: 100%;
+    }
+
+    #results{
+        background-color: #000;
+        margin-top:56px;
+    }
+    .result{
+        margin: 0;
+        width: 99%;
+    }
+    .result .search-title{
+        white-space: nowrap;
+    }
+    .result img {
+        margin: 25px 10px;
+        height: 50px;
+    }
+    .result .add-many{
+        margin-top: 15px;
+    }
+}
+
+@media only screen and (min-width: 992px){
+    .navbar-fixed {
+        height: 64px;
+    }
+    nav .zbrand {
+        display: inline-block;
+    }
+    .title-container{
+        position: initial;
+        display: inline-block;
+        margin-top: initial;
+        width: 65%;
+        width: calc(90% - 256px - 130px);
+        left: initial;
+    }
+    .title-container li {
+      width: 84%;
+    }
+    #playlist{
+        padding:0px 15px;
+        overflow: hidden;
+        height: 90%;
+        height: calc(100% - 64px);
+    }
+} 

static/js/admin.js

@@ -4,6 +4,7 @@ var pass_corr = "";
 
 socket.on("toast", function(msg)
 {
+	console.log("Got message from server: "+msg);
 	pass_corr = "correct";
 	switch(msg) {
 		case "addedsong":
@@ -27,6 +28,9 @@ socket.on("toast", function(msg)
 		case "alreadyvoted":
 	        msg=rnd(["You can't vote twice on that song!", "I see you have voted on that song before", "One vote per person!", "I know you want to hear your song, but have patience!", "I'm sorry, but I can't let you vote twice, Dave."])
 	        break;
+	    case "skip":
+			msg=rnd(["The song was skipped", "I have skipped a song", "Skipped to the beat", "Skipmaster3000", "They see me skippin', they hatin'"])
+			break;
 		case "listhaspass":
 			msg=rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"])
 			break;

static/js/youtube.js

@@ -97,7 +97,6 @@ $(document).ready(function()
     });
 	$('#settings-close').sideNav('hide');
 
-	colorThief = new ColorThief();
 	window.mobilecheck = function() {
 	var check = false;
 	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera);
@@ -214,7 +213,7 @@ function getTitle(titt, v)
 	var title= decodeURIComponent(titt);
 	var elem = document.getElementById('song-title');
 
-	document.title = title + " • Zöff";
+	document.title = title + " • Zöff / "+chan;
 		elem.innerHTML = title;
 		document.getElementById('viewers').innerHTML = v + " " + outPutWord;
 		elem.title = title + " • " + v + " " + outPutWord;
@@ -253,19 +252,9 @@ function readyLooks()
 }
 
 function setBGimage(id){
-	if(!window.mobilecheck()){
+	var hsl=[getRandomInt(0,360), getRandomInt(60,80)]
-		/*var bg = $(".thumb.lthumb")[0]; //new Image();
+	var colorTxt = "hsl("+hsl[0]+", "+hsl[1]+"%, 40%);";
-		bg.src = "http://i.ytimg.com/vi/"+id+"/mqdefault.jpg";
+	$("body").css("background-color", colorTxt);
-		var color = colorThief.getColor(bg, 10);
-		var hsl = rgbToHsl(color);*/
-		var hsl=[getRandomInt(0,360), getRandomInt(20,50)]
-		var colorTxt = "hsla("+hsl[0]+", "+hsl[1]+"%, 20%, 1);";
-		$("body").css("background-color", colorTxt);
-	}else if(window.mobilecheck()){
-		$("#mobile-banner").css("background-image", "url(http://img.youtube.com/vi/"+id+"/hqdefault.jpg)");
-		$("#mobile-banner").css("width",$(window).width());
-	}
-
 }
 
 function notifyUser(id, title) {