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 f021808d8b
commit c7de4bd5e3
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{
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;*/
}
}

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

@@ -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 {

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=";
}
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");
//$("<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>");
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) {

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

@@ -17,24 +17,24 @@
</li>
</ul>
<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">
<div class="nav-btn" id="search-btn">
<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>
</li>
{{#if client}}