Merge pull request #302 from canjs/fix-sidebar-animation

Fix opening search animation

Author: chasenlehara

static/layout.less

@@ -12,17 +12,18 @@
   position: fixed;
   width: @sidebar-width;
   min-width: 0;
-  transition: min-width 0.4s ease;
+  transition: min-width @transition-speed ease;
   @media screen and (min-width: @breakpoint){
     flex-shrink: 0;
     padding: 0px;
     position: relative;
     width: auto;
+
+    &.search-showing {
+      min-width: 300px !important;
+    }
   }
 }
-#left.search-showing {
-  min-width: 300px !important;
-}
 #right {
   height: 100%;
   min-height: 100%;

static/search.js

@@ -30,6 +30,7 @@ var Search = Control.extend({
 		keyboardActiveClass: "keyboard-active",
 
 		//search options
+		searchAnimation: 250,// matches @transition-speed in variables.less
 		searchTimeout: 400,
 
 		localStorageKeyPrefix: "search",
@@ -85,7 +86,7 @@ var Search = Control.extend({
 
 					//show the search input when the search engine is ready
 					if(self.options.animateInOnStart){
-						self.$inputWrap.fadeIn(400);
+						self.$inputWrap.fadeIn(self.options.searchAnimation);
 					}else{
 						self.$inputWrap.show();
 					}
@@ -472,11 +473,8 @@ var Search = Control.extend({
 	},
 
 	//cancel search on cancel click
-	".search-icon-cancel click": function(el, ev){
-		ev.preventDefault();
-		ev.stopPropagation();
-		this.clear();
-	},
+	".search-icon-cancel click": "clear",
+	".search-icon-cancel touchend": "clear",
 
 	// ---- END EVENTS ---- //
 
@@ -573,7 +571,11 @@ var Search = Control.extend({
 	// function clear
 	// - clears & focuses the input
 	// - unsets the search state
-	clear: function(){
+	clear: function(element, event) {
+		if (event) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
 		this.$input.val("").trigger("focus");
 		this.unsetSearchState();
 	},
@@ -599,7 +601,7 @@ var Search = Control.extend({
 			this.deactivateResult();
 			$('#left').removeClass('search-showing');
 			this.$resultsContainer.stop().addClass("is-hiding").fadeOut({
-				duration: 400,
+				duration: this.options.searchAnimation,
 				complete: function(){
 					self.$resultsContainer.removeClass("is-hiding");
 					if(!self.$resultsContainer.is(".is-showing")){
@@ -626,7 +628,7 @@ var Search = Control.extend({
 			}
 			this.$resultsContainerParent.stop().addClass("search-active");
 			this.$resultsContainer.addClass("is-showing").fadeIn({
-				duration: 400,
+				duration: this.options.searchAnimation,
 				complete: function(){
 					if(!self.$resultsContainer.is(".is-hiding")){
 						self.$resultsContainer.removeClass("is-showing");

static/search.less

@@ -6,13 +6,12 @@
 	cursor:pointer;
 
 	.search-wrap{
+		display: flex;
 		position: relative;
-		padding: 0 1.5em;
+		top: 1px;
+
 		.search-icon{
 			display: block;
-			position: absolute;
-			top: 1px;
-			left: 0;
 			height: 1em;
 			width: 1em;
 			font-size: 1em;
@@ -22,30 +21,26 @@
 			background-repeat: no-repeat;
 		}
 		.search-icon-cancel{
-			display: block;
-			position: absolute;
-			right: 0;
+			position: relative;
 			height: 1em;
 			width: 1em;
 			font-size: .8em;
-			top: 0.25em;
+			top: 0.125em;
 			cursor: pointer;
 			background-color: @code-color;
 			background-image: url(img/icon-x-white.svg);
 			background-size: cover;
 			background-repeat: no-repeat;
 			display:none;
 		}
-		
+
 		.search{
-			transition: width 0.4s ease;
+			transition: width @transition-speed ease;
 			background: @code-color;
 			color: #ffffff;
 			border: none;
-			padding: 0;
-			position: relative;
-			bottom: 2px;
-			width: 40px;
+			padding: 0 .5em;
+			flex: 1;
 			.placeholder(@gray);
 			&:focus{
 				outline:none;
@@ -55,19 +50,7 @@
 		&.has-value .search-icon-cancel{
 			display:block;
 		}
-		@media screen and (max-width: @breakpoint) {
-			&.has-value{
-				width: 200px;
-			}
-		}
 	}
-	@media screen and (min-width: @breakpoint) {
-		display: block;
-	}
-}
-
-#left.search-showing .search-bar .search-wrap .search {
-	width: 100%;
 }
 
 .bottom-left{
@@ -82,6 +65,7 @@
 		left: 0;
 		overflow-y: auto;
 		padding: 2em 0;
+		transition: -webkit-backdrop-filter backdrop-filter background @transition-speed ease;
 		z-index: 1;
 		.search-cancel{
 			color: @code-color;
@@ -90,9 +74,6 @@
 			padding: .5em;
 			font-size: 1em;
 			line-height: 1;
-			position: absolute;
-			top: 0;
-			right: 0;
 		}
 
 		ul{
@@ -157,3 +138,11 @@
 		position:relative;
 	}
 }
+
+@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
+	.bottom-left .search-results-container {
+		-webkit-backdrop-filter: @backdrop-blur;
+		backdrop-filter: @backdrop-blur;
+		background: rgba(100%, 100%, 100%, .65);
+	}
+}

static/sidebar.less

@@ -1,18 +1,3 @@
-.search-bar {
-	background: @code-color;
-	padding: @gutter @gutter*2;
-	height: 48px;
-	p {
-		border: none;
-		margin: 0px;
-		color: white;
-		font-weight: 300;
-	}
-	@media screen and (min-width: @breakpoint) {
-		display: block;
-	}
-}
-
 // ----- SOCIAL BUTTONS FOR MOBILE VIEW -----
 ul.social-side{
 	margin: 0;

static/variables.less

@@ -18,3 +18,6 @@
 
 /*----- TYPE -----*/
 @font-weight-heading: 500;
+
+/*----- OTHER -----*/
+@backdrop-blur: saturate(180%) blur(20px);

templates/search-bar.mustache

@@ -1,14 +1,15 @@
 <div class="search-bar">
 	<div class="search-wrap" style="display:none;">
 		<span class="search-icon"></span>
-		<span class="search-icon-cancel"></span>
 		<input
 			type="text"
+			size="6"
 			class="search"
 			placeholder="Search"
 			autocomplete="off"
 			autocorrect="off"
 			autocapitalize="none"
 			spellcheck="false"/>
+			<span class="search-icon-cancel"></span>
 	</div>
 </div>