KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scaling fixes for whole site, and prettier search-loader

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-07-27 15:56:03 +02:00
parent e20dd72116
commit 96a56c158d
4 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
server/public/assets/css/style.css
View File

@@ -1740,7 +1740,7 @@ nav .zbrand.channel-logo-container {
.main{ .main{
width: 100%; width: 100%;
max-width:99%; max-width:100%;
margin: 0px; margin: 0px;
padding:0px; padding:0px;
} }
@@ -1759,10 +1759,10 @@ nav .zbrand.channel-logo-container {
.title-container{ .title-container{
position: initial; position: initial;
display: inline-block; display: inline-block;
overflow: hidden; margin-top: initial;
width: 40%; width: 65%;
height: 100%; width: calc(90% - 180px - 130px);
left: 0; left: 25%;
} }
.title-container li{ .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); 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{ .title-container{
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
display: block; display: block;
@@ -3616,14 +3607,7 @@ nav ul li:hover, nav ul li.active {
/*top:-22px;*/ /*top:-22px;*/
/*left:100px;*/ /*left:100px;*/
} }
.title-container{
position: initial;
display: inline-block;
margin-top: initial;
width: 65%;
width: calc(90% - 256px - 130px);
left: 25%;
}
.title-container li { .title-container li {
/*width: 71%;*/ /*width: 71%;*/
} }
@@ -3641,7 +3625,7 @@ nav ul li:hover, nav ul li.active {
height: 90%; height: 90%;
height: calc(100vh - 64px); height: calc(100vh - 64px);
overflow: hidden; overflow: hidden;
padding-right: 0px; /*padding-right: 0px;*/
/*padding:0px 0px 0px 0px;*/ /*padding:0px 0px 0px 0px;*/
} }
} }

2
server/public/assets/js/channel.js
View File

@@ -420,7 +420,7 @@ var Channel = {
if(start){ if(start){
add_width = window.innerWidth * 0.15; 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; title_width = test_against_width;
document.getElementsByClassName("title-container")[0].style.width = title_width + "px"; document.getElementsByClassName("title-container")[0].style.width = title_width + "px";
} else { } else {

11
server/public/assets/js/search.js
View File

@@ -54,7 +54,8 @@ var Search = {
var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; 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.addClass(".search_loader_spinner", "active");
//Helper.removeClass(".search_results", "hide"); //Helper.removeClass(".search_results", "hide");
//Helper.css(".results-tabs", "display", "none"); //Helper.css(".results-tabs", "display", "none");
@@ -74,6 +75,8 @@ var Search = {
//Helper.css(".results-tabs", "display", "block"); //Helper.css(".results-tabs", "display", "block");
//$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33); //$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);' class='empty-inner-results'>"+empty_results_html+"</div>"); document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);' class='empty-inner-results'>"+empty_results_html+"</div>");
Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide");
Helper.addClass("#search_loader", "hide");
Helper.removeClass(".search_loader_spinner", "active"); Helper.removeClass(".search_loader_spinner", "active");
} else if(response.items){ } 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")[0].setAttribute("data-original-search", search_input);
document.querySelectorAll(".pagination-results a")[1].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); //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"); Helper.removeClass(".search_loader_spinner", "active");
if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { if(document.querySelector("#results_soundcloud").innerHTML.length > 0) {
Helper.css(".search_results", "display", "block"); Helper.css(".search_results", "display", "block");
@@ -174,6 +178,8 @@ var Search = {
if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { if(document.querySelector("#results_soundcloud").innerHTML.length > 0) {
Helper.css(".search_results", "display", "block"); 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"); Helper.removeClass(".search_loader_spinner", "active");
} }
} }
@@ -207,6 +213,7 @@ var Search = {
//var secs=Search.durationToSeconds(duration); //var secs=Search.durationToSeconds(duration);
var secs = duration; var secs = duration;
var _temp_duration = Helper.secondsToOther(secs); var _temp_duration = Helper.secondsToOther(secs);
if(longsongs == undefined) longsongs = true;
if((longsongs != undefined && !longsongs) || secs<720){ if((longsongs != undefined && !longsongs) || secs<720){
var title=song.title; var title=song.title;
if(title.indexOf(song.user.username) == -1) { if(title.indexOf(song.user.username) == -1) {

30
server/public/partials/channel/header.handlebars
View File

@@ -17,24 +17,24 @@
</li> </li>
</ul> </ul>
<ul class="right control-list noselect"> <ul class="right control-list noselect">
<li id="search_loader" class="valign-wrapper">
<div id="search_loader_inner">
<div class="preloader-wrapper small search_loader_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</li>
<li class="search-btn-container"> <li class="search-btn-container">
<div class="nav-btn" id="search-btn"> <div class="nav-btn" id="search-btn">
<i class="material-icons">search</i> <i class="material-icons">search</i>
<div id="search_loader" class="valign-wrapper hide">
<div id="search_loader_inner">
<div class="preloader-wrapper small search_loader_spinner">
<div class="spinner-layer spinner-white-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</li> </li>
{{#if client}} {{#if client}}