Improved Add Bike view

Worked out some bootstrap overrides issues

app/assets/javascripts/application.js

@@ -12,3 +12,4 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require twitter/bootstrap/bootstrap-button

app/assets/stylesheets/application.css

@@ -9,5 +9,5 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require_tree .
+ *= require bootstrap_and_overrides
 */

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -1,10 +1,26 @@
 @import "twitter/bootstrap/bootstrap";
+body { 
+	padding-top: 60px;
+	padding-left: 20px;
+}
+
 @import "twitter/bootstrap/responsive";
 
 // Set the correct sprite paths
 @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
 @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
 
+// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
+// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not 
+//       have the proper paths. So for now we use the absolute path.
+@fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
+@fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
+@fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
+@fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';
+
+// Font Awesome
+@import "fontawesome";
+
 // Your custom LESS stylesheets goes here
 //
 // Since bootstrap was imported above you have access to its mixins which
@@ -15,3 +31,8 @@
 //
 // Example:
 // @linkColor: #ff0000;
+
+[data-toggle="buttons-radio"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+  display: none;
+}

app/controllers/bikes_controller.rb

@@ -1,6 +1,10 @@
 class BikesController < AuthenticatedController
 
   def new
+    @brands = BikeBrand.all.map{ |b| [b.brand, b.id] }
+    @brands.unshift( ["Select a brand", -1] )
+    @wheel_sizes = BikeWheelSize.all.map{ |w| [w.display_string, w.id] }
+    @wheel_sizes.unshift( ["Select a wheel size", -1] )
   end
 
 end

app/views/bikes/new.html.haml

@@ -1,18 +1,14 @@
-= stylesheet_link_tag "bootstrap_and_overrides", :media => "all"
 %h2 Add Bike
 
 %p
   %p
     %input{id: "bike_shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" }
   %p
-    %select{id: "bike_brand_id"}
+    = select_tag(:bike_brand_id, options_for_select(@brands))
-      %option Select a brand
-      %option Huffy
-      %option Raleigh
   %p
     %input{id: "bike_model", placeholder: "Model", type: "text", class: "input-lg" }
   %p
-    .btn-group{ "data-toggle" => "buttons"}
+    .btn-group{ "data-toggle" => "buttons-radio"}
       %label{ class: "btn btn-default"}
         %input{ type: "radio", name: "options"} RD
       %label{ class: "btn btn-default"}
@@ -22,12 +18,9 @@
       %label{ class: "btn btn-default"}
         %input{ type: "radio", name: "options"} OTHER
   %p
-    %select{id: "bike_wheel_size"}
+    = select_tag(:bike_wheel_size, options_for_select(@wheel_sizes))
-      %option Selet a wheel size
-      %option 27 x 1,75
-      %option 26 x 1,75
   %p
-    .btn-group{ "data-toggle" => "buttons"}
+    .btn-group{ "data-toggle" => "buttons-radio"}
       %label{ class: "btn btn-default"}
         %input{ type: "radio", name: "options"} Poor
       %label{ class: "btn btn-default"}
@@ -37,7 +30,7 @@
       %label{ class: "btn btn-default"}
         %input{ type: "radio", name: "options"} Excellent
   %p
-    %input{id: "bike_seat_tube", placeholder: "Seat Tube", type: "number", min: 0, max: 100, class: "input-lg" }
+    %input{id: "bike_seat_tube", placeholder: "Seat Tube (cm)", type: "number", min: 0, max: 100, class: "input-lg" }
   %p
     %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
   %p

app/views/layouts/application.html.haml

@@ -4,6 +4,7 @@
     %meta{:charset => "utf-8"}/
     %title= content_for?(:title) ? yield(:title) : "Velocipede"
     = csrf_meta_tags
+    = stylesheet_link_tag "bootstrap_and_overrides", :media => "all"
     /[if lt IE 9]
       = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
     :css