Commit 06a59c64

mo k <mo@mokhan.ca>
2012-05-31 13:18:52
update the autocomplete styles to look like the twitter typeahead css.
1 parent cfb0c08
Changed files (2)
app
assets
stylesheets
views
registrations
app/assets/stylesheets/custom.css.scss
@@ -3,25 +3,25 @@
 .hidden{display:none;}
 
 footer {
-	margin-top:19px;
-  	padding-top:19px;
-    background: none repeat scroll 0 0 #333333;
-    border-top: medium none;
+  margin-top:19px;
+  padding-top:19px;
+  background: none repeat scroll 0 0 #333333;
+  border-top: medium none;
 }
 footer a {
-    color: #FFFFFF;
+  color: #FFFFFF;
 }
 footer h3 {
-    color: #999999;
+  color: #999999;
 }
 
 footer #footer-floor {
-    background: none repeat scroll 0 0 #1B1B1B;
-	padding-top: 9px;
+  background: none repeat scroll 0 0 #1B1B1B;
+  padding-top: 9px;
 }
 
 .hero-unit {
-padding: 40px;
+  padding: 40px;
 }
 .hero-unit h1 {
   margin-bottom: 20px;
@@ -29,53 +29,107 @@ padding: 40px;
 }
 
 .logo {
-	padding-left: 30px;
-    padding-top: 30px;
+  padding-left: 30px;
+  padding-top: 30px;
 }
 
 /** marketing value statements **/
 .marketing .row {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 .marketing h1 {
-    font-size: 40px;
-    font-weight: 300;
-    margin: 36px 0 27px;
-    text-align: center;
+  font-size: 40px;
+  font-weight: 300;
+  margin: 36px 0 27px;
+  text-align: center;
 }
 .marketing h2, .marketing h3 {
-    font-weight: 300;
+  font-weight: 300;
 }
 .marketing h2 {
-    font-size: 22px;
-	line-height: 24px;
+  font-size: 22px;
+  line-height: 24px;
 }
 .marketing p {
-    margin-right: 10px;
-    margin-top: 5px;
+  margin-right: 10px;
+  margin-top: 5px;
 }
 .marketing .bs-icon {
-    margin: 7px 10px 0 0;
-    opacity: 0.8;
+  margin: 7px 10px 0 0;
+  opacity: 0.8;
 }
 .marketing .small-bs-icon {
-    float: left;
-    margin: 4px 5px 0 0;
+  float: left;
+  margin: 4px 5px 0 0;
 }
 
 
 #error_explanation {
- @extend .control-group;
-@extend .error;  
-color: #f00;
+  @extend .control-group;
+  @extend .error;  
+  color: #f00;
   ul {
     list-style: none;
     margin: 0 0 18px 0;
-  }
+}
 }
 
 .field_with_errors{
- @extend .control-group;
- @extend .error;
+  @extend .control-group;
+  @extend .error;
+
+}
 
+
+.ui-autocomplete {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  display: none;
+  min-width: 160px;
+  _width: 160px;
+  padding: 4px 0;
+  margin: 2px 0 0 0;
+  list-style: none;
+  background-color: #ffffff;
+  border-color: #ccc;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+
+  .ui-menu-item > a.ui-corner-all {
+    display: block;
+    padding: 3px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: 18px;
+    color: #555555;
+    white-space: nowrap;
+
+    &.ui-state-hover, &.ui-state-active
+    {
+      color: #ffffff;
+      text-decoration: none;
+      background-color: #0088cc;
+      border-radius: 0px;
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+      background-image: none;
+    }
+  }
 }
+
+
app/views/registrations/edit.html.erb
@@ -75,6 +75,7 @@
         <div class="control-group">
           <%= f.label :city, :class => 'control-label' %>
           <div class="controls"> <%= f.text_field :city, :class => "input-xlarge" %> </div>
+<%#<input type="text" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="4" data-provide="typeahead" style="margin: 0 auto;" class="span3">%>
         </div><!-- /control-group -->
         <div class="control-group">
           <%= f.label :website, :class => "control-label" %> 
@@ -107,6 +108,8 @@
           <input type="submit" class="btn btn-primary" value="Save changes" />
           <button type="reset" class="btn">Cancel</button>
         </div>
+
+
         <%= f.hidden_field :latitude %>
         <%= f.hidden_field :longitude %>
       </fieldset>