Merge pull request #293 from canjs/286-sidebar-width

286 sidebar width

Author: imaustink

package.json

@@ -46,8 +46,8 @@
     "connect": "^3.5.0",
     "normalize.css": "^5.0.0",
     "q": "^1.4.1",
-    "steal": "^1.5.2",
-    "steal-qunit": "^1.0.1",
+    "steal": "^0.16.44",
+    "steal-qunit": "^0.1.4",
     "testee": "^0.6.0",
     "zombie": "^5.0.5"
   }

static/canjs.js

@@ -28,7 +28,7 @@ var $articleContainer,
 	hasShownSearch = false;
 	init();
 
-	// prevent sidebar from changing width when header hides
+	// prevent sidebar from changing width when header hides		
 	$('#left').css('min-width', $('.top-left').width());
 
 	// Override link behavior

static/layout.less

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

static/search.js

@@ -30,7 +30,6 @@ var Search = Control.extend({
 		keyboardActiveClass: "keyboard-active",
 
 		//search options
-		minSearchLength: 3,
 		searchTimeout: 400,
 
 		localStorageKeyPrefix: "bit-docs-search",
@@ -332,10 +331,10 @@ var Search = Control.extend({
 	searchEngineSearch: function(value){
 		var self = this;
 		return this.searchEngine
-					//run the search
-					.search(this.formatSearchTerm(value))
-					//convert the results into a searchMap subset
-					.map(function(result){ return self.searchMap[result.ref] });
+			//run the search
+			.search(this.formatSearchTerm(value))
+			//convert the results into a searchMap subset
+			.map(function(result){ return self.searchMap[result.ref] });
 	},
 
 	//function formatSearchTerm
@@ -381,7 +380,7 @@ var Search = Control.extend({
 		var value = ev.target.value;
 
 		//hide search if input is empty or less than min length
-		if(!value || !value.length || value.length < this.options.minSearchLength){
+		if(!value || !value.length){
 			this.unsetSearchState();
 			return;
 		}
@@ -396,6 +395,7 @@ var Search = Control.extend({
 				this.selectActiveResult();
 				break;
 			default:
+			
 				if(value !== this.searchTerm){
 					this.searchTerm = value;
 					this.search(value);
@@ -549,6 +549,7 @@ var Search = Control.extend({
 				this.options.onResultsHide();
 			}
 			this.deactivateResult();
+			$('#left').removeClass('search-showing');
 			this.$resultsContainer.stop().addClass("is-hiding").fadeOut({
 				duration: 400,
 				complete: function(){
@@ -580,7 +581,7 @@ var Search = Control.extend({
 				duration: 400,
 				complete: function(){
 					if(!self.$resultsContainer.is(".is-hiding")){
-						self.$resultsContainer.removeClass("is-showing")
+						self.$resultsContainer.removeClass("is-showing");
 						if(self.options.onResultsShown){
 							self.options.onResultsShown();
 						}
@@ -589,6 +590,7 @@ var Search = Control.extend({
 			});
 
 			this.$resultsContainer.scrollTop(0);
+			$('#left').addClass('search-showing');
 		}
 	},
 

static/search.less

@@ -36,14 +36,15 @@
 			background-repeat: no-repeat;
 			display:none;
 		}
-
-
+		
 		.search{
+			transition: width 0.4s ease;
 			background: @code-color;
 			color: #ffffff;
 			border: none;
 			padding: 0;
 			// text-indent: 1.5em;
+			width: 40px;
 			.placeholder(@gray);
 			&:focus{
 				outline:none;
@@ -60,6 +61,10 @@
 		}
 }
 
+#left.search-showing .search-bar .search-wrap .search {
+	width: 100%;
+}
+
 .bottom-left{
 	//Search Results
 	.search-results-container{