From 0ad6bcdd5f827edaf65db3c1edc3b9faaf84db80 Mon Sep 17 00:00:00 2001 From: kanishkarj Date: Tue, 13 Mar 2018 13:05:05 +0530 Subject: [PATCH] UI improvement of search box during transition on scrolling Fluid resizing of search bar on scrolling. Fixes #205 Reported-by:@avinashbharti97 --- _includes/nav.html | 20 ++++++++++++++------ css/airspace.css | 23 ++++++++++++++++++----- css/airspace.minified.css | 2 +- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/_includes/nav.html b/_includes/nav.html index ed54e9f1..6dc478ee 100755 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -11,12 +11,20 @@ if(expanded){ condenser();} }); + $(document).on("scroll", function () { + if ($(document).scrollTop() > 10) { + $("#searchForm").removeClass("searchForm-large").addClass("searchForm-small"); + } + else { + $("#searchForm").removeClass("searchForm-small").addClass("searchForm-large"); + } + }); $("#searchForm").click( function(event){ if(expanded){ event.stopPropagation();} }); var searchbar = $("#searchForm").offset(); - var menubar = $("#menuBar").offset();var distance1 = menubar.left -(searchbar.left + 200); + var menubar = $("#menuBar").offset();var distance1 = menubar.left -(searchbar.left + 200); if((searchbar.left +200)>menubar.left){ var distance= distance1 + 13 + searchbar.left; $("#searchForm").css("left", distance.toString() + "px"); @@ -52,8 +60,8 @@ document.getElementById("searchForm").style.width="53%"; document.getElementById("SearchBar").style.width="90%"; document.getElementById("menuBar").style.visibility="hidden"; - - setTimeout(function(){ + + setTimeout(function(){ document.getElementById("closebtn").style.visibility="visible"; document.getElementById("closebutton").style.height="14px"; document.getElementById("closebutton").style.width="14px"; @@ -65,13 +73,13 @@ document.getElementById("menuBar").style.visibility="visible"; document.getElementById("searchForm").style.width="200px"; document.getElementById("SearchBar").style.width="75%"; - setTimeout(function(){ + setTimeout(function(){ document.getElementById("closebutton").style.height="0px"; document.getElementById("closebutton").style.width="0px"; document.getElementById("closebtn").style.visibility="hidden"; expanded = false;}, 300); } - + };
@@ -98,7 +106,7 @@