Merge pull request #57 from brentgardner/master

Formatted Address UI
codefortulsa · Sep 22, 2014 · dadc165 · dadc165
2 parents 962eb02 + be274e2
commit dadc165
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 17 deletions.
diff --git a/bpz/static/css/bpz.css b/bpz/static/css/bpz.css
@@ -23,8 +23,25 @@ ul#case-list > li:active {
 	border: #428bca;
 }
 
-#btn-neighborhood {
-  font-size:2em;
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 760px) { 
+	#btn-neighborhood {
+		font-size:2em;
+	}
+}
+
+@media (max-width: 760px) {
+	.panel {
+		font-size: 10px;
+	}
+
+	.list-group-item {
+		padding: 5px 10px;
+	}
+
+	.btn {
+		font-size: 12px;
+	}
 }
 
 .scroll-area {
@@ -33,6 +50,10 @@ ul#case-list > li:active {
 	overflow: auto;
 }
 
+.alert{
+	margin-top: 10px;
+}
+
 .row-buffer {
 	margin-top: 20px;
 }
@@ -71,4 +92,5 @@ ul#case-list > li:active {
   }
   to {
     transform: rotate(360deg);
-  }
+  }
+
diff --git a/bpz/templates/bpz/address.jinja2 b/bpz/templates/bpz/address.jinja2
@@ -2,37 +2,48 @@
 
 
 {% block body_container -%}
-<div class="row">
-  <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
+<div class="container">
+
+<div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-1">
+	<div class="row">
+
     <form role="form">
       <div class="form-group">
-        <label for="streetAddress">Street Address</label> <input type="email" class="form-control" id="streetAddress" placeholder="e.g. 123 South Euclid, Tulsa OK">
+        <label for="streetAddress">Address</label> 
+				<input type="text" class="form-control" id="streetAddress" placeholder="e.g. 123 South Euclid, Tulsa OK" autofocus="autofocus">
       </div>
       <div class="form-group">
-        <p class="form-control-static">
-          <input type="emaizipcodel" class="form-control" id="zipCode" placeholder="zip code ...">
-        </p>
+        <label for="streetAddress">Zip Code</label> 
+        <input type="text" class="form-control" id="zipCode" placeholder="zip code ...">
       </div>
     </form>
+	</div>
+
+	<div class="row">
 
     <div class="btn-group">
-      <button id="use_address" type="button" class="btn btn-primary btn-block">Use this address</button> <button id="use_gps" type="button" class="btn btn-success btn-block">Use my GPS <span id="spinner" class="glyphicon glyphicon-refresh hidden"></span></button>
+      <button id="use_address" type="button" class="btn btn-primary">Use this address</button>
+		</div>
+		<div class="btn-group">
+			<button id="use_gps" type="button" class="btn btn-success">Use my GPS <span id="spinner" class="glyphicon glyphicon-refresh hidden"></span></button>
     </div>
+
     <div id="geocode_error" class="hidden">
-      <div class="alert-warning" role="alert">
+      <div class="alert alert-warning" role="alert">
         Sorry. We could not find this address.
       </div>
     </div>
     <div id="gps_error" class="hidden">
-      <div class="alert-info" role="alert">
+      <div class="alert alert-info" role="alert">
         Sorry. You have not allowed us to use your GPS. You'll need to clear your browser settings.
       </div>
     </div>
-
-
-  </div><!--end col -->
-
-</div><!--end row -->
+
+	</div><!--end row -->
+
+</div>
+
+</div><!--end container -->
 
 {% endblock body_container %}
 
@@ -63,6 +74,7 @@
     bpz.geocoder.query(st+addr.zip,function (err,data) {
       if (data === undefined) {
         $("#geocode_error").removeClass("hidden");
+				$("#streetAddress").focus();
         return;        
       }
       bpz.stored.currentLatLng = data.latlng