Browse Source

Improved Add Bike view

Worked out some bootstrap overrides issues
denney-fix-saving-dates
Jason Denney 11 years ago
parent
commit
a8bdb52536
  1. 1
      app/assets/javascripts/application.js
  2. 2
      app/assets/stylesheets/application.css
  3. 21
      app/assets/stylesheets/bootstrap_and_overrides.css.less
  4. 4
      app/controllers/bikes_controller.rb
  5. 17
      app/views/bikes/new.html.haml
  6. 1
      app/views/layouts/application.html.haml

1
app/assets/javascripts/application.js

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

2
app/assets/stylesheets/application.css

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

21
app/assets/stylesheets/bootstrap_and_overrides.css.less

@ -1,10 +1,26 @@
@import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
padding-left: 20px;
}
@import "twitter/bootstrap/responsive"; @import "twitter/bootstrap/responsive";
// Set the correct sprite paths // Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png'); @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.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 // Your custom LESS stylesheets goes here
// //
// Since bootstrap was imported above you have access to its mixins which // Since bootstrap was imported above you have access to its mixins which
@ -15,3 +31,8 @@
// //
// Example: // Example:
// @linkColor: #ff0000; // @linkColor: #ff0000;
[data-toggle="buttons-radio"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}

4
app/controllers/bikes_controller.rb

@ -1,6 +1,10 @@
class BikesController < AuthenticatedController class BikesController < AuthenticatedController
def new 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
end end

17
app/views/bikes/new.html.haml

@ -1,18 +1,14 @@
= stylesheet_link_tag "bootstrap_and_overrides", :media => "all"
%h2 Add Bike %h2 Add Bike
%p %p
%p %p
%input{id: "bike_shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" } %input{id: "bike_shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" }
%p %p
%select{id: "bike_brand_id"} = select_tag(:bike_brand_id, options_for_select(@brands))
%option Select a brand
%option Huffy
%option Raleigh
%p %p
%input{id: "bike_model", placeholder: "Model", type: "text", class: "input-lg" } %input{id: "bike_model", placeholder: "Model", type: "text", class: "input-lg" }
%p %p
.btn-group{ "data-toggle" => "buttons"} .btn-group{ "data-toggle" => "buttons-radio"}
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
%input{ type: "radio", name: "options"} RD %input{ type: "radio", name: "options"} RD
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
@ -22,12 +18,9 @@
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
%input{ type: "radio", name: "options"} OTHER %input{ type: "radio", name: "options"} OTHER
%p %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 %p
.btn-group{ "data-toggle" => "buttons"} .btn-group{ "data-toggle" => "buttons-radio"}
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
%input{ type: "radio", name: "options"} Poor %input{ type: "radio", name: "options"} Poor
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
@ -37,7 +30,7 @@
%label{ class: "btn btn-default"} %label{ class: "btn btn-default"}
%input{ type: "radio", name: "options"} Excellent %input{ type: "radio", name: "options"} Excellent
%p %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 %p
%input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" } %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
%p %p

1
app/views/layouts/application.html.haml

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

Loading…
Cancel
Save