sharpetronics/crunchbutton
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Issue 635 and Issue 520 - Food suggestion

Browse Source 
Developed the suggestions Devin gave me in order to make the suggestion model more beautiful.
This commit is contained in:
Daniel Camargo 2013-01-23 16:55:47 -02:00
parent 548e7f902f
commit 1e29d0d9dd
2 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
www/assets/css/style.css
View File

@ -1621,38 +1621,41 @@ html[xmlns] .clearfix {
left: 0; left: 0;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
opacity:0.4; opacity:0.5;
filter:alpha(opacity=40); filter:alpha(opacity=50);
} }
.suggestion-container{ .suggestion-container{
background: #FFF; background: #f5f5f5 url(/assets/images/groovepaper.png);
border: 1px solid #F5F5F5;
border-radius: 4px;
display: none; display: none;
border: 1px solid #CCC; padding: 20px;
padding: 10px;
width: 500px; width: 500px;
} }
.suggestion-container h1{ .suggestion-container h1{
color:#D74924; color:#D74924;
font-size: 1.4em; font-size: 1.4em;
font-weight: 400; font-weight: 400;
margin: 10px 0; margin-bottom:22px;
} }
.suggestion-container label{ .suggestion-container label{
float: left; float: left;
text-align: right; text-align: left;
width: 90px; width: 90px;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
margin-right: 25px; margin-right: 25px;
padding-top: 12px;
} }
.suggestion-form-button{ .suggestion-form-button{
border-radius: 4px; border-radius: 4px;
border: 1px solid #cb5921; border: 1px solid #cb5921;
padding: 6px 10px 6px 12px; padding: 6px 10px 6px 12px;
color: #fff; color: #fff;
float: right; float: left;
margin-right: 75px; margin-left: 115px;
margin-top: 10px;
text-decoration: none; text-decoration: none;
text-shadow: 1px 1px 0px rgba(0,0,0,.22); text-shadow: 1px 1px 0px rgba(0,0,0,.22);
background: -moz-linear-gradient(#f57333, #f26926); background: -moz-linear-gradient(#f57333, #f26926);
@ -1664,31 +1667,46 @@ html[xmlns] .clearfix {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f57333', endColorstr='#f26926')"; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f57333', endColorstr='#f26926')";
background: linear-gradient(#f57333, #f26926); background: linear-gradient(#f57333, #f26926);
} }
.suggestion-link{ .suggestion-link-container{
font-style: italic; margin-bottom: 30px;
font-weight: bold;
} }
.suggestion-link{
font-style: italic;
font-weight: bold;
}
.suggestion-help{ .suggestion-help{
color: #CCC;
cursor: pointer; cursor: pointer;
display: inline-block;
font-weight: bold; font-weight: bold;
font-style: italic; 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{ .suggestion-help-content{
border: 1px solid #d74924; border: 1px solid #CCC;
background: #FFF; border-radius: 3px;
color: #999;
display: none; display: none;
font-size:.9em; font-size:.85em;
line-height: 1.6em;
margin: 5px 0; margin: 5px 0;
padding:3px; padding:5px;
width: 200px; width: auto;
} }
.ui-icon-closethick{ .ui-icon-closethick{
color: #FFF; color: #FFF;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
display: block;
float: right; float: right;
margin-bottom: 5px; font-weight: normal;
margin-bottom: 8px;
margin-right: 6px;
} }
@ -1750,7 +1768,9 @@ html[xmlns] .clearfix {
.restaurant-items { .restaurant-items {
position: absolute; position: absolute;
} }
.suggestion-help-content{
width: 200px;
}
} }
@media only screen and (min-width : 770px) and (max-width : 1023px) { @media only screen and (min-width : 770px) and (max-width : 1023px) {
@ -1780,9 +1800,6 @@ html[xmlns] .clearfix {
margin-left: -321px; margin-left: -321px;
left: 50%; left: 50%;
} }
.suggestion-link-container{
margin-bottom: 30px;
}
} }
th { th {

23
www/assets/js/app.js
View File

@ -2151,7 +2151,6 @@ App.suggestion.init = function(){
$( '.suggestion-help-content' ).toggle( 'fast' ); $( '.suggestion-help-content' ).toggle( 'fast' );
} ) } )
App.suggestion.shield.init(); App.suggestion.shield.init();
} }
App.suggestion.form = function(){ App.suggestion.form = function(){
@ -2197,15 +2196,15 @@ App.suggestion.send = function(){
url: suggestionURL, url: suggestionURL,
success: function(content) { success: function(content) {
console.log( 'oi' ) console.log( 'oi' )
App.suggestion.message( 'Thanks' ); App.suggestion.message( '<h1>Thanks</h1>' );
} }
}); });
} }
App.suggestion.link = function(){ App.suggestion.link = function(){
return '<div class="suggestion-link-container">' + return '<div class="suggestion-link-container">' +
'<a href="javascript:;" class="suggestion-link"> Suggest other food </a>' + '<a href="javascript:;" class="suggestion-link">Suggest other food</a>' +
'<span class="suggestion-help"> ? </span>' + '<span class="suggestion-help"> ( ? ) </span>' +
'<div class="suggestion-help-content">' + '<div class="suggestion-help-content">' +
'Crunchbutton "curates" menus. We\'ve curated just the top food here. ' + '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.' + '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(){ setTimeout( function(){
// Shows the shield // Shows the shield
App.suggestion.shield.show(); App.suggestion.shield.show();
$( '.suggestion-container' ).dialog( { $( '.suggestion-container' )
width: App.suggestion.contentWidth(), .dialog( {
close: function( event, ui ) { App.suggestion.shield.close(); }, width: App.suggestion.contentWidth(),
open: function( event, ui ) { $( '.suggestion-name' ).focus(); } close: function( event, ui ) { App.suggestion.shield.close(); },
} ); open: function( event, ui ) { $( '.suggestion-name' ).focus(); }
} );
},100 ); },100 );
} }
App.suggestion.contentWidth = function(){ App.suggestion.contentWidth = function(){
if( $( window ).width() > 700 ){ if( $( window ).width() > 700 ){
return 600; return 566;
} }
if( $( window ).width() <= 700 ){ if( $( window ).width() <= 700 ){
return $( window ).width() - 50; return $( window ).width() - 50;
@ -2249,6 +2249,7 @@ App.suggestion.contentWidth = function(){
} }
App.suggestion.shield = { 'isVisible' : false } App.suggestion.shield = { 'isVisible' : false }
App.suggestion.shield.resize = function(){ App.suggestion.shield.resize = function(){
if( App.suggestion.shield.isVisible ){ if( App.suggestion.shield.isVisible ){
$( '.suggest-shield' ).width( $( window ).width() ); $( '.suggest-shield' ).width( $( window ).width() );
@ -2257,7 +2258,7 @@ App.suggestion.shield.resize = function(){
} }
App.suggestion.shield.init = function(){ App.suggestion.shield.init = function(){
$( 'body' ).append( '<div class="suggest-shield"></div>' ); $( '.wrapper' ).append( '<div class="suggest-shield"></div>' );
$( window ).resize( function() { $( window ).resize( function() {
App.suggestion.shield.resize(); App.suggestion.shield.resize();
} ); } );