BS3: add bike.

app/views/bikes/new.html.haml

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