diff --git a/cloud/static/assets/js/layout.min.js b/cloud/static/assets/js/layout.min.js index 8288c55..0361244 100644 --- a/cloud/static/assets/js/layout.min.js +++ b/cloud/static/assets/js/layout.min.js @@ -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') } \ No newline at end of file diff --git a/src/scripts/layout.js b/src/scripts/layout.js index 8288c55..0361244 100644 --- a/src/scripts/layout.js +++ b/src/scripts/layout.js @@ -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') } \ No newline at end of file diff --git a/src/styles/_navbar.sass b/src/styles/_navbar.sass index 098cc30..4edfc8a 100644 --- a/src/styles/_navbar.sass +++ b/src/styles/_navbar.sass @@ -83,7 +83,16 @@ nav.navbar transition: none display: none #navbarNav - &.invisible + animation-timing-function: cubic-bezier(0.4,0,0.2,1) + animation-fill-mode: backwards + opacity: 1 + transition: opacity .15s ease-in + visibility: visible + &.hidden + animation-fill-mode: backwards + animation-timing-function: cubic-bezier(0.4,0,0.2,1) + opacity: 0 + transition: visibility 0s .15s, opacity .15s ease-in visibility: hidden .dropdown-toggle::after display:none !important @@ -144,6 +153,7 @@ nav.navbar list-style: none background-color: #fff background-clip: padding-box + box-shadow: 0px 4px 4px 0px hsla(0, 0%, 80%, 0.25) .dropdown:hover background: none &>.dropdown-menu @@ -162,30 +172,39 @@ nav.navbar outline: none #searchNav - background-color: #fff - position: absolute - display: none + display: flex align-items: center justify-content: center - width: calc(100% - 40px) + background-color: #fff max-height: 56px + position: absolute + width: calc(100% - 40px) z-index: 1001 + animation-timing-function: cubic-bezier(0.4,0,0.2,1) + animation-fill-mode: backwards + opacity: 1 + transition: opacity .15s ease-in + visibility: visible +media-breakpoint-up(md) width: calc(100% - 25px) - &.active - display: flex + &.hidden + animation-fill-mode: backwards + animation-timing-function: cubic-bezier(0.4,0,0.2,1) + opacity: 0 + transition: visibility 0s .15s, opacity .15s ease-in + visibility: hidden .search-container position: relative max-width: 560px width: 100% input - padding: 8px 20px 8px 46px + padding: 11px 20px 11px 46px color: #4d4e53 box-shadow: none - border: 1px solid #bebebe + border: 1px solid #e5e5e5 border-radius: 4px border-bottom-color: none - background-color: #fff + background-color: #fcfcfc font-size: 18px transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out width: 100% @@ -193,13 +212,13 @@ nav.navbar .search-icon cursor: pointer position: absolute - top: 11px + top: 14px left: 11px #searchCloseButton cursor: pointer position: absolute right: 16px - top: 9px + top: 12px // #search-overlay.active { // opacity: 1; // visibility: visible; diff --git a/src/templates/layout.pug b/src/templates/layout.pug index 23bf255..060dbcf 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -94,7 +94,7 @@ html(lang="en") span span //- Search Bar - #searchNav + #searchNav.hidden span.search-container input#cloud-search(type="text", placeholder="Search Blender Cloud") i.search-icon.pi-search diff --git a/static/assets/img/icons/icon-close-button.svg b/static/assets/img/icons/icon-close-button.svg new file mode 100644 index 0000000..1a4ff13 --- /dev/null +++ b/static/assets/img/icons/icon-close-button.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +