bootstrap2-rails 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.rdoc +44 -18
- data/app/views/shared/_menu.html.erb +32 -0
- data/app/views/shared/_search.html.erb +1 -1
- data/lib/bootstrap2-rails/menu_creator.rb +50 -29
- data/lib/bootstrap2-rails/version.rb +1 -1
- data/vendor/assets/stylesheets/bootstrap.css +4 -4
- metadata +5 -5
- data/app/views/shared/_search.html.erb~ +0 -4
data/README.rdoc
CHANGED
@@ -1,31 +1,31 @@
|
|
1
1
|
== bootstrap2-rails gem
|
2
|
-
|
2
|
+
This gem is under development and works only with Rails > 3.0.
|
3
3
|
|
4
|
-
This gem replaces Rails default scaffold to create views based on Bootstrap 2, from Twitter (http://twitter.github.com/bootstrap). There is also a toast message feature
|
4
|
+
This gem replaces Rails default scaffold to create views based on Bootstrap 2, from Twitter (http://twitter.github.com/bootstrap). There is also a toast message feature using JQuery Toast Message plugin.
|
5
5
|
|
6
6
|
When installed, this gem overrides Rails default scaffold templates, which means that any call to scaffold generator will use the gem templates. The views also are generated with some others features like search and sort.
|
7
7
|
There is also a dropdown menu generator to avoid manual menu creation.
|
8
8
|
|
9
9
|
=== Installation
|
10
|
-
|
10
|
+
Include this line inside your Gemfile:
|
11
11
|
gem 'bootstrap2-rails'
|
12
12
|
|
13
13
|
Run the bundle command to install required gems in your Rails application:
|
14
14
|
bundle
|
15
15
|
|
16
16
|
=== Generating view files
|
17
|
-
After installing gem, run the views generator to copy some needed files (caution: it will override application.html.erb)
|
17
|
+
After installing gem, run the views generator to copy some needed files (caution: it will override application.html.erb, but this action will be prompted to user). You can also modify the generated views as you need.
|
18
18
|
rails generate bootstrap:views
|
19
19
|
|
20
|
-
=== Loading
|
20
|
+
=== Loading Bootstrap and JQuery Toast Message CSS files (required)
|
21
21
|
Include these lines in your app/assets/stylesheets/application.css file to load required CSS files
|
22
22
|
*= require bootstrap
|
23
23
|
*= require jquery.toastmessage
|
24
24
|
|
25
|
-
Important: Rails default scaffold.css file overrides some CSS styles. So delete scaffold.css file or clean it up to correct working of Bootstrap styles.
|
25
|
+
Important: Rails default scaffold.css file overrides some CSS styles. So delete scaffold.css file or clean it up to correct working of Bootstrap styles, otherwise you layout will be messy.
|
26
26
|
|
27
|
-
=== Loading
|
28
|
-
Include these lines in your app/assets/
|
27
|
+
=== Loading Bootstrap and JQuery Toast Message javascript files (required)
|
28
|
+
Include these lines in your app/assets/javascripts/application.js file to load required javascript files
|
29
29
|
//= require bootstrap
|
30
30
|
//= require jquery.toastmessage
|
31
31
|
|
@@ -39,15 +39,41 @@ where message is the message text and type is one of the four types of messages
|
|
39
39
|
|
40
40
|
<%= display_toast_message('hello workd', 'notice') %>
|
41
41
|
|
42
|
-
=== Menu generator
|
43
|
-
The menu generator creates a
|
44
|
-
|
45
|
-
1) Define
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
42
|
+
=== Menu generator
|
43
|
+
The menu generator creates a menu bar for your controller actions. There are two steps needed for creating a menu:
|
44
|
+
|
45
|
+
1) Define which items and subitems will be available. In a dropdown menu there is a main item and several subitems. You can also put a separator between subitems. The main item is only a text explaining the content (e.g. File, Window, Tools). The subitems are controller actions (e.g. New, Save, Close). To define the main item and corresponding subitems you need to use MenuBar and MenuDropdown classes. For example:
|
46
|
+
|
47
|
+
# Creates a MenuBar instance
|
48
|
+
menu = MenuCreator::MenuBar.new
|
49
|
+
|
50
|
+
# Define project name that will be displayed on left side
|
51
|
+
menu.project = {caption: "Project name", controller: "index", action: "index"}
|
52
|
+
|
53
|
+
# Create a dropdown menu with 3 subitems and one separator on left side
|
54
|
+
dropdown1 = MenuCreator::MenuDropdown.new
|
55
|
+
dropdown1.position = :left
|
56
|
+
dropdown1.caption = "Dropdown 1"
|
57
|
+
dropdown1.subitems << {caption: "subitem 1", controller: "index", action: "index"}
|
58
|
+
dropdown1.subitems << {caption: "subitem 2", controller: "index", action: "index"}
|
59
|
+
dropdown1.subitems << "---"
|
60
|
+
dropdown1.subitems << {caption: "subitem 3", controller: "index", action: "index"}
|
61
|
+
menu.add_dropdown dropdown1
|
62
|
+
|
63
|
+
# Create a dropdown menu with 3 subitems and one separator on right side
|
64
|
+
dropdown2 = MenuCreator::MenuDropdown.new
|
65
|
+
dropdown2.position = :right
|
66
|
+
dropdown2.caption = "Dropdown 2"
|
67
|
+
dropdown2.subitems << {caption: "subitem 1", controller: "index", action: "index"}
|
68
|
+
dropdown2.subitems << {caption: "subitem 2", controller: "index", action: "index"}
|
69
|
+
dropdown2.subitems << "---"
|
70
|
+
dropdown2.subitems << {caption: "subitem 3", controller: "index", action: "index"}
|
71
|
+
menu.add_dropdown dropdown2
|
72
|
+
|
73
|
+
# Set menu to MenuCreator
|
74
|
+
MenuCreator.set_menu menu
|
75
|
+
|
76
|
+
Note that you have to define the caption, the controller and the action to each subitem otherwise the menu will not work. Each subitem will be turned to a link.
|
51
77
|
|
52
78
|
2) Include a menu_bar call in your html page:
|
53
|
-
<%= menu_bar %>
|
79
|
+
<%= menu_bar %>
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<% if menu %>
|
2
|
+
<div class="navbar navbar-static" style="margin: -2px">
|
3
|
+
<div class="navbar-inner">
|
4
|
+
<div class="container" style="width: auto;">
|
5
|
+
|
6
|
+
<% if menu.project %>
|
7
|
+
<%= link_to(menu.project[:caption], {controller: menu.project[:controller], action: menu.project[:action]}, class: "brand") %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<% menu.dropdowns.each do |dropdown| %>
|
11
|
+
<ul class="nav <%= dropdown.position.to_s == 'right' ? 'pull-right' : '' %>">
|
12
|
+
<li class="dropdown">
|
13
|
+
<%= link_to("#{dropdown.caption} <b class='caret'></b>".html_safe, "#", {class: "dropdown-toggle", 'data-toggle' => "dropdown"}) %>
|
14
|
+
<ul class="dropdown-menu">
|
15
|
+
<% dropdown.subitems.each do |item| %>
|
16
|
+
<% unless item == "---" %>
|
17
|
+
<li>
|
18
|
+
<%= link_to(item[:caption], {controller: item[:controller], action: item[:action]}) %>
|
19
|
+
</li>
|
20
|
+
<% else %>
|
21
|
+
<li class="divider"></li>
|
22
|
+
<% end %>
|
23
|
+
<% end %>
|
24
|
+
</ul>
|
25
|
+
</li>
|
26
|
+
</ul>
|
27
|
+
<% end %>
|
28
|
+
|
29
|
+
</div>
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
<% end %>
|
@@ -1,39 +1,60 @@
|
|
1
1
|
module MenuCreator
|
2
|
-
@@
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
2
|
+
@@menu = nil
|
3
|
+
class MenuBar
|
4
|
+
attr_accessor :project, :dropdowns
|
5
|
+
|
6
|
+
def initialize
|
7
|
+
@dropdowns = []
|
8
|
+
end
|
8
9
|
|
9
|
-
|
10
|
-
|
10
|
+
def add_dropdown(dropdown)
|
11
|
+
@dropdowns << dropdown if valid_dropdown?(dropdown)
|
12
|
+
end
|
11
13
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
14
|
+
# Check if is a valid dropdown
|
15
|
+
# A valid dropdown is a class with position an caption attributes and
|
16
|
+
# an array of subitems
|
17
|
+
def valid_dropdown?(dropdown)
|
18
|
+
return false unless dropdown.position
|
19
|
+
return false unless %W(left right).include? dropdown.position.to_s
|
20
|
+
return false unless dropdown.caption
|
21
|
+
return false unless valid_subitems?(dropdown.subitems)
|
22
|
+
true
|
23
|
+
end
|
22
24
|
|
23
|
-
|
24
|
-
|
25
|
+
# Check if all subitems are valid
|
26
|
+
# Subitem must be a hash with keys :caption, :controller and :action or
|
27
|
+
# a string "---" in case of a separator
|
28
|
+
def valid_subitems?(subitems)
|
29
|
+
return false if subitems.length == 0
|
30
|
+
subitems.each do |subitem|
|
31
|
+
if subitem.class.to_s == "Hash"
|
32
|
+
return false unless subitem.has_key?(:caption) && subitem.has_key?(:controller) &&
|
33
|
+
subitem.has_key?(:action)
|
34
|
+
else
|
35
|
+
return false unless subitem.to_s == '---'
|
36
|
+
end
|
25
37
|
end
|
38
|
+
true
|
39
|
+
end
|
40
|
+
end
|
41
|
+
|
42
|
+
# Dropdown menu class
|
43
|
+
class MenuDropdown
|
44
|
+
attr_accessor :position, :caption, :subitems
|
26
45
|
|
27
|
-
|
28
|
-
|
46
|
+
def initialize
|
47
|
+
@subitems = []
|
29
48
|
end
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
49
|
+
end
|
50
|
+
|
51
|
+
# Draw menu content
|
52
|
+
def menu_bar
|
53
|
+
render partial: '/shared/menu', locals: {menu: @@menu}
|
54
|
+
end
|
36
55
|
|
37
|
-
|
56
|
+
# Set menu to draw
|
57
|
+
def self.set_menu(menu)
|
58
|
+
@@menu = menu
|
38
59
|
end
|
39
60
|
end
|
@@ -565,7 +565,7 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
|
|
565
565
|
line-height: normal;
|
566
566
|
border: 0;
|
567
567
|
cursor: pointer;
|
568
|
-
border-radius: 0
|
568
|
+
border-radius: 0;
|
569
569
|
}
|
570
570
|
input[type="file"] {
|
571
571
|
padding: initial;
|
@@ -2661,7 +2661,7 @@ button.btn.small, input[type="submit"].btn.small {
|
|
2661
2661
|
.pagination li {
|
2662
2662
|
display: inline;
|
2663
2663
|
}
|
2664
|
-
.pagination a {
|
2664
|
+
.pagination a, .pagination em {
|
2665
2665
|
float: left;
|
2666
2666
|
padding: 0 14px;
|
2667
2667
|
line-height: 34px;
|
@@ -2669,7 +2669,7 @@ button.btn.small, input[type="submit"].btn.small {
|
|
2669
2669
|
border: 1px solid #ddd;
|
2670
2670
|
border-left-width: 0;
|
2671
2671
|
}
|
2672
|
-
.pagination a:hover, .pagination .active a {
|
2672
|
+
.pagination a:hover, .pagination .active a, .pagination em {
|
2673
2673
|
background-color: #f5f5f5;
|
2674
2674
|
}
|
2675
2675
|
.pagination .active a {
|
@@ -2681,7 +2681,7 @@ button.btn.small, input[type="submit"].btn.small {
|
|
2681
2681
|
background-color: transparent;
|
2682
2682
|
cursor: default;
|
2683
2683
|
}
|
2684
|
-
.pagination li:first-child a {
|
2684
|
+
.pagination li:first-child a, .pagination .previous_page {
|
2685
2685
|
border-left-width: 1px;
|
2686
2686
|
-webkit-border-radius: 3px 0 0 3px;
|
2687
2687
|
-moz-border-radius: 3px 0 0 3px;
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bootstrap2-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.3
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-02-
|
12
|
+
date: 2012-02-07 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: will_paginate
|
16
|
-
requirement: &
|
16
|
+
requirement: &72698580 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,7 @@ dependencies:
|
|
21
21
|
version: '0'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *72698580
|
25
25
|
description: This is a scaffold replacement with a Twitter Bootstrap look
|
26
26
|
email:
|
27
27
|
- stapait@gmail.com
|
@@ -34,8 +34,8 @@ files:
|
|
34
34
|
- README.rdoc
|
35
35
|
- Rakefile
|
36
36
|
- app/views/layouts/application.html.erb
|
37
|
+
- app/views/shared/_menu.html.erb
|
37
38
|
- app/views/shared/_search.html.erb
|
38
|
-
- app/views/shared/_search.html.erb~
|
39
39
|
- bootstrap2-rails.gemspec
|
40
40
|
- lib/bootstrap2-rails.rb
|
41
41
|
- lib/bootstrap2-rails/bootstrap_helper.rb
|