From 13256612a65b25d21b8ae2a7009fecac9cb1128c Mon Sep 17 00:00:00 2001 From: Ty Lacock Date: Tue, 1 May 2012 23:46:59 -0400 Subject: [PATCH] updated interface with bootstrap --- Gemfile | 2 + Gemfile.lock | 2 + app/assets/stylesheets/application.css.scss | 9 +- app/assets/stylesheets/products.css.scss | 94 ++++++++-------- app/assets/stylesheets/scaffolds.css.scss | 114 ++++++++++---------- app/assets/stylesheets/store.css.scss | 80 +++++++------- app/views/layouts/application.html.erb | 64 ++++++++--- app/views/products/_form.html.erb | 7 +- app/views/products/edit.html.erb | 6 +- app/views/products/index.html.erb | 18 ++-- app/views/products/new.html.erb | 4 +- app/views/store/index.html.erb | 26 +++-- config.ru | 1 + 13 files changed, 241 insertions(+), 186 deletions(-) diff --git a/Gemfile b/Gemfile index ab4e34b..9e63344 100644 --- a/Gemfile +++ b/Gemfile @@ -18,6 +18,8 @@ group :assets do # gem 'therubyracer', :platform => :ruby gem 'uglifier', '>= 1.0.3' + + gem 'bootstrap-sass', '~> 2.0.2' end gem 'jquery-rails' diff --git a/Gemfile.lock b/Gemfile.lock index d3712ef..30f3757 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -29,6 +29,7 @@ GEM i18n (~> 0.6) multi_json (~> 1.0) arel (3.0.2) + bootstrap-sass (2.0.2) builder (3.0.0) coffee-rails (3.2.2) coffee-script (>= 2.2.0) @@ -103,6 +104,7 @@ PLATFORMS ruby DEPENDENCIES + bootstrap-sass (~> 2.0.2) coffee-rails (~> 3.2.1) jquery-rails rails (= 3.2.3) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index ae1e0cc..7b94f72 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -11,9 +11,14 @@ *= require_self *= require_tree . */ +@import "bootstrap"; + +img { +float: left; +} -#banner { +/*#banner { background: #9c9; padding: 10px; border-bottom: 2px solid; @@ -63,4 +68,4 @@ font-size: small; } } } -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/app/assets/stylesheets/products.css.scss b/app/assets/stylesheets/products.css.scss index c1fcb17..f6962f2 100644 --- a/app/assets/stylesheets/products.css.scss +++ b/app/assets/stylesheets/products.css.scss @@ -2,50 +2,50 @@ // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ -.products { -table { -border-collapse: collapse; -} - -table tr td { -padding: 5px; -vertical-align: top; -} - -.list_image { -width: 60px; -height: 70px; -} - -.list_description { -width: 60%; - -dl { -margin: 0; -} - -dt { -color: #244; -font-weight: bold; -font-size: larger; -} - -dd { -margin: 0; -} -} - -.list_actions { -font-size: x-small; -text-align: right; -padding-left: 1em; -} - -.list_line_even { -background: #e0f8f8; -} - -.list_line_odd { -background: #f8b0f8; -} -} +// .products { +// table { +// border-collapse: collapse; +// } + +// table tr td { +// padding: 5px; +// vertical-align: top; +// } + +// .list_image { +// width: 60px; +// height: 70px; +// } + +// .list_description { +// width: 60%; + +// dl { +// margin: 0; +// } + +// dt { +// color: #244; +// font-weight: bold; +// font-size: larger; +// } + +// dd { +// margin: 0; +// } +// } + +// .list_actions { +// font-size: x-small; +// text-align: right; +// padding-left: 1em; +// } + +// .list_line_even { +// background: #e0f8f8; +// } + +// .list_line_odd { +// background: #f8b0f8; +// } +// } diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss index 05188f0..3292b6f 100644 --- a/app/assets/stylesheets/scaffolds.css.scss +++ b/app/assets/stylesheets/scaffolds.css.scss @@ -1,56 +1,58 @@ -body { - background-color: #fff; - color: #333; - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; } - -p, ol, ul, td { - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; } - -pre { - background-color: #eee; - padding: 10px; - font-size: 11px; } - -a { - color: #000; - &:visited { - color: #666; } - &:hover { - color: #fff; - background-color: #000; } } - -div { - &.field, &.actions { - margin-bottom: 10px; } } - -#notice { - color: green; } - -.field_with_errors { - padding: 2px; - background-color: red; - display: table; } - -#error_explanation { - width: 450px; - border: 2px solid red; - padding: 7px; - padding-bottom: 0; - margin-bottom: 20px; - background-color: #f0f0f0; - h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - margin-bottom: 0px; - background-color: #c00; - color: #fff; } - ul li { - font-size: 12px; - list-style: square; } } +@import "bootstrap"; + +// body { +// background-color: #fff; +// color: #333; +// font-family: verdana, arial, helvetica, sans-serif; +// font-size: 13px; +// line-height: 18px; } + +// p, ol, ul, td { +// font-family: verdana, arial, helvetica, sans-serif; +// font-size: 13px; +// line-height: 18px; } + +// pre { +// background-color: #eee; +// padding: 10px; +// font-size: 11px; } + +// a { +// color: #000; +// &:visited { +// color: #666; } +// &:hover { +// color: #fff; +// background-color: #000; } } + +// div { +// &.field, &.actions { +// margin-bottom: 10px; } } + +// #notice { +// color: green; } + +// .field_with_errors { +// padding: 2px; +// background-color: red; +// display: table; } + +// #error_explanation { +// width: 450px; +// border: 2px solid red; +// padding: 7px; +// padding-bottom: 0; +// margin-bottom: 20px; +// background-color: #f0f0f0; +// h2 { +// text-align: left; +// font-weight: bold; +// padding: 5px 5px 5px 15px; +// font-size: 12px; +// margin: -7px; +// margin-bottom: 0px; +// background-color: #c00; +// color: #fff; } +// ul li { +// font-size: 12px; +// list-style: square; } } diff --git a/app/assets/stylesheets/store.css.scss b/app/assets/stylesheets/store.css.scss index 6349a90..8864931 100644 --- a/app/assets/stylesheets/store.css.scss +++ b/app/assets/stylesheets/store.css.scss @@ -2,47 +2,47 @@ // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ -.store { - h1 { - margin: 0; - padding-bottom: 0.5em; - font: 150% sans-serif; - color: #226; - border-bottom: 3px dotted #77d; - } +// .store { +// h1 { +// margin: 0; +// padding-bottom: 0.5em; +// font: 150% sans-serif; +// color: #226; +// /*border-bottom: 3px dotted #77d;*/ +// } - /* An entry in the store catalog */ - .entry { - overflow: auto; - margin-top: 1em; - border-bottom: 1px dotted #77d; - min-height: 100px; +// /* An entry in the store catalog */ +// .entry { +// overflow: auto; +// margin-top: 1em; +// border-bottom: 1px dotted #77d; +// min-height: 100px; - img { - width: 80px; - margin-right: 5px; - margin-bottom: 5px; - position: absolute; - } - h3 { - font-size: 120%; - font-family: sans-serif; - margin-left: 100px; - margin-top: 0; - margin-bottom: 2px; - color: #227; - } +// img { +// width: 80px; +// margin-right: 5px; +// margin-bottom: 5px; +// position: absolute; +// } +// h3 { +// font-size: 120%; +// font-family: sans-serif; +// margin-left: 100px; +// margin-top: 0; +// margin-bottom: 2px; +// color: #227; +// } - p, div.price_line { - margin-left: 100px; - margin-top: 0.5em; - margin-bottom: 0.8em; - } +// p, div.price_line { +// margin-left: 100px; +// margin-top: 0.5em; +// margin-bottom: 0.8em; +// } - .price { - color: #44a; - font-weight: bold; - margin-right: 3em; - } - } -} \ No newline at end of file +// .price { +// color: #44a; +// font-weight: bold; +// margin-right: 3em; +// } +// } +// } \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b323f1a..8c7d824 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -7,27 +7,57 @@ <%= csrf_meta_tags %> - + +
+
+
+ + <%= image_tag("logo.png") %> + <%= @page_title || "Pragmatic Bookshelf" %> + + +
+
+
-
-
- -
+ +
+
+
+ + +
-
- <%= yield %> -
+ +
+ + <%= yield %> +
+
+
-
+ + diff --git a/app/views/products/_form.html.erb b/app/views/products/_form.html.erb index bc9b9f4..2bd82ab 100644 --- a/app/views/products/_form.html.erb +++ b/app/views/products/_form.html.erb @@ -4,8 +4,9 @@

<%= pluralize(@product.errors.count, "error") %> prohibited this product from being saved:

@@ -27,7 +28,7 @@ <%= f.label :price %>
<%= f.text_field :price %> -
+
<%= f.submit %>
<% end %> diff --git a/app/views/products/edit.html.erb b/app/views/products/edit.html.erb index 39f7f4f..5d5716c 100644 --- a/app/views/products/edit.html.erb +++ b/app/views/products/edit.html.erb @@ -2,5 +2,7 @@ <%= render 'form' %> -<%= link_to 'Show', @product %> | -<%= link_to 'Back', products_path %> +
+ <%= link_to 'Show', @product, class: "btn" %> + <%= link_to 'Back', products_path, class: "btn" %> +
\ No newline at end of file diff --git a/app/views/products/index.html.erb b/app/views/products/index.html.erb index 9fe6e23..8786c55 100644 --- a/app/views/products/index.html.erb +++ b/app/views/products/index.html.erb @@ -1,23 +1,25 @@

Listing products

- +
<% @products.each do |product| %> - + - - @@ -27,4 +29,4 @@
-<%= link_to 'New product', new_product_path %> \ No newline at end of file +<%= link_to 'New product', new_product_path, class: "btn btn-success" %> \ No newline at end of file diff --git a/app/views/products/new.html.erb b/app/views/products/new.html.erb index e5e0037..a8dadf1 100644 --- a/app/views/products/new.html.erb +++ b/app/views/products/new.html.erb @@ -2,4 +2,6 @@ <%= render 'form' %> -<%= link_to 'Back', products_path %> +
+ <%= link_to 'Back', products_path, class: "btn" %> +
diff --git a/app/views/store/index.html.erb b/app/views/store/index.html.erb index 205e43b..4b72a7e 100644 --- a/app/views/store/index.html.erb +++ b/app/views/store/index.html.erb @@ -2,15 +2,21 @@

<% notice %>

<% end %> +

Product List

-<% @products.each do |product| %> -
- <%= image_tag(product.image_url) %> -

<%= product.title %>

- <%= sanitize(product.description) %> -
- <%= number_to_currency(product.price) %> -
-
-<% end %> \ No newline at end of file + +
<%= image_tag(product.image_url, class: 'list_image') %> +
<%= product.title %>
<%= truncate(strip_tags(product.description), length: 80) %>
 - <%= link_to 'Show', product %>
- <%= link_to 'Edit', edit_product_path(product) %>
- <%= link_to 'Destroy', product, confirm: 'Are you Sure?', method: :delete %> + 		+ <%= link_to 'Show', product, class: "btn btn-primary" %> + <%= link_to 'Edit', edit_product_path(product), class: "btn btn-warning" %> + <%= link_to 'Destroy', product, class: "btn btn-danger", + confirm: 'Are you Sure?', + method: :delete %>
+ <% @products.each do |product| %> + + + + + <% end %> +
+ <%= image_tag(product.image_url) %> + +

<%= product.title %>

+ <%= sanitize(product.description) %> + <%= number_to_currency(product.price) %> +
diff --git a/config.ru b/config.ru index d5d8bb5..c52faa7 100644 --- a/config.ru +++ b/config.ru @@ -2,3 +2,4 @@ require ::File.expand_path('../config/environment', __FILE__) run Depot::Application +require 'bootstrap-sass' \ No newline at end of file