BS3: add bike.

app/views/bikes/new.html.haml

@@ -1,62 +1,73 @@
 = top_menu link_to_dashboard
 
-%h2 Add Bike
-
-%p
-  .control-group
-    .controls
-      %input{id: "shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" }
-      .help-block
-  .control-group
-    .controls
-      = select_tag(:bike_brand_id, options_for_select(@brands))
-      .help-block
-  .control-group
-    .controls
-      %input{id: "model", placeholder: "Model", type: "text", class: "input-lg" }
-      .help-block
-  .control-group
-    .controls
-      %input{id: "serial_number", placeholder: "Serial Number", type: "text", class: "input-lg" }
-      .help-block
-  .control-group
-    .controls
-      .btn-group{ "data-toggle" => "buttons-radio"}
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_style", value: 3} RD
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_style", value: 1} MTN
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_style", value: 2} HYB
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_style", value: 4} OTHER
-    %input{ id: "bike_style_id", type: "hidden"}
-    .help-block
-  .control-group
-    .controls
-      = select_tag(:bike_wheel_size_id, options_for_select(@wheel_sizes), id: :bike_wheel_size_id)
-      .help-block
-  .control-group
-    .controls
-      .btn-group{ "data-toggle" => "buttons-radio"}
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_condition", value: 2} Poor
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_condition", value: 3} Fair
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_condition", value: 4} Good
-        %label{ class: "btn btn-default"}
-          %input{ type: "radio", name: "bike_condition", value: 5} Excellent
-    %input{ id: "bike_condition_id", type: "hidden"}
-    .help-block
-  .control-group
-    .controls
-      %input{id: "seat_tube_height", placeholder: "Seat Tube (cm)", type: "number", min: 0, max: 100, class: "input-lg" }
-      .help-block
-  -# Commenting this out until description is added to Bike
-    %p
-      %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
-  .control-group
-    .controls
-      %input{id: "add_bike_submit", value: "Add Bike", type: "button", class: "btn btn-lg btn-block btn-primary", "data-url" => "#{api_create_bike_path}"}
+%h1 Add Bike
 
+.row
+  .col-xs-12.col-sm-6.col-lg-4
+    %fieldset
+      .form-group
+        = number_field_tag '', '', id: 'shop_id', placeholder: 'Shop ID', min: 0, class: 'form-control'
+        .help-block
+
+      .form-group
+        = select_tag :bike_brand_id, options_for_select(@brands), class: 'form-control'
+        .help-block
+
+      .form-group
+        = text_field_tag '', '', id: 'model', placeholder: 'Model', class: 'form-control'
+        .help-block
+
+      .form-group
+        = text_field_tag '', '', id: 'serial_number', placeholder: 'Serial Number', class: 'form-control'
+        .help-block
+
+      .form-group
+        .btn-group{"data-toggle": 'buttons'}
+          %label.btn.btn-default
+            = radio_button_tag 'bike_style', 3
+            RD
+          %label.btn.btn-default
+            = radio_button_tag 'bike_style', 1
+            MTN
+          %label.btn.btn-default
+            = radio_button_tag 'bike_style', 2
+            HYB
+          %label.btn.btn-default
+            = radio_button_tag 'bike_style', 4
+            OTHER
+        = hidden_field_tag '', '', id: 'bike_style_id'
+        .help-block
+
+      .form-group
+        = select_tag :bike_wheel_size_id, options_for_select(@wheel_sizes), id: :bike_wheel_size_id, class: 'form-control'
+        .help-block
+
+      .form-group
+        .btn-group{ "data-toggle": 'buttons'}
+          %label.btn.btn-default
+            = radio_button_tag 'bike_condition', 2
+            Poor
+          %label.btn.btn-default
+            = radio_button_tag 'bike_condition', 3
+            Fair
+          %label.btn.btn-default
+            = radio_button_tag 'bike_condition', 4
+            Good
+          %label.btn.btn-default
+            = radio_button_tag 'bike_condition', 5
+            Excellent
+        = hidden_field_tag '', '', id: 'bike_condition_id'
+        .help-block
+
+      .form-group
+        .input-group
+          = number_field_tag '', '', id: 'seat_tube_height', placeholder: 'Seat Tube', min: 0, max: 100, class: "form-control"
+          .input-group-addon cm
+        .help-block
+
+      -# Commenting this out until description is added to Bike
+        /.form-group
+          %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
+
+      .form-group
+        = button_tag 'Add Bike', id: 'add_bike_submit', class: 'btn btn-primary', "data-url": "#{api_create_bike_path}"