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

Update Search Bar. Fix dropdown menus.

Browse Source
This commit is contained in:
Sam Lu
2018-08-04 01:40:27 -05:00
parent bd2c8893dd
commit 0f5c409c04
4 changed files with 133 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
cloud/static/assets/js/layout.min.js vendored
View File

@@ -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')
}

54
src/scripts/layout.js
View File

@@ -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')
}

74
src/styles/_navbar.sass
View File

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

11
src/templates/layout.pug
View File

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