From 97faaa922b714b4c91e505f844fbe380d10fca41 Mon Sep 17 00:00:00 2001 From: "Nicolas A. Tonne" Date: Thu, 30 Apr 2015 21:46:26 +0200 Subject: [PATCH] Mobile styling, some toasts, more colors, now uses minified versions --- index.php | 2 +- php/footer.php | 3 +- php/header.php | 2 +- php/nochan.php | 2 +- server/server.js | 1 + static/css/style.css | 132 ++++++++++++++++++++++++++++--------------- static/js/admin.js | 4 ++ static/js/youtube.js | 19 ++----- 8 files changed, 101 insertions(+), 64 deletions(-) diff --git a/index.php b/index.php index d1257ca9..7303142a 100755 --- a/index.php +++ b/index.php @@ -19,7 +19,7 @@ zöff diff --git a/php/footer.php b/php/footer.php index 7366edc3..9a0f0624 100755 --- a/php/footer.php +++ b/php/footer.php @@ -68,8 +68,7 @@ - - + diff --git a/php/header.php b/php/header.php index 38142c70..fad59c64 100755 --- a/php/header.php +++ b/php/header.php @@ -14,6 +14,6 @@ - + \ No newline at end of file diff --git a/php/nochan.php b/php/nochan.php index dcf54a71..699e84c6 100755 --- a/php/nochan.php +++ b/php/nochan.php @@ -163,7 +163,7 @@ if(isset($_GET['chan'])){ - + diff --git a/server/server.js b/server/server.js index 015ea17f..47b9703c 100755 --- a/server/server.js +++ b/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!"); diff --git a/static/css/style.css b/static/css/style.css index a282484d..228c5808 100755 --- a/static/css/style.css +++ b/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; - display: inline-block; - height: 100%; + position: absolute; + display: block; 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); + } +} \ No newline at end of file diff --git a/static/js/admin.js b/static/js/admin.js index 1e0a6ef1..d9a7a3f2 100755 --- a/static/js/admin.js +++ b/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; diff --git a/static/js/youtube.js b/static/js/youtube.js index 4ead0df2..40d37c63 100755 --- a/static/js/youtube.js +++ b/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 bg = $(".thumb.lthumb")[0]; //new Image(); - bg.src = "http://i.ytimg.com/vi/"+id+"/mqdefault.jpg"; - 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()); - } - + var hsl=[getRandomInt(0,360), getRandomInt(60,80)] + var colorTxt = "hsl("+hsl[0]+", "+hsl[1]+"%, 40%);"; + $("body").css("background-color", colorTxt); } function notifyUser(id, title) {