Merge pull request #141 from vernak2539/web-gui

Web GUI update
2025-03-25 02:32:52 -05:00 · 2014-10-10 11:36:32 +04:00 · 2014-10-10 11:36:32 +04:00 · 08f218724b
commit 08f218724b
parent d38606f409 daeb1eb2a3
14 changed files with 13051 additions and 554 deletions
--- a/lib/GUI/css/bootstrap.css
+++ b/lib/GUI/css/bootstrap.css
--- a/lib/GUI/css/main.less
+++ b/lib/GUI/css/main.less
@ -1,205 +1,7 @@
@import "../../../node_modules/helpers.less/helpers.less";
-@import "./markdown.less";
-@import "./highlight.js.less";
-@import "./fontello.less";
-
-/*** Main Styles ***/
-body {
-	margin: 0;
-	font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
-}
-
-a, a:visited {
-	text-decoration: none;
-	color: #0D5AFF;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-.center {
-	text-align: center;
-}
-
-@contentWidth: 880px;
-@headerPadding: 10px;
-header {
-	position: fixed;
-	width: 100%;
-	background: #FFF;
-	top: 0;
-	z-index: 1;
-
-	#header-inner {
-		max-width: @contentWidth + @headerPadding*2;
-		margin: 0 auto;
-
-		.logo-container {
-			width: 400px; // width of npm logo
-			margin: 0 auto;
-		}
-	}
-}
-
-#content {
-	max-width: @contentWidth;
-	margin: 0 auto;
-	padding: 20px;
-}
-
-#logo {
-	margin: 20px auto 0;
-	width: 400px;
-	height: 200px;
-	display: block;
-}
-
-h1 {
-	text-align: center;
-
-	a, a:visited {
-		color: black;
-	}
-}
-
-/*** Setup ***/
-#setup {
-	background: #DB4141;
-	padding: 15px 20px;
-	display: inline-block;
-	.border-radius(4px);
-	text-align: left;
-	color: #FFF;
-	margin-top: 20px;
-
-	code {
-		font-family: Consolas, monaco, monospace;
-	}
-}
-
-/*** Search Box ***/
-#search-form {
-	float: right;
-
-	@media (max-width: 540px) {
-		float: none;
-		margin-top: 6px;
-	}
-
-	@height: 30px;
-
-	input, button {
-		margin: 0;
-		vertical-align: top;
-		border: 1px solid #CCC;
-
-		&:focus {
-			outline: none;
-		}
-	}
-
-	input {
-		width: 200px;
-		height: @height;
-		.border-box;
-		padding: 0 5px;
-		font-size: 16px;
-		border-right: 0;
-	}
-
-	button {
-		height: @height;
-		width: @height;
-		margin: 0;
-		border-left: 0;
-		background: #FFF;
-		cursor: pointer;
-		font-size: 16px;
-		color: #999;
-	}
-}
-
-/*** Heading ***/
-h2 {
-	border-bottom: 6px solid #424242;
-	margin: 40px 0 0;
-	padding: 0 @headerPadding 10px;
-}
-
-/*** Package Entries ***/
-.entry {
-	background: #F3F3F3;
-	.border-radius(4px);
-	padding: 12px 15px 15px;
-	.transition(height .3s);
-	overflow: hidden;
-	margin-bottom: 12px;
-
-	h3 {
-		font-size: 24px;
-		margin: 0 0 10px;
-	}
-
-	.name:hover {
-		text-decoration: none;
-	}
-
-	.name:before {
-		margin: 0;
-		margin-left: -10px;
-		.transformTransition(.2s);
-	}
-
-	&.open .name:before {
-		.rotate(90deg);
-	}
-
-	.version {
-		font-size: 16px;
-		color: #666;
-	}
-
-	.author {
-		font-size: 16px;
-		float: right;
-		color: #666;
-	}
-
-	p {
-		margin: 0;
-	}
-
-	.readme {
-		font-size: 14px;
-		margin-top: 10px;
-		background: #FFF;
-		padding: 10px 12px;
-		.border-radius(3px);
-	}
-}
-
-/*** Search Results ***/
-.state-search #all-packages {
-	display: none;
-}
-
-.search-ajax {
-	display: block;
-	margin: 50px auto;
-}
-
-.no-results {
-	text-align: center;
-	margin: 50px 0;
-	color: #888;
-
-	big {
-		font-size: 38px;
-		margin-bottom: 8px;
-	}
-
-	code {
-		font-size: 1.2em;
-	}
-}
+@import (less) "bootstrap.css";
+@import "markdown.less";
+@import "highlight.js.less";
+@import "fontello.less";
+@import "styles.less";
+@import "responsive.less";
--- a/lib/GUI/css/responsive.less
+++ b/lib/GUI/css/responsive.less
@ -0,0 +1,33 @@
+@media (max-width: 992px) {
+	.body {
+		.main-header {
+			.packages-header {
+				border-bottom: none;
+			}
+		}
+	}
+}
+
+@media (max-width: 768px) {
+	.body {
+		.content {
+			padding-top: @mainHeaderHeight + @packagesHeaderHeight + @smRegistryInfoHeight + 10;
+
+			.entry {
+				.title {
+					margin-bottom: 0;
+				}
+
+				.author {
+					float: none !important;
+					clear: both;
+					padding: 0 0 5px 18px;
+				}
+			}
+		}
+
+		.no-results {
+			margin: 10px 0 0;
+		}
+	}
+}
--- a/lib/GUI/css/styles.less
+++ b/lib/GUI/css/styles.less
@ -0,0 +1,189 @@
+//vars
+@npmRed: #cc3d33;
+@white: #fff;
+@entryBg: #F3F3F3;
+@mainHeaderHeight: 50px;
+@packagesHeaderHeight: 60px;
+@headerBorderWidth: 2px;
+@smRegistryInfoHeight: 25px;
+
+/*** Main Styles ***/
+.body {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left:0;
+	margin: 0;
+	padding: 0;
+
+	.main-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: @white;
+		z-index: 1;
+
+		.navbar {
+			margin-bottom: 0;
+		}
+
+		.npm-logo {
+			width: 79px;
+			height: @mainHeaderHeight;
+			background-image: url( /-/logo-sm );
+			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAAAoCAYAAAC/xadkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMDA4QUE4NzQ1QkMxMUU0QTVCMUYwQjdEREYxNENGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMDA4QUE4ODQ1QkMxMUU0QTVCMUYwQjdEREYxNENGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjMwMDhBQTg1NDVCQzExRTRBNUIxRjBCN0RERjE0Q0YyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjMwMDhBQTg2NDVCQzExRTRBNUIxRjBCN0RERjE0Q0YyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ypkYZgAACelJREFUeNrsWmts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);
+			background-repeat: no-repeat;
+			background-position: center center;
+
+			>a {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.setup {
+			line-height: 1.3em;
+			padding-top: 5px;
+		}
+
+		.packages-header {
+			border-bottom: @headerBorderWidth solid #e6e6e6;
+
+			.search-container {
+				top: 9px;
+
+				.search-icon {
+					background: #e6e6e6;
+				}
+			}
+		}
+
+		.sm-registry-info {
+			height: @smRegistryInfoHeight;
+			line-height: 1.7em;
+		}
+	}
+
+	.content {
+		padding-top: @mainHeaderHeight + @packagesHeaderHeight + 10;
+
+		.entry {
+			.transition(height .3s);
+			padding: 9px 10px;
+			overflow: hidden;
+			border-bottom: 1px solid #E7E7E7;
+
+			&:last-child {
+				border-bottom: none;
+			}
+
+			&:nth-child( even ) {
+				background: @entryBg;
+			}
+
+			.title {
+				margin: 0 0 5px 10px;
+			}
+
+			.description {
+				margin: 0 0 0 18px;
+				font-size: 13px;
+			}
+
+			.name:hover {
+				text-decoration: none;
+			}
+
+			.name:before {
+				margin: 0;
+				margin-left: -10px;
+				.transformTransition(.2s);
+			}
+
+			&.open .name:before {
+				.rotate(90deg);
+			}
+
+			.version {
+				color: #666;
+			}
+
+			.author {
+				color: #666;
+			}
+
+			.readme {
+				font-size: 14px;
+				margin-top: 10px;
+				background: @white;
+				padding: 10px 12px;
+				.border-radius(3px);
+				border: 1px solid darken( @entryBg, 10% );
+			}
+		}
+	}
+}
+
+.pkg-search-container {
+	display: none;
+}
+
+.packages-container {
+	.search-ajax {
+		display: block;
+		margin: 50px auto;
+	}
+}
+
+.no-results {
+	text-align: center;
+	margin: 50px 0;
+	color: #888;
+
+	big {
+		font-size: 38px;
+		margin-bottom: 8px;
+	}
+
+	code {
+		font-size: 1.2em;
+	}
+}
+
+.red {
+	color: @npmRed;
+}
+
+.light-red {
+	color: lighten( @npmRed, 10% );
+}
+
+.white {
+	color: @white;
+}
+
+.red-bg {
+	background: @npmRed;
+}
+
+.light-red-bg {
+	background: lighten( @npmRed, 10% );
+}
+
+.no-bg {
+	background: none;
+}
+
+.no-border {
+	border: none;
+}
+.no-rnd-cnr {
+	.border-radius( 0 );
+}
+
+.center {
+	text-align: center;
+}
--- a/lib/GUI/entry.hbs
+++ b/lib/GUI/entry.hbs
@ -1,8 +1,20 @@
-<article class='entry' data-name='{{ name }}' data-version='{{ version }}'>
-	<h3>
-		<a class='name icon-angle-right' href='javascript:void(0)'>{{ name }}</a>
-		<small class='version'>v{{ version }}</small>
-		<div class='author'>By: {{ _npmUser.name }}</div>
-	</h3>
-	<p>{{ description }}</p>
-</article>
+<div class="entry" data-name="{{ name }}" data-version="{{ version }}">
+	<div class="row">
+		<div class="col-md-8 col-sm-8">
+			<h4 class="title">
+				<a class='name icon-angle-right red' href='javascript:void(0)'>{{ name }}</a>
+				<small class='version'>v{{ version }}</small>
+			</h4>
+		</div>
+		<div class="col-md-4 col-sm-4">
+			<div class="author pull-right">
+				<small>By: {{ _npmUser.name }}</small>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-md-12">
+			<p class="description">{{ description }}</p>
+		</div>
+	</div>
+</div>
--- a/lib/GUI/index.hbs
+++ b/lib/GUI/index.hbs
@ -5,48 +5,59 @@
 		<title>{{ name }}</title>

 		<link rel="icon" type="image/ico" href="/-/static/favicon.ico"/>
-
 		<link rel="stylesheet" type="text/css" href="/-/static/main.css">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 	</head>
-	<body>
-		<header>
-			<div id='header-inner'>
-				<div class="logo-container">
-					<a href='/'><img id='logo' alt='{{ name }}' title='{{ name }}' src='/-/logo' /></a>
-				</div>
+	<body class="body">
+		<header class="main-header">
+			<nav class="navbar navbar-default red-bg white no-border no-rnd-cnr" role="navigation">
+				<div class="container">
+					<div class="npm-logo navbar-left">
+						<a href="/"></a>
+					</div>

-				<div class='center'>
-					<article id='setup'>
-						<code>npm set registry {{ baseUrl }}</code><br>
-						<code>npm adduser --registry {{ baseUrl }}</code>
-					</article>
+					<div class="navbar-right setup hidden-xs">
+						<code class="white no-bg">npm set registry {{ baseUrl }}</code><br>
+						<code class="white no-bg">npm adduser --registry {{ baseUrl }}</code>
+					</div>
 				</div>
-
-				<h2>
-					Available Packages:
-					<form id='search-form'>
-						<input type='text' placeholder='Search' /><button class='clear icon-search'></button>
-					</form>
-				</h2>
-			</div>
+			</nav>
+			<header class="sm-registry-info light-red-bg center hidden-sm hidden-lg hidden-md">
+				<code class="white no-bg">{{ baseUrl }}</code><br>
+			</header>
+			<header class="packages-header container">
+				<div class="row">
+					<div class="col-md-5 hidden-xs hidden-sm">
+						<h2 class="title">Available Packages</h2>
+					</div>
+					<div class="col-md-4 col-md-offset-3 col-sm-12">
+						<form id='search-form'>
+							<div class="input-group input-group-lg search-container">
+								<input type="text" class="form-control" placeholder="Search for packages">
+								<span class="input-group-btn">
+									<button class="btn btn-default search-icon js-search-btn"><i class="icon-search"></i></button>
+								</span>
+							</div>
+						</form>
+					</div>
+				</div>
+			</header>
 		</header>

-		<div id='content'>
-			<div id='search-results'></div>
-
-			<div id='all-packages'>
+		<section class="content container packages-container" id="all-packages">
 				{{#each packages}}
 					{{> entry}}
 				{{/each}}

 				{{#unless packages.length}}
-				    <div class='no-results'>
-				    	<big>No Packages</big><br>
-				    	Use <code>npm publish</code>
-				    </div>
+						<div class='no-results'>
+							<big>No Packages</big><br>
+							Use <code>npm publish</code>
+						</div>
 				{{/unless}}
-			</div>
-		</div>
+		</section>
+
+		<section class="content container pkg-search-container" id="search-results"></section>

 		<script src="/-/static/jquery.min.js"></script>
 		<script type='text/javascript' src='/-/static/main.js'></script>
--- a/lib/GUI/js/entry.js
+++ b/lib/GUI/js/entry.js
@ -10,14 +10,14 @@ $(function() {
 		//Close entry
 		if($entry.hasClass('open')) {
 			$entry
-				.height($entry.height())
+				.height($entry.outerHeight())
 				.removeClass('open');

 			setTimeout(function() {
 				$entry.css('height', $entry.attr('data-height') + 'px');
 			}, 0);

-            transitionComplete(function() {
+			transitionComplete(function() {
 				$entry.find('.readme').remove();
 				$entry.css('height', 'auto');
 			});
@ -28,24 +28,24 @@ $(function() {
 			$('.entry.open').each(function() {
 				var $entry = $(this);
 				$entry
-                    .height($entry.height())
-                    .removeClass('open');
+					.height($entry.outerHeight())
+					.removeClass('open');

-                setTimeout(function() {
-                    $entry.css('height', $entry.attr('data-height') + 'px');
-                }, 0);
+				setTimeout(function() {
+					$entry.css('height', $entry.attr('data-height') + 'px');
+				}, 0);

-                transitionComplete(function() {
-                    $entry.find('.readme').remove();
-                    $entry.css('height', 'auto');
-                });
+				transitionComplete(function() {
+					$entry.find('.readme').remove();
+					$entry.css('height', 'auto');
+				});
 			});

 			//Add the open class
 			$entry.addClass('open');

 			//Explicitly set heights for transitions
-			var height = $entry.height();
+			var height = $entry.outerHeight();
 			$entry
 				.attr('data-height', height)
 				.css('height', height);
@ -68,4 +68,4 @@ $(function() {
 			});
 		}
 	});
-});
+});
--- a/lib/GUI/js/header.js
+++ b/lib/GUI/js/header.js
@ -1,29 +0,0 @@
-var $ = require('unopinionate').selector,
-	onScroll = require('onscroll');
-
-$(function() {
-	var $header = $('header'),
-		$content = $('#content'),
-		bottomOffset = 52;
-
-	var scrollFunc = function(top) {
-		var limit =  $header.outerHeight() - bottomOffset;
-
-		if(top < 0) {
-			$header.css('top', 0);
-		}
-		else if(top > limit) {
-			$header.css('top', -limit + 'px');
-		}
-		else {
-			$header.css('top', -top + 'px');
-		}
-	};
-
-	onScroll(scrollFunc);
-	scrollFunc();
-
-	$(window).resize(function() {
-		$content.css('margin-top', $header.outerHeight());
-	}).resize();
-});
--- a/lib/GUI/js/main.js
+++ b/lib/GUI/js/main.js
@ -1,3 +1,2 @@
 require('./search');
 require('./entry');
-require('./header');
--- a/lib/GUI/js/search.js
+++ b/lib/GUI/js/search.js
@ -5,66 +5,77 @@ var $ = require('unopinionate').selector,
 $(function() {
 	'use strict';

-	var $form	= $('#search-form'),
-		$input	= $form.find('input'),
-		$searchResults = $("#search-results"),
-		$body	= $('body'),
-		$clear	= $form.find('.clear'),
-		request,
-		currentResults;
+	(function( window, document ) {

-	$form.bind('submit keyup', function(e) {
-		e.preventDefault();
+		var $form          = $('#search-form');
+		var $input         = $form.find('input');
+		var $body          = $('body');
+		var $clear         = $form.find('.clear');
+		var $searchResults = $("#search-results");
+		var $pkgListing    = $("#all-packages");
+		var $searchBtn     = $('.js-search-btn');
+		var request;
+		var currentResults;

-		var q = $input.val();
+		var toggle = function( validQuery ) {
+			$searchResults.toggleClass( 'show', validQuery );
+			$pkgListing.toggleClass( 'hide', validQuery );

-		$body.addClass('state-search');

-		//Switch the icons
-		$clear
-			[q  ? 'addClass' : 'removeClass']('icon-cancel')
-			[!q ? 'addClass' : 'removeClass']('icon-search');
+			$searchBtn.find('i').toggleClass( 'icon-cancel', validQuery );
+			$searchBtn.find('i').toggleClass( 'icon-search', !validQuery );
+		};

-		if(q) {
-			if(request) {
+		$form.bind('submit keyup', function(e) {
+			var q, qBool;
+
+			e.preventDefault();
+
+			q     = $input.val();
+			qBool = q !== '';
+
+			toggle( qBool );
+
+			if( !qBool ) {
+				if( request && typeof request.abort === 'function' ) {
+					request.abort();
+				}
+
+				currentResults = null;
+				$searchResults.html('');
+				return;
+			}
+
+			if( request && typeof request.abort === 'function' ) {
 				request.abort();
 			}

-			if(!currentResults) {
-				$searchResults.html("<img class='search-ajax' src='/-/static/ajax.gif' alt='Spinner'/>");
+			if( !currentResults ) {
+				$searchResults.html( "<img class='search-ajax' src='/-/static/ajax.gif' alt='Spinner'/>" );
 			}

-			request = $.getJSON('/-/search/' + q, function(results) {
+			request = $.getJSON('/-/search/' + q, function( results ) {
 				currentResults = results;

-				if(results.length) {
+				if( results.length > 0 ) {
 					var html = '';

-                    $.each(results, function(i, entry) {
-                        html += template(entry);
+					$.each(results, function( i, entry ) {
+							html += template( entry );
 					});

 					$searchResults.html(html);
-				}
-				else {
+				}	else {
 					$searchResults.html("<div class='no-results'><big>No Results</big></div>");
 				}
 			});
-		}
-		else {
-            request.abort();
-			currentResults = null;
-			$searchResults.html('');
-			$body.removeClass('state-search');
-		}
-	});
+		});

-	$clear.click(function(e) {
-		e.preventDefault();
-		$input.val('');
-		$form.keyup();
-	});
+		$( document ).on( 'click', '.icon-cancel', function( e ) {
+			e.preventDefault();
+			$input.val('');
+			$form.keyup();
+		});

-	
-	
+	})( window, window.document );
 });
--- a/lib/index-web.js
+++ b/lib/index-web.js
@ -39,6 +39,10 @@ module.exports = function(app, config, storage) {
 		res.sendfile(config.web.logo ? config.web.logo : __dirname + "/static/logo.png")
 	})

+	app.get('/-/logo-sm', function(req, res, next) {
+		res.sendfile(config.web.logosm ? config.web.logosm : __dirname + "/static/logo-sm.png")
+	})
+
 	// Search
 	app.get('/-/search/:anything', function(req, res, next) {
 		var results = search.query(req.params.anything),
@ -79,4 +83,3 @@ module.exports = function(app, config, storage) {
 		})
 	})
 }
-
--- a/lib/static/logo-sm.png
+++ b/lib/static/logo-sm.png
--- a/lib/static/main.css
+++ b/lib/static/main.css
--- a/lib/static/main.js
+++ b/lib/static/main.js
@ -5,32 +5,32 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;


-  buffer += "<article class='entry' data-name='";
+  buffer += "<div class=\"entry\" data-name=\"";
  if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
-    + "' data-version='";
+    + "\" data-version=\"";
  if (helper = helpers.version) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.version); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
-    + "'>\n	<h3>\n		<a class='name icon-angle-right' href='javascript:void(0)'>";
+    + "\">\n	<div class=\"row\">\n		<div class=\"col-md-8 col-sm-8\">\n			<h4 class=\"title\">\n				<a class='name icon-angle-right red' href='javascript:void(0)'>";
  if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
-    + "</a>\n		<small class='version'>v";
+    + "</a>\n				<small class='version'>v";
  if (helper = helpers.version) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.version); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
-    + "</small>\n		<div class='author'>By: "
+    + "</small>\n			</h4>\n		</div>\n		<div class=\"col-md-4 col-sm-4\">\n			<div class=\"author pull-right\">\n				<small>By: "
    + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0._npmUser)),stack1 == null || stack1 === false ? stack1 : stack1.name)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
-    + "</div>\n	</h3>\n	<p>";
+    + "</small>\n			</div>\n		</div>\n	</div>\n	<div class=\"row\">\n		<div class=\"col-md-12\">\n			<p class=\"description\">";
  if (helper = helpers.description) { stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.description); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
-    + "</p>\n</article>";
+    + "</p>\n		</div>\n	</div>\n</div>\n";
  return buffer;
  });
-},{"handlebars/runtime":12}],2:[function(require,module,exports){
+},{"handlebars/runtime":11}],2:[function(require,module,exports){
 var $ = require('unopinionate').selector,
 	onClick = require('onclick'),
 	transitionComplete = require('transition-complete');
@ -43,14 +43,14 @@ $(function() {
 		//Close entry
 		if($entry.hasClass('open')) {
 			$entry
-				.height($entry.height())
+				.height($entry.outerHeight())
 				.removeClass('open');

 			setTimeout(function() {
 				$entry.css('height', $entry.attr('data-height') + 'px');
 			}, 0);

-            transitionComplete(function() {
+			transitionComplete(function() {
 				$entry.find('.readme').remove();
 				$entry.css('height', 'auto');
 			});
@ -61,24 +61,24 @@ $(function() {
 			$('.entry.open').each(function() {
 				var $entry = $(this);
 				$entry
-                    .height($entry.height())
-                    .removeClass('open');
+					.height($entry.outerHeight())
+					.removeClass('open');

-                setTimeout(function() {
-                    $entry.css('height', $entry.attr('data-height') + 'px');
-                }, 0);
+				setTimeout(function() {
+					$entry.css('height', $entry.attr('data-height') + 'px');
+				}, 0);

-                transitionComplete(function() {
-                    $entry.find('.readme').remove();
-                    $entry.css('height', 'auto');
-                });
+				transitionComplete(function() {
+					$entry.find('.readme').remove();
+					$entry.css('height', 'auto');
+				});
 			});

 			//Add the open class
 			$entry.addClass('open');

 			//Explicitly set heights for transitions
-			var height = $entry.height();
+			var height = $entry.outerHeight();
 			$entry
 				.attr('data-height', height)
 				.css('height', height);
@ -102,41 +102,12 @@ $(function() {
 		}
 	});
 });
-},{"onclick":13,"transition-complete":15,"unopinionate":16}],3:[function(require,module,exports){
-var $ = require('unopinionate').selector,
-	onScroll = require('onscroll');

-$(function() {
-	var $header = $('header'),
-		$content = $('#content'),
-		bottomOffset = 52;
-
-	var scrollFunc = function(top) {
-		var limit =  $header.outerHeight() - bottomOffset;
-
-		if(top < 0) {
-			$header.css('top', 0);
-		}
-		else if(top > limit) {
-			$header.css('top', -limit + 'px');
-		}
-		else {
-			$header.css('top', -top + 'px');
-		}
-	};
-
-	onScroll(scrollFunc);
-	scrollFunc();
-
-	$(window).resize(function() {
-		$content.css('margin-top', $header.outerHeight());
-	}).resize();
-});
-},{"onscroll":14,"unopinionate":16}],4:[function(require,module,exports){
+},{"onclick":12,"transition-complete":14,"unopinionate":15}],3:[function(require,module,exports){
 require('./search');
 require('./entry');
-require('./header');
-},{"./entry":2,"./header":3,"./search":5}],5:[function(require,module,exports){
+
+},{"./entry":2,"./search":4}],4:[function(require,module,exports){
 var $ = require('unopinionate').selector,
 	template = require('../entry.hbs'),
 	onScroll = require('onscroll');
@ -144,71 +115,82 @@ var $ = require('unopinionate').selector,
 $(function() {
 	'use strict';

-	var $form	= $('#search-form'),
-		$input	= $form.find('input'),
-		$searchResults = $("#search-results"),
-		$body	= $('body'),
-		$clear	= $form.find('.clear'),
-		request,
-		currentResults;
+	(function( window, document ) {

-	$form.bind('submit keyup', function(e) {
-		e.preventDefault();
+		var $form          = $('#search-form');
+		var $input         = $form.find('input');
+		var $body          = $('body');
+		var $clear         = $form.find('.clear');
+		var $searchResults = $("#search-results");
+		var $pkgListing    = $("#all-packages");
+		var $searchBtn     = $('.js-search-btn');
+		var request;
+		var currentResults;

-		var q = $input.val();
+		var toggle = function( validQuery ) {
+			$searchResults.toggleClass( 'show', validQuery );
+			$pkgListing.toggleClass( 'hide', validQuery );

-		$body.addClass('state-search');

-		//Switch the icons
-		$clear
-			[q  ? 'addClass' : 'removeClass']('icon-cancel')
-			[!q ? 'addClass' : 'removeClass']('icon-search');
+			$searchBtn.find('i').toggleClass( 'icon-cancel', validQuery );
+			$searchBtn.find('i').toggleClass( 'icon-search', !validQuery );
+		};

-		if(q) {
-			if(request) {
+		$form.bind('submit keyup', function(e) {
+			var q, qBool;
+
+			e.preventDefault();
+
+			q     = $input.val();
+			qBool = q !== '';
+
+			toggle( qBool );
+
+			if( !qBool ) {
+				if( request && typeof request.abort === 'function' ) {
+					request.abort();
+				}
+
+				currentResults = null;
+				$searchResults.html('');
+				return;
+			}
+
+			if( request && typeof request.abort === 'function' ) {
 				request.abort();
 			}

-			if(!currentResults) {
-				$searchResults.html("<img class='search-ajax' src='/-/static/ajax.gif' alt='Spinner'/>");
+			if( !currentResults ) {
+				$searchResults.html( "<img class='search-ajax' src='/-/static/ajax.gif' alt='Spinner'/>" );
 			}

-			request = $.getJSON('/-/search/' + q, function(results) {
+			request = $.getJSON('/-/search/' + q, function( results ) {
 				currentResults = results;

-				if(results.length) {
+				if( results.length > 0 ) {
 					var html = '';

-                    $.each(results, function(i, entry) {
-                        html += template(entry);
+					$.each(results, function( i, entry ) {
+							html += template( entry );
 					});

 					$searchResults.html(html);
-				}
-				else {
+				}	else {
 					$searchResults.html("<div class='no-results'><big>No Results</big></div>");
 				}
 			});
-		}
-		else {
-            request.abort();
-			currentResults = null;
-			$searchResults.html('');
-			$body.removeClass('state-search');
-		}
-	});
+		});

-	$clear.click(function(e) {
-		e.preventDefault();
-		$input.val('');
-		$form.keyup();
-	});
+		$( document ).on( 'click', '.icon-cancel', function( e ) {
+			e.preventDefault();
+			$input.val('');
+			$form.keyup();
+		});

-	
-	
+	})( window, window.document );
 });

-},{"../entry.hbs":1,"onscroll":14,"unopinionate":16}],6:[function(require,module,exports){
+},{"../entry.hbs":1,"onscroll":13,"unopinionate":15}],5:[function(require,module,exports){
 "use strict";
 /*globals Handlebars: true */
 var base = require("./handlebars/base");
@ -241,7 +223,7 @@ var Handlebars = create();
 Handlebars.create = create;

 exports["default"] = Handlebars;
-},{"./handlebars/base":7,"./handlebars/exception":8,"./handlebars/runtime":9,"./handlebars/safe-string":10,"./handlebars/utils":11}],7:[function(require,module,exports){
+},{"./handlebars/base":6,"./handlebars/exception":7,"./handlebars/runtime":8,"./handlebars/safe-string":9,"./handlebars/utils":10}],6:[function(require,module,exports){
 "use strict";
 var Utils = require("./utils");
 var Exception = require("./exception")["default"];
@ -422,7 +404,7 @@ exports.log = log;var createFrame = function(object) {
  return obj;
 };
 exports.createFrame = createFrame;
-},{"./exception":8,"./utils":11}],8:[function(require,module,exports){
+},{"./exception":7,"./utils":10}],7:[function(require,module,exports){
 "use strict";

 var errorProps = ['description', 'fileName', 'lineNumber', 'message', 'name', 'number', 'stack'];
@ -451,7 +433,7 @@ function Exception(message, node) {
 Exception.prototype = new Error();

 exports["default"] = Exception;
-},{}],9:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 "use strict";
 var Utils = require("./utils");
 var Exception = require("./exception")["default"];
@ -589,7 +571,7 @@ exports.program = program;function invokePartial(partial, name, context, helpers
 exports.invokePartial = invokePartial;function noop() { return ""; }

 exports.noop = noop;
-},{"./base":7,"./exception":8,"./utils":11}],10:[function(require,module,exports){
+},{"./base":6,"./exception":7,"./utils":10}],9:[function(require,module,exports){
 "use strict";
 // Build out our basic SafeString type
 function SafeString(string) {
@ -601,7 +583,7 @@ SafeString.prototype.toString = function() {
 };

 exports["default"] = SafeString;
-},{}],11:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 "use strict";
 /*jshint -W004 */
 var SafeString = require("./safe-string")["default"];
@ -678,12 +660,12 @@ exports.escapeExpression = escapeExpression;function isEmpty(value) {
 }

 exports.isEmpty = isEmpty;
-},{"./safe-string":10}],12:[function(require,module,exports){
+},{"./safe-string":9}],11:[function(require,module,exports){
 // Create a simple path alias to allow browserify to resolve
 // the runtime on a supported path.
 module.exports = require('./dist/cjs/handlebars.runtime');

-},{"./dist/cjs/handlebars.runtime":6}],13:[function(require,module,exports){
+},{"./dist/cjs/handlebars.runtime":5}],12:[function(require,module,exports){
 var $ = require('unopinionate').selector;

 var $document   = $(document),
@ -848,7 +830,7 @@ $(document).bind('mousedown', click._doAnywheres);
 module.exports = click;


-},{"unopinionate":16}],14:[function(require,module,exports){
+},{"unopinionate":15}],13:[function(require,module,exports){
 var $ = require('unopinionate').selector;

 var bodyScrollers = [];
@ -871,7 +853,7 @@ var onScroll = function(callback) {
 };

 module.exports = onScroll;
-},{"unopinionate":16}],15:[function(require,module,exports){
+},{"unopinionate":15}],14:[function(require,module,exports){
 (function(root) {
    var callbacks = [];

@ -935,7 +917,7 @@ module.exports = onScroll;
    }
 })(this);

-},{}],16:[function(require,module,exports){
+},{}],15:[function(require,module,exports){
 (function (global){
 (function(root) {
    var unopinionate = {
@ -962,4 +944,4 @@ module.exports = onScroll;
 })(typeof window != 'undefined' ? window : global);

 }).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}]},{},[4]);
+},{}]},{},[3]);