From 1e29d0d9dd8f185b85b24c3d5410c24904c7b4e7 Mon Sep 17 00:00:00 2001
From: Daniel Camargo <pererinha@gmail.com>
Date: Wed, 23 Jan 2013 16:55:47 -0200
Subject: [PATCH] Issue 635 and Issue 520 - Food suggestion

Developed the suggestions Devin gave me in order to make the suggestion model more beautiful.
---
 www/assets/css/style.css | 61 +++++++++++++++++++++++++---------------
 www/assets/js/app.js     | 23 +++++++--------
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/www/assets/css/style.css b/www/assets/css/style.css
index aef670a0f..2c7b7d4e7 100644
--- a/www/assets/css/style.css
+++ b/www/assets/css/style.css
@@ -1621,38 +1621,41 @@ html[xmlns] .clearfix {
 	left: 0;
 	position: fixed;
 	z-index: 1000;
-	opacity:0.4;
-	filter:alpha(opacity=40);
+	opacity:0.5;
+	filter:alpha(opacity=50);
 }
 
 .suggestion-container{
-	background: #FFF;
+	background: #f5f5f5 url(/assets/images/groovepaper.png);
+	border: 1px solid #F5F5F5;
+	border-radius: 4px;
 	display: none;
-	border: 1px solid #CCC;
-	padding: 10px;
+	padding: 20px;
 	width: 500px;
 }
 	.suggestion-container h1{
 		color:#D74924;
 		font-size: 1.4em;
 		font-weight: 400;
-		margin: 10px 0;
+		margin-bottom:22px;
 	}
 		.suggestion-container label{
 			float: left;
-			text-align: right;
+			text-align: left;
 			width: 90px;
 			font-weight: bold;
 			font-size: 12px;
 			margin-right: 25px;
+			padding-top: 12px;
 		}
 		.suggestion-form-button{
 			border-radius: 4px;
 			border: 1px solid #cb5921;
 			padding: 6px 10px 6px 12px;
 			color: #fff;
-			float: right;
-			margin-right: 75px;
+			float: left;
+			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);
@@ -1664,31 +1667,46 @@ html[xmlns] .clearfix {
 			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f57333', endColorstr='#f26926')";
 			background: linear-gradient(#f57333, #f26926);
 		}
-.suggestion-link{
-	font-style: italic;
-	font-weight: bold;
+.suggestion-link-container{
+	margin-bottom: 30px;
 }
+	.suggestion-link{
+		font-style: italic;
+		font-weight: bold;
+	}
 
 .suggestion-help{
+	color: #CCC;
 	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 #d74924;
-	background: #FFF;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	color: #999;
 	display: none;
-	font-size:.9em;
+	font-size:.85em;
+	line-height: 1.6em;
 	margin: 5px 0;
-	padding:3px;
-	width: 200px;
+	padding:5px;
+	width: auto;
 }
 .ui-icon-closethick{
 	color: #FFF;
 	font-weight: bold;
 	text-decoration: none;
+	display: block;
 	float: right;
-	margin-bottom: 5px;
+	font-weight: normal;
+	margin-bottom: 8px;
+	margin-right: 6px;
 }
 
 
@@ -1750,7 +1768,9 @@ html[xmlns] .clearfix {
 	.restaurant-items {
 		position: absolute;
 	}
-
+	.suggestion-help-content{
+		width: 200px;
+	}
 }
 
 @media only screen and (min-width : 770px) and (max-width : 1023px) {
@@ -1780,9 +1800,6 @@ html[xmlns] .clearfix {
 		margin-left: -321px;
 		left: 50%;
 	}
-	.suggestion-link-container{
-		margin-bottom: 30px;
-	}
 }
 
 th {
diff --git a/www/assets/js/app.js b/www/assets/js/app.js
index daaaae16e..ff4a1fa78 100644
--- a/www/assets/js/app.js
+++ b/www/assets/js/app.js
@@ -2151,7 +2151,6 @@ App.suggestion.init = function(){
 		$( '.suggestion-help-content' ).toggle( 'fast' );
 	} )
 	App.suggestion.shield.init();
-	
 }
 
 App.suggestion.form = function(){
@@ -2197,15 +2196,15 @@ App.suggestion.send = function(){
 		url: suggestionURL,
 		success: function(content) {
 			console.log( 'oi' )
-			App.suggestion.message( 'Thanks' );
+			App.suggestion.message( '<h1>Thanks</h1>' );
 		}
 	});
 }
 
 App.suggestion.link = function(){
 	return '<div class="suggestion-link-container">' + 
-						'<a href="javascript:;" class="suggestion-link"> Suggest other food </a>' + 
-						'<span class="suggestion-help"> ? </span>' + 
+						'<a href="javascript:;" class="suggestion-link">Suggest other food</a>' + 
+						'<span class="suggestion-help"> ( ? ) </span>' + 
 						'<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.' + 
@@ -2231,17 +2230,18 @@ App.suggestion.show = function(){
 	setTimeout( function(){
 			// Shows the shield
 			App.suggestion.shield.show();
-			$( '.suggestion-container' ).dialog( { 
-																				width: App.suggestion.contentWidth(),  
-																				close: function( event, ui ) { App.suggestion.shield.close(); },
-																				open: function( event, ui ) { $( '.suggestion-name' ).focus(); } 
-																				} );
+			$( '.suggestion-container' )
+				.dialog( { 
+					width: App.suggestion.contentWidth(),  
+					close: function( event, ui ) { App.suggestion.shield.close(); },
+					open: function( event, ui ) { $( '.suggestion-name' ).focus(); } 
+				} );
 		},100 );
 }
 
 App.suggestion.contentWidth = function(){
 	if( $( window ).width() > 700 ){
-		return 600;	
+		return 566;	
 	}
 	if( $( window ).width() <= 700 ){
 		return $( window ).width() - 50;	
@@ -2249,6 +2249,7 @@ App.suggestion.contentWidth = function(){
 }
 
 App.suggestion.shield = { 'isVisible' : false }
+
 App.suggestion.shield.resize = function(){
 	if( App.suggestion.shield.isVisible ){
 		$( '.suggest-shield' ).width( $( window ).width() );
@@ -2257,7 +2258,7 @@ App.suggestion.shield.resize = function(){
 }
 
 App.suggestion.shield.init = function(){
-	$( 'body' ).append( '<div class="suggest-shield"></div>' );
+	$( '.wrapper' ).append( '<div class="suggest-shield"></div>' );
 	$( window ).resize( function() {
 			App.suggestion.shield.resize();
 	} );