Merge branch 'master' of https://github.com/crunchbutton/crunchbutton

www/assets/css/style.css

@@ -1648,14 +1648,22 @@ html[xmlns] .clearfix {
 			margin-right: 25px;
 			padding-top: 12px;
 		}
+
+		.suggestion-form-tip{
+			border-top: 1px solid #F5F5F5;
+			color: #999;
+			font-size: 12px;
+			line-height: 16px;
+			margin-top: 30px;
+			padding-top: 10px;
+		}
+
 		.suggestion-form-button{
 			border-radius: 4px;
 			border: 1px solid #cb5921;
 			padding: 6px 10px 6px 12px;
 			color: #fff;
-			float: left;
+			float: right;
-			margin-left: 115px;
-			margin-top: 10px;
 			text-decoration: none;
 			text-shadow: 1px 1px 0px rgba(0,0,0,.22);
 			background: -moz-linear-gradient(#f57333, #f26926);
@@ -1667,36 +1675,31 @@ html[xmlns] .clearfix {
 			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f57333', endColorstr='#f26926')";
 			background: linear-gradient(#f57333, #f26926);
 		}
+		
 .suggestion-link-container{
 	margin-bottom: 30px;
 }
+	.suggestion-link-title{
+		text-transform: uppercase;
+		color: #969696;
+		font-size: 13px;
+		font-weight: 600;
+		margin-bottom: 10px;
+	}
 	.suggestion-link{
 		font-style: italic;
 		font-weight: bold;
 	}
 
-.suggestion-help{
+.suggestion-fixed-dialog{
-	color: #CCC;
+	position: fixed;
-	cursor: pointer;
-	display: inline-block;
-	font-weight: bold;
-	font-style: italic;
-	margin-left: 5px;
-	-moz-user-select: none; 
-	-khtml-user-select: none; 
-	-webkit-user-select: none; 
-	-o-user-select: none; 
 }
-.suggestion-help-content{
+
-	border: 1px solid #CCC;
+.suggestion-thanks-text{
-	border-radius: 3px;
+	font-size: 12px;
-	color: #999;
+	line-height: 17px;
-	display: none;
+	font-weight: bold;
-	font-size:.85em;
+	width: 100%;
-	line-height: 1.6em;
-	margin: 5px 0;
-	padding:5px;
-	width: auto;
 }
 .ui-icon-closethick{
 	color: #FFF;
@@ -1709,6 +1712,51 @@ html[xmlns] .clearfix {
 	margin-right: 6px;
 }
 
+.tooltip-help{
+	color: #CCC;
+	cursor: pointer;
+	border-radius: 10px;
+	margin-left: 5px;
+	margin-top: 18px;
+	text-align: center;
+	padding-top: 2px;
+	position: absolute;
+	-moz-user-select: none; 
+	-khtml-user-select: none; 
+	-webkit-user-select: none; 
+	-o-user-select: none; 
+	position: absolute;
+	height: 16px;
+	min-width: 18px;
+	border-radius: 10px;
+	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
+	_border: 1px solid #fff;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(251, 60, 42, 1)), to(rgba(251, 57, 39, 1)));
+}
+
+.tooltip-help  span {
+	margin: 1px 3px 0 3px;
+	display: block;
+	text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
+	color: #fff;
+	font-size: 12px;
+	font-weight: bold;
+}
+
+.tooltip-help-content{
+	background: #f5f5f5 url(/assets/images/groovepaper.png);
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	color:#999;
+	display: none;
+	font-size: 12px;
+	line-height: 16px;
+	margin-left: 20px;
+	margin-top: 8px;
+	padding: 5px;
+	position: absolute;
+	width: 250px;
+}
 
 @media only screen and (min-width : 1024px) {
 	.restaurant-pic-wrapper {
@@ -1771,6 +1819,14 @@ html[xmlns] .clearfix {
 	.suggestion-help-content{
 		width: 180px;
 	}
+	.suggestion-form-button{
+		float: left;
+		margin-left: 165px;
+		margin-top: 10px;
+	}
+	.suggestion-thanks-text{
+		width: 400px;
+	}
 }
 
 @media only screen and (min-width : 770px) and (max-width : 1023px) {
@@ -1800,6 +1856,16 @@ html[xmlns] .clearfix {
 		margin-left: -321px;
 		left: 50%;
 	}
+
+	.suggestion-form-button{
+		float: left;
+		margin-left: 165px;
+		margin-top: 10px;
+	}
+	.suggestion-thanks-text{
+		width: 400px;
+	}
+
 }
 
 th {

www/assets/js/app.js

@@ -269,7 +269,13 @@ App.page.restaurant = function(id) {
 			categories = App.restaurant.categories(),
 			dishes, list;
 
-		$('.restaurant-items').append('<div class="content-item-name content-item-main-name"><h1>Add to your order</h1></div>')
+		var tooltip = '<span class="tooltip-help"><span>?</span></span>' + 
+									'<div class="tooltip-help-content">' + 
+										'Crunchbutton "curates" menus. We\'ve curated just the top food here. ' + 
+										'If you really want something else, suggest it below.' + 
+									'</div>';
+
+		$('.restaurant-items').append('<div class="content-item-name content-item-main-name"><h1>Add to your order' + tooltip +  '</h1></div>')
 
 		for (var x in categories) {
 			dishes = categories[x].dishes();
@@ -345,6 +351,10 @@ App.page.restaurant = function(id) {
 		setTimeout(function() {
 			var total = App.cart.updateTotal();
 			App.suggestion.init();
+			// ToolTip
+			$( '.tooltip-help' ).live( 'click', function() {
+				$( '.tooltip-help-content' ).toggle();
+			} )
 		},200);
 
 		App.cartHighlightEnabled = false;
@@ -2150,26 +2160,27 @@ App.suggestion.init = function(){
   	return false;
 	} );
 
-	$( '.suggestion-help' ).live( 'click', function( e ){
-		$( '.suggestion-help-content' ).toggle( 'fast' );
-	} )
 	App.suggestion.shield.init();
 }
 
 App.suggestion.form = function(){
 	return '' +
 	'<div class="suggestion-container field-container">' +
-		'<form class="suggestion-form">' +
+		'<div class="suggestion-form-container field-container">' +
-			'<h1>Suggest other food</h1>' +
+			'<form class="suggestion-form">' +
-			'<label>Name</label><div class="input-item "><input type="text" name="suggestion-name" tabindex="10"></div>' +
+				'<h1>What do you suggest?</h1>' +
-			'<div class="divider"></div>' +
+				'<input type="text" maxlength="250" name="suggestion-name" tabindex="10">' +
-			'<label>Comment</label><div class="input-item"><textarea name="suggestion-content" tabindex="11"></textarea></div>' +
+				'<a href="javascript:;" class="suggestion-form-button">Suggest</a>' +
-			'<div class="divider"></div>' +
+				'<div class="divider"></div>' + 
-			'<a href="javascript:;" class="suggestion-form-button">Suggest</a>' +
+			'</form>' +
-			'<div class="divider"></div>' + 
+			'<div class="suggestion-message">' +
-		'</form>' +
+			'</div>' +
-		'<div class="suggestion-message">' +
 		'</div>' +
+		'<div class="suggestion-form-tip">' + 
+			'Crunchbutton "curates" menus. <br/>' + 
+			'We\'ve curated just the top food here. <br/>' + 
+			'You can suggest food, and, if it\'s really good, you\'ll see it on the menu soon.' + 
+		'</div>' + 
 	'</div>';
 }
 
@@ -2190,7 +2201,6 @@ App.suggestion.send = function(){
 	data[ 'id_restaurant' ] = App.restaurant.id;
 	data[ 'id_community' ] = App.restaurant.id_community;
 	data[ 'name' ] = $( 'input[name=suggestion-name]' ).val();
-	data[ 'content' ] = $( 'textarea[name=suggestion-content]' ).val();
 
 	$.ajax({
 		type: "POST",
@@ -2198,20 +2208,16 @@ App.suggestion.send = function(){
 		data: data,
 		url: suggestionURL,
 		success: function(content) {
-			console.log( 'oi' )
+			App.suggestion.message( '<h1>Awesome, thanks!!</h1>' + 
-			App.suggestion.message( '<h1>Thanks</h1>' );
+															'<div class="suggestion-thanks-text">If you really really wanna make sure we add it asap, feel free to call us at 800-242-1444</div>' );
 		}
 	});
 }
 
 App.suggestion.link = function(){
 	return '<div class="suggestion-link-container">' + 
-						'<a href="javascript:;" class="suggestion-link">Suggest other food</a>' + 
+						'<div class="suggestion-link-title">Really want something else?</div>' +
-						'<span class="suggestion-help"> ( ? ) </span>' + 
+						'<a href="javascript:;" class="suggestion-link">Suggest other food</a>' +
-						'<div class="suggestion-help-content">' + 
-							'Crunchbutton "curates" menus. We\'ve curated just the top food here. ' + 
-							'You can suggest food, and, if it\'s really good, you\'ll see it on the menu soon.' + 
-						'</div>' + 
 					'</div>';
 }
 
@@ -2225,7 +2231,6 @@ App.suggestion.message = function( msg ){
 App.suggestion.show = function(){
 	// Resets the default values
 	$( 'input[name=suggestion-name]' ).val( '' );
-	$( 'textarea[name=suggestion-content]' ).val( '' );
 	// Shows the form and hides the message box
 	$( '.suggestion-form' ).show();
 	$( '.suggestion-message' ).hide();
@@ -2235,16 +2240,17 @@ App.suggestion.show = function(){
 			App.suggestion.shield.show();
 			$( '.suggestion-container' )
 				.dialog( { 
+					dialogClass: 'suggestion-fixed-dialog',
 					width: App.suggestion.contentWidth(),  
 					close: function( event, ui ) { App.suggestion.shield.close(); },
 					open: function( event, ui ) { $( '.suggestion-name' ).focus(); } 
 				} );
-		},100 );
+		}, 100 );
 }
 
 App.suggestion.contentWidth = function(){
 	if( $( window ).width() > 700 ){
-		return 566;	
+		return 450;	
 	}
 	if( $( window ).width() <= 700 ){
 		return $( window ).width() - 50;	
@@ -2256,7 +2262,8 @@ App.suggestion.shield = { 'isVisible' : false }
 App.suggestion.shield.resize = function(){
 	if( App.suggestion.shield.isVisible ){
 		$( '.suggest-shield' ).width( $( window ).width() );
-		$( '.suggest-shield' ).height( $( window ).height() );	
+		// Plus 60 due to iphone's title bar.
+		$( '.suggest-shield' ).height( $( window ).height() + 60 );	
 	}
 }