From 9d4caaec11c3659d2ae0b944c2bcbb4f199ad6bf Mon Sep 17 00:00:00 2001
From: arzynik <github@arzynik.com>
Date: Sat, 30 Nov 2013 11:26:15 -0800
Subject: [PATCH] added partial functionality for unserved location page. needs
 login functionality

---
 .../default/seven/frontend/location.phtml     | 115 +++++++++++++++---
 www/assets/css/seven.css                      |  37 ++++--
 2 files changed, 125 insertions(+), 27 deletions(-)

diff --git a/include/views/default/seven/frontend/location.phtml b/include/views/default/seven/frontend/location.phtml
index 757326c1f..927ed7160 100644
--- a/include/views/default/seven/frontend/location.phtml
+++ b/include/views/default/seven/frontend/location.phtml
@@ -1,27 +1,104 @@
 <div class="bg">
 	<div class="home-top">
 		<div class="top-pad"></div>
-		<div class="pushabutton"></div>
-		<div class="home-inputs">
-			<h4>What's your address?</h4>
-			<table cellpadding="0" cellspacing="0" class="home-location">
-				<tr>
-					<td style="width: 100%;"><input class="location-address" autocapitalize="off" autocorrect="off" placeholder="e.g. 37 Elm St, New Haven CT 06511" ng-enter="letsEat()" ng-model="location.form.address" geo-complete></td>
-					<td>				
-						<button class="location-detect ladda-button" ng-spinner data-style="zoom-out" data-spinner-color="#FFFFFF" ng-click="locEat()">
-							<span class="fa fa-location-arrow "></span>
-							<div class="ladda-spinner"></div>
-						</button>
-					</td>
-				</tr>
-			</table>
-			<div class="button-pushable find-restaurants">
-				<button class="button orange find-restaurants button-letseat-form ladda-button" ng-click="letsEat()" ng-spinner data-style="zoom-out" data-spinner-color="#FFFFFF">
-					<div class="ladda-label">Find Restaurants!</div>
-					<span class="ladda-spinner"></span>
-				</button>
+	
+		<div ng-show="!locationError">
+			<div class="pushabutton"></div>
+			<div class="home-inputs">
+				<h4 class="action">What's your address?</h4>
+				<table cellpadding="0" cellspacing="0" class="home-location">
+					<tr>
+						<td style="width: 100%;"><input class="location-address" autocapitalize="off" autocorrect="off" placeholder="e.g. 37 Elm St, New Haven CT 06511" ng-enter="letsEat()" ng-model="location.form.address" geo-complete></td>
+						<td>				
+							<button class="location-detect ladda-button" ng-spinner data-style="zoom-out" data-spinner-color="#FFFFFF" ng-click="locEat()">
+								<span class="fa fa-location-arrow "></span>
+								<div class="ladda-spinner"></div>
+							</button>
+						</td>
+					</tr>
+				</table>
+				<div class="button-pushable find-restaurants">
+					<button class="button orange find-restaurants button-letseat-form ladda-button" ng-click="letsEat()" ng-spinner data-style="zoom-out" data-spinner-color="#FFFFFF">
+						<div class="ladda-label">Find Restaurants!</div>
+						<span class="ladda-spinner"></span>
+					</button>
+				</div>
 			</div>
 		</div>
+		
+		<div ng-show="locationError">
+			<div class="home-inputs">
+			<div class="splash-inputs">
+
+				<div class="cafe-bubble-wrap">
+					<div class="bubble-curved bubble-curved-white bubble-animated animated-resize">
+						<div class="text" ng-switch="loseMessage">
+							<div ng-show="!account.user.id_user && !recommend.greetings">
+								<span class="single-line" ng-switch-when="1">Don't worry</span>
+								<span class="small" ng-switch-when="2">Just let us know that you want crunchbutton</span>
+								<span class="small" ng-switch-when="3">and we will be there<br> as soon as we can!</span>
+								<span class="single-line" ng-switch-when="4"><i class="fa fa-cutlery"></i> <i class="fa fa-cutlery"></i> <i class="fa fa-cutlery"></i></span>
+								<span class="single-line" ng-switch-default><b>Oh, no!</b></span>
+							</div>
+							<div ng-show="account.user.id_user && !recommend.greetings">
+								<span class="single-line" ng-switch-when="1">What's the best?</span>
+								<span ng-switch-when="2">We listen to our users</span>
+								<span class="small" ng-switch-when="3">Let us know <br>and we will add it!</span>
+								<span class="single-line" ng-switch-when="4"><i class="fa fa-heart"></i> <i class="fa fa-heart"></i> <i class="fa fa-heart"></i></span>
+								<span ng-switch-default><b>What's your favorite?</b></span>
+							</div>
+							<div ng-show="recommend.greetings">
+								<span class="small" ng-switch-when="1">We check this<br> stuff daily!</span>
+								<span class="small" ng-switch-when="2">We will get back to you as soon as we can!</span>
+								<span class="single-line" ng-switch-when="3"><i class="fa fa-heart"></i> <i class="fa fa-heart"></i> <i class="fa fa-heart"></i></span>
+								<span class="single-line" ng-switch-when="4"><i class="fa fa-heart"></i> <i class="fa fa-heart"></i> <i class="fa fa-heart"></i> <i class="fa fa-heart"></i> <i class="fa fa-heart"></i></span>
+								<span class="single-line" ng-switch-default><b>Thanks!</b></span>
+							</div>
+						</div>
+					</div>
+					<div class="bubble-curved-spacer"></div>
+				</div>
+				<div class="faq-tomato-green animated-resize" ng-instant="loseMessage = (loseMessage > 3 ? 0 : (loseMessage+1))" instant-pass-thru></div>
+				<div class="divider spacer-one-two"></div>
+				
+				<div ng-show="!account.user.id_user && !recommend.greetings">
+					<h4>We don't serve that address yet.</h4>
+					<p>But you can get notified when we are in your area. We are always expanding and looking for that next popular sandwich. Log in and let us know what you want to see on crunchbutton!</p>
+					<div class="divider spacer-one-two"></div>
+
+					<div class="button-pushable">
+						<button class="button facebook" ng-click="facebook.auth()">
+							<i class="fa fa-facebook-square"></i>&nbsp;
+							<span ng-hide="facebook.facebook.wait">Log in with Facebook</span>
+							<span ng-show="facebook.facebook.wait">Just a sec...</span>
+						</button>
+					</div>
+				</div>
+				
+				<div ng-show="account.user.id_user && !recommend.greetings">
+					<h4>We don't serve that address yet.</h4>
+					<p>But you can recommend something. Let us know what you want to see on crunchbutton!</p>
+					<div class="divider spacer-one-two"></div>
+
+					<input class="location-recommend" autocapitalize="off" autocorrect="off" placeholder="e.g. Alpha Delta Pizza" ng-enter="recommend.send()" ng-model="recommend.form.restaurant">
+					
+					<div class="button-pushable">
+						<button class="button orange" ng-click="recommend.send()"><b>Recommend</b></button>
+					</div>
+				</div>
+				
+				<div ng-show="recommend.greetings">
+					<h4>Sent to our brains!</h4>
+					<p>We will let you know soon! Thanks for trying crunchbutton!</p>
+				</div>
+	
+				<p class="center-text">
+					<a href="" class="splash-continue" ng-instant="resetFormLocation()">Try another location</a>
+				</p>
+			</div>
+		</div>
+
+		</div>
 	</div>
 	
 	<div class="divider-orange-food divider-circle" ng-click="scrollHalf()"></div>
diff --git a/www/assets/css/seven.css b/www/assets/css/seven.css
index 55a0ab8a2..054a3ef28 100644
--- a/www/assets/css/seven.css
+++ b/www/assets/css/seven.css
@@ -205,6 +205,16 @@ html {
 	width: 103%;
 	box-sizing: border-box;
 }
+.location-recommend {
+	border: 2px solid #003f35;
+	border-radius: 6px;
+	font-size: 15px;
+	padding: .5em 0 .5em .6em;
+	margin: 0 0 15px 0;
+	height: 40px;
+	width: 100%;
+	box-sizing: border-box;
+}
 
 .location-detect {
 	background: #00bd9e;
@@ -249,9 +259,9 @@ html {
 	background-position: top right;
 	background-size: cover;
 	padding: 0 0 60px 0;
-}
-.home-inputs h4 {
 	color: #fff;
+}
+.home-inputs h4.action {
 	text-transform: uppercase;
 	margin-bottom: .5em;
 }
@@ -1110,12 +1120,13 @@ p {
 	
 	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.15);
 
-
+/*
 	-webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
 	   -moz-transition: -moz-transform 0.2s ease, box-shadow 0.2s ease;
 	    -ms-transition: -ms-transform 0.2s ease, box-shadow 0.2s ease;
 	     -o-transition: -o-transform 0.2s ease, box-shadow 0.2s ease;
 	        transition: transform 0.2s ease, box-shadow 0.2s ease;
+	        */
 
 }
 
@@ -1123,6 +1134,7 @@ p {
 	border: 1px solid #f78256;
 }
 .restaurants-item .restaurants-open:active {
+/*
 	-webkit-transform: translateY(2px);
 	   -moz-transform: translateY(2px);
 	    -ms-transform: translateY(2px);
@@ -1130,6 +1142,7 @@ p {
 	        transform: translateY(2px);
 
 	box-shadow: 0px 0 0 0px rgba(0,0,0,0.15);
+	*/
 }
 
 .restaurants-item {
@@ -2356,6 +2369,7 @@ sup {
 }
 .bubble-curved-white {
 	background: url(../images/micro/bubble-curved-white.svg) no-repeat;
+	color: #312f38;
 }
 
 .bubble-curved .text {
@@ -2424,14 +2438,14 @@ sup {
 	padding-left: .7em;
 }
 
-.splash-top p {
-	color: #fff;
-}
-
 .page-splash .navs {
 	display: none;
 }
 
+.center-text {
+	text-align: center;
+}
+
 .alternate-link {
 	text-transform: uppercase;
 	font-size: 1.2em;
@@ -2478,7 +2492,7 @@ sup {
 	display: inline-block;
 	width: 30em;
 }
-.splash-inputs .button.facebook {
+.splash-inputs .button {
 	padding-top: 1em;
 	padding-bottom: 1em;
 }
@@ -3068,4 +3082,11 @@ sup {
 	height: 0;
 	width: 0;
 	background: url(../images/micro/bg-sandwich.jpg);
+}
+
+.page-location .faq-tomato-green {
+	font-size: 8px;
+}
+.page-location .cafe-bubble-wrap {
+	margin-top: 0;
 }
\ No newline at end of file