From c7de4bd5e3cbb8a54e99ce02208fa023acdf7570 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Fri, 27 Jul 2018 15:56:03 +0200 Subject: [PATCH] Scaling fixes for whole site, and prettier search-loader --- server/public/assets/css/style.css | 30 +++++-------------- server/public/assets/js/channel.js | 2 +- server/public/assets/js/search.js | 11 +++++-- .../public/partials/channel/header.handlebars | 30 +++++++++---------- 4 files changed, 32 insertions(+), 41 deletions(-) diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index 515d6c83..714552fb 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -1740,7 +1740,7 @@ nav .zbrand.channel-logo-container { .main{ width: 100%; - max-width:99%; + max-width:100%; margin: 0px; padding:0px; } @@ -1759,10 +1759,10 @@ nav .zbrand.channel-logo-container { .title-container{ position: initial; display: inline-block; - overflow: hidden; - width: 40%; - height: 100%; - left: 0; + margin-top: initial; + width: 65%; + width: calc(90% - 180px - 130px); + left: 25%; } .title-container li{ @@ -3439,15 +3439,6 @@ nav ul li:hover, nav ul li.active { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); } - #search_loader{ - margin-left: -36px; - margin-top: 0; - height: 56px; - position: absolute; - right: 15px; - top: 50px; - } - .title-container{ background-color: rgba(0,0,0,0.1); display: block; @@ -3616,14 +3607,7 @@ nav ul li:hover, nav ul li.active { /*top:-22px;*/ /*left:100px;*/ } - .title-container{ - position: initial; - display: inline-block; - margin-top: initial; - width: 65%; - width: calc(90% - 256px - 130px); - left: 25%; - } + .title-container li { /*width: 71%;*/ } @@ -3641,7 +3625,7 @@ nav ul li:hover, nav ul li.active { height: 90%; height: calc(100vh - 64px); overflow: hidden; - padding-right: 0px; + /*padding-right: 0px;*/ /*padding:0px 0px 0px 0px;*/ } } diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index 101ca6f0..4a64846d 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -420,7 +420,7 @@ var Channel = { if(start){ add_width = window.innerWidth * 0.15; } - var test_against_width = window.innerWidth - document.getElementsByClassName("control-list")[0].offsetWidth - add_width - 33; + var test_against_width = window.innerWidth - document.getElementsByClassName("control-list")[0].offsetWidth - add_width - 11; title_width = test_against_width; document.getElementsByClassName("title-container")[0].style.width = title_width + "px"; } else { diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index d6df5de4..74a6e235 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -54,7 +54,8 @@ var Search = { var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; } - + Helper.addClass(document.querySelector("#search-btn .material-icons"), "hide"); + Helper.removeClass("#search_loader", "hide"); Helper.addClass(".search_loader_spinner", "active"); //Helper.removeClass(".search_results", "hide"); //Helper.css(".results-tabs", "display", "none"); @@ -74,6 +75,8 @@ var Search = { //Helper.css(".results-tabs", "display", "block"); //$("").appendTo($("#results")).show("blind", 83.33); document.getElementById("results").insertAdjacentHTML("beforeend", "
"+empty_results_html+"
"); + Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide"); + Helper.addClass("#search_loader", "hide"); Helper.removeClass(".search_loader_spinner", "active"); } else if(response.items){ @@ -158,7 +161,8 @@ var Search = { document.querySelectorAll(".pagination-results a")[0].setAttribute("data-original-search", search_input); document.querySelectorAll(".pagination-results a")[1].setAttribute("data-original-search", search_input); //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); - + Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide"); + Helper.addClass("#search_loader", "hide"); Helper.removeClass(".search_loader_spinner", "active"); if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { Helper.css(".search_results", "display", "block"); @@ -174,6 +178,8 @@ var Search = { if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { Helper.css(".search_results", "display", "block"); } + Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide"); + Helper.addClass("#search_loader", "hide"); Helper.removeClass(".search_loader_spinner", "active"); } } @@ -207,6 +213,7 @@ var Search = { //var secs=Search.durationToSeconds(duration); var secs = duration; var _temp_duration = Helper.secondsToOther(secs); + if(longsongs == undefined) longsongs = true; if((longsongs != undefined && !longsongs) || secs<720){ var title=song.title; if(title.indexOf(song.user.username) == -1) { diff --git a/server/public/partials/channel/header.handlebars b/server/public/partials/channel/header.handlebars index 9e85b715..55724b3c 100644 --- a/server/public/partials/channel/header.handlebars +++ b/server/public/partials/channel/header.handlebars @@ -17,24 +17,24 @@