archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Style Searchbar. Add basic fade animations for searchbar and navigation.

Browse Source
This commit is contained in:
Sam Lu
2018-08-06 00:14:10 -05:00
parent 0f5c409c04
commit f876961e1c
5 changed files with 67 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/scripts/layout.js
View File

@@ -4,12 +4,12 @@ var searchToggleStatus = false
/* Selectors
================================================================== */
var searchButton = document.querySelector('#searchButton')
var searchCloseButton = document.querySelector('#searchCloseButton')
var searchNav = document.querySelector('#searchNav')
var searchNavInput = document.querySelector('#searchNav input')
var navbarNav = document.querySelector('#navbarNav')
var profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
var searchButton = document.querySelector('#searchButton'),
searchCloseButton = document.querySelector('#searchCloseButton'),
searchNav = document.querySelector('#searchNav'),
searchNavInput = document.querySelector('#searchNav input'),
navbarNav = document.querySelector('#navbarNav'),
profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
/* Interactions
================================================================== */
@@ -21,11 +21,11 @@ searchCloseButton.addEventListener('click', closeSearch)
================================================================== */
function showSearch() {
searchToggleStatus = true
searchNav.classList.add('active')
searchNav.classList.remove('hidden')
searchNavInput.focus()
navbarNav.classList.add('invisible')
navbarNav.classList.add('hidden')
profileMenu.classList.add('visible')
// $('#search-overlay').addClass('active')
// $('#search-overlay').addClass('visible')
// if (searchToggleStatus == true) {
// // $(document.body).click(function() {
// // console.log('detect click outside');
@@ -48,9 +48,8 @@ function showSearch() {
}
function closeSearch() {
console.log('close button working')
searchNav.classList.remove('active')
navbarNav.classList.remove('invisible')
searchNav.classList.add('hidden')
navbarNav.classList.remove('hidden')
profileMenu.classList.remove('visible')
// $('#search-overlay').removeClass('active')
}