diff --git a/cloud/static/assets/js/layout.min.js b/cloud/static/assets/js/layout.min.js index 646841a..8288c55 100644 --- a/cloud/static/assets/js/layout.min.js +++ b/cloud/static/assets/js/layout.min.js @@ -1,26 +1,56 @@ +/* Variables + ================================================================== */ +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 /* Interactions ================================================================== */ -$('#searchButton').click(function(){ - showSearch() -}) -$('#searchCloseButton').click(function(){ - closeSearch() -}) - +searchButton.addEventListener('click', showSearch) +searchCloseButton.addEventListener('click', closeSearch) /* Functions ================================================================== */ function showSearch() { - $('#searchbarNav').addClass('active') - $('#searchbarNav input').focus() - $('#navbarNav').addClass('invisible') + searchToggleStatus = true + searchNav.classList.add('active') + searchNavInput.focus() + navbarNav.classList.add('invisible') + profileMenu.classList.add('visible') // $('#search-overlay').addClass('active') + // if (searchToggleStatus == true) { + // // $(document.body).click(function() { + // // console.log('detect click outside'); + // // searchToggleStatus = false + // // }) + // console.log(searchToggleStatus); + // console.log('detect click outside'); + // searchToggleStatus = false + // console.log(searchToggleStatus); + // } else { + // console.log(searchToggleStatus); + // console.log('not detecting clicks'); + + // } + // $(document.body).click(function () { + // console.log('detected click outside'); + // searchToggleStatus == false + // }) else { + // } } function closeSearch() { - $('#searchbarNav').removeClass('active') - $('#navbarNav').removeClass('invisible') + console.log('close button working') + searchNav.classList.remove('active') + navbarNav.classList.remove('invisible') + 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 646841a..8288c55 100644 --- a/src/scripts/layout.js +++ b/src/scripts/layout.js @@ -1,26 +1,56 @@ +/* Variables + ================================================================== */ +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 /* Interactions ================================================================== */ -$('#searchButton').click(function(){ - showSearch() -}) -$('#searchCloseButton').click(function(){ - closeSearch() -}) - +searchButton.addEventListener('click', showSearch) +searchCloseButton.addEventListener('click', closeSearch) /* Functions ================================================================== */ function showSearch() { - $('#searchbarNav').addClass('active') - $('#searchbarNav input').focus() - $('#navbarNav').addClass('invisible') + searchToggleStatus = true + searchNav.classList.add('active') + searchNavInput.focus() + navbarNav.classList.add('invisible') + profileMenu.classList.add('visible') // $('#search-overlay').addClass('active') + // if (searchToggleStatus == true) { + // // $(document.body).click(function() { + // // console.log('detect click outside'); + // // searchToggleStatus = false + // // }) + // console.log(searchToggleStatus); + // console.log('detect click outside'); + // searchToggleStatus = false + // console.log(searchToggleStatus); + // } else { + // console.log(searchToggleStatus); + // console.log('not detecting clicks'); + + // } + // $(document.body).click(function () { + // console.log('detected click outside'); + // searchToggleStatus == false + // }) else { + // } } function closeSearch() { - $('#searchbarNav').removeClass('active') - $('#navbarNav').removeClass('invisible') + console.log('close button working') + searchNav.classList.remove('active') + navbarNav.classList.remove('invisible') + 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 1f6c5e2..098cc30 100644 --- a/src/styles/_navbar.sass +++ b/src/styles/_navbar.sass @@ -38,20 +38,17 @@ nav.navbar box-shadow: none li:last-of-type // profile menu + z-index: 1002 .dropdown-menu right: 0 left: auto - min-width: 10rem + top: 54px padding: .5rem 0 - margin: -1px 0 0 - font-size: 1rem - color: #111 - text-align: left - list-style: none - background-color: #fff - background-clip: padding-box - border: 1px solid rgba(0,0,0,.15) - border-radius: .25rem + margin: .125rem 0 0 + &.visible + visibility: visible + li a + padding: 0 15px 0 12px li:hover background-color: #f8f9fa .dropdown ul.dropdown-menu li a @@ -67,7 +64,7 @@ nav.navbar +media-breakpoint-up(lg) padding: 6px 18px &:hover - color: $muted + color: $primary .navbar-toggler border: 0 display: block @@ -92,17 +89,19 @@ nav.navbar display:none !important &.show padding-bottom: 75vh - .search-icon - display: flex - align-items: center - justify-content: center - padding: 0 8px - +media-breakpoint-up(lg) - padding: 0 16px + .search-icon + display: flex + align-items: center + justify-content: center + padding: 0 8px + +media-breakpoint-up(lg) + padding: 0 16px .pi-search &::before color: rgba(17,17,17,0.75) font-size: 16px + &:hover + color: $primary .nav-notifications display: flex align-items: center @@ -129,17 +128,30 @@ nav.navbar display: block .nav-notifications-icon color: rgba(17,17,17,0.75) + &:hover + color: $primary .gravatar width: 32px border-radius: 50% .dropdown-menu margin-top: -1px - .dropdown:hover>.dropdown-menu - display: block + border: 0 + border-radius: 0 0 4px 4px + box-shadow: none + font-size: 1rem + color: #111 + text-align: left + list-style: none + background-color: #fff + background-clip: padding-box + .dropdown:hover + background: none + &>.dropdown-menu + display: block .dropdown-item color: #111 font-size: 18px - padding: 4px 8px + padding: 0px 15px i padding-right: 8px #userDropdown @@ -149,7 +161,7 @@ nav.navbar padding-right: 0 outline: none -#searchbarNav +#searchNav background-color: #fff position: absolute display: none @@ -167,11 +179,11 @@ nav.navbar max-width: 560px width: 100% input - padding: 8px 20px + padding: 8px 20px 8px 46px color: #4d4e53 box-shadow: none - border: 1px solid #999 - border-radius: 4 + border: 1px solid #bebebe + border-radius: 4px border-bottom-color: none background-color: #fff font-size: 18px @@ -179,13 +191,15 @@ nav.navbar width: 100% max-width: 560px .search-icon + cursor: pointer position: absolute top: 11px - right: 0px -#searchCloseButton - cursor: pointer - position: absolute - right: 20px + left: 11px + #searchCloseButton + cursor: pointer + position: absolute + right: 16px + top: 9px // #search-overlay.active { // opacity: 1; // visibility: visible; diff --git a/src/templates/layout.pug b/src/templates/layout.pug index f4d99de..23bf255 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -94,13 +94,12 @@ html(lang="en") span span //- Search Bar - #searchbarNav + #searchNav span.search-container - input#cloud-search(type="text", placeholder="Search assets, tutorials...") - a - i.search-icon.pi-search - a#searchCloseButton(ahref="#") - img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt") + input#cloud-search(type="text", placeholder="Search Blender Cloud") + i.search-icon.pi-search + a#searchCloseButton(ahref="#") + img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt") //- Links #navbarNav.collapse.navbar-collapse.justify-content-end ul.navbar-nav