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
cloud/static/assets/js/layout.min.js vendored
View File

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

23
src/scripts/layout.js
View File

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

43
src/styles/_navbar.sass
View File

@@ -83,7 +83,16 @@ nav.navbar
transition: none transition: none
display: none display: none
#navbarNav #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 visibility: hidden
.dropdown-toggle::after .dropdown-toggle::after
display:none !important display:none !important
@@ -144,6 +153,7 @@ nav.navbar
list-style: none list-style: none
background-color: #fff background-color: #fff
background-clip: padding-box background-clip: padding-box
box-shadow: 0px 4px 4px 0px hsla(0, 0%, 80%, 0.25)
.dropdown:hover .dropdown:hover
background: none background: none
&>.dropdown-menu &>.dropdown-menu
@@ -162,30 +172,39 @@ nav.navbar
outline: none outline: none
#searchNav #searchNav
background-color: #fff display: flex
position: absolute
display: none
align-items: center align-items: center
justify-content: center justify-content: center
width: calc(100% - 40px) background-color: #fff
max-height: 56px max-height: 56px
position: absolute
width: calc(100% - 40px)
z-index: 1001 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) +media-breakpoint-up(md)
width: calc(100% - 25px) width: calc(100% - 25px)
&.active &.hidden
display: flex 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 .search-container
position: relative position: relative
max-width: 560px max-width: 560px
width: 100% width: 100%
input input
padding: 8px 20px 8px 46px padding: 11px 20px 11px 46px
color: #4d4e53 color: #4d4e53
box-shadow: none box-shadow: none
border: 1px solid #bebebe border: 1px solid #e5e5e5
border-radius: 4px border-radius: 4px
border-bottom-color: none border-bottom-color: none
background-color: #fff background-color: #fcfcfc
font-size: 18px font-size: 18px
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
width: 100% width: 100%
@@ -193,13 +212,13 @@ nav.navbar
.search-icon .search-icon
cursor: pointer cursor: pointer
position: absolute position: absolute
top: 11px top: 14px
left: 11px left: 11px
#searchCloseButton #searchCloseButton
cursor: pointer cursor: pointer
position: absolute position: absolute
right: 16px right: 16px
top: 9px top: 12px
// #search-overlay.active { // #search-overlay.active {
// opacity: 1; // opacity: 1;
// visibility: visible; // visibility: visible;

2
src/templates/layout.pug
View File

@@ -94,7 +94,7 @@ html(lang="en")
span span
span span
//- Search Bar //- Search Bar
#searchNav #searchNav.hidden
span.search-container span.search-container
input#cloud-search(type="text", placeholder="Search Blender Cloud") input#cloud-search(type="text", placeholder="Search Blender Cloud")
i.search-icon.pi-search i.search-icon.pi-search

13
static/assets/img/icons/icon-close-button.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
<defs>
<polygon id="icon-close-button-a" points="14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="icon-close-button-b" fill="#fff">
<use xlink:href="#icon-close-button-a"/>
</mask>
<g fill="#111" mask="url(#icon-close-button-b)">
<rect width="24" height="24" transform="translate(-5 -5)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B