hobo_bootstrap 2.0.0.pre1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +201 -0
- data/VERSION +1 -0
- data/hobo_bootstrap.gemspec +29 -0
- data/lib/hobo_bootstrap.rb +20 -0
- data/lib/hobo_bootstrap/railtie.rb +6 -0
- data/screenshots/index.png +0 -0
- data/screenshots/login.png +0 -0
- data/screenshots/responsive.png +0 -0
- data/screenshots/sub_menu.png +0 -0
- data/screenshots/three_columns_complex.png +0 -0
- data/screenshots/top_menu.png +0 -0
- data/screenshots/two_columns.png +0 -0
- data/taglibs/buttons.dryml +8 -0
- data/taglibs/card.dryml +7 -0
- data/taglibs/delete_button.dryml +3 -0
- data/taglibs/edit_page.dryml +5 -0
- data/taglibs/flash_message.dryml +13 -0
- data/taglibs/forms.dryml +183 -0
- data/taglibs/hobo_bootstrap.dryml +1 -0
- data/taglibs/index_page.dryml +38 -0
- data/taglibs/login.dryml +88 -0
- data/taglibs/nav.dryml +124 -0
- data/taglibs/page.dryml +93 -0
- data/taglibs/page_nav.dryml +4 -0
- data/taglibs/search.dryml +13 -0
- data/taglibs/show_page.dryml +7 -0
- data/taglibs/table-plus.dryml +14 -0
- data/taglibs/tabs.dryml +35 -0
- data/vendor/assets/images/ajax-loader.gif +0 -0
- data/vendor/assets/javascripts/hobo_bootstrap.js +1 -0
- data/vendor/assets/stylesheets/hobo_bootstrap.scss +83 -0
- data/vendor/assets/stylesheets/hobo_bootstrap_docs.css +834 -0
- data/vendor/assets/stylesheets/hobo_bootstrap_responsive.css +940 -0
- metadata +144 -0
data/README.md
ADDED
@@ -0,0 +1,201 @@
|
|
1
|
+
hobo_bootstrap
|
2
|
+
==============
|
3
|
+
<hr/>
|
4
|
+
|
5
|
+
This is a theme for Hobo 1.4 (http://www.hobocentral.net) that implements the Bootstrap library (http://twitter.github.com/bootstrap/).
|
6
|
+
|
7
|
+
[![index][1]][1]
|
8
|
+
[![login][2]][2]
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
Install instructions
|
13
|
+
====================
|
14
|
+
<hr/>
|
15
|
+
|
16
|
+
Add this to your Gemfile
|
17
|
+
|
18
|
+
gem "hobo_bootstrap", :git => "git://github.com/suyccom/hobo_bootstrap.git"
|
19
|
+
gem 'will_paginate-bootstrap'
|
20
|
+
group :assets do
|
21
|
+
# ... Other stuff ... #
|
22
|
+
gem 'compass_twitter_bootstrap', :git => 'git://github.com/wyuenho/compass-twitter-bootstrap'
|
23
|
+
gem 'compass-rails'
|
24
|
+
end
|
25
|
+
{.ruby}
|
26
|
+
|
27
|
+
Run bundle to get the gems
|
28
|
+
|
29
|
+
bundle
|
30
|
+
|
31
|
+
Rename front.css to front.scss so you can bootstrap and hobo_bootstrap like this:
|
32
|
+
|
33
|
+
/*
|
34
|
+
* This is the stylesheet manifest file for the front subsite (which
|
35
|
+
* is your whole application if you don't have any subsites). Files
|
36
|
+
* or plugins referenced from here or placed in the front/ directory
|
37
|
+
* will be included.
|
38
|
+
*
|
39
|
+
*= require_self
|
40
|
+
*= require application
|
41
|
+
*= require hobo_rapid
|
42
|
+
*= require hobo_jquery
|
43
|
+
*= require hobo_jquery_ui
|
44
|
+
*= require jquery-ui/redmond
|
45
|
+
*= require hobo_bootstrap
|
46
|
+
*= require hobo_bootstrap_docs
|
47
|
+
*= require hobo_bootstrap_responsive
|
48
|
+
*= require_tree ./front
|
49
|
+
*/
|
50
|
+
@import "compass_twitter_bootstrap";
|
51
|
+
{.css}
|
52
|
+
|
53
|
+
Load bootstrap javascripts in app/assets/front.js, for example:
|
54
|
+
|
55
|
+
//= require bootstrap-all
|
56
|
+
{.javascript}
|
57
|
+
|
58
|
+
Alternatively, you could require bootstrap-collapse and bootstrap-alert, since those are the only two javascript components that this theme currently requires. However, we do plan on supporting more in the future.
|
59
|
+
|
60
|
+
Change the theme in app/views/taglibs/front_site.dryml:
|
61
|
+
|
62
|
+
<include gem='hobo_bootstrap'/>
|
63
|
+
{.dryml}
|
64
|
+
|
65
|
+
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
Two main menu options
|
70
|
+
=====================
|
71
|
+
<hr/>
|
72
|
+
|
73
|
+
By default, hobo_bootstrap puts every option in the top menu, like this:
|
74
|
+
|
75
|
+
[![top_menu][3]][3]
|
76
|
+
|
77
|
+
|
78
|
+
But you can also use a sub menu, like the one in the bootstrap documentation:
|
79
|
+
[![sub_menu][4]][4]
|
80
|
+
|
81
|
+
In order to enable the sub meny, add these lines to your front_site.dryml:
|
82
|
+
|
83
|
+
<extend tag="page">
|
84
|
+
<old-page merge nav-location="sub">
|
85
|
+
</extend>
|
86
|
+
{.dryml}
|
87
|
+
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
Responsive template
|
92
|
+
===================
|
93
|
+
<hr/>
|
94
|
+
|
95
|
+
This theme includes the bootstrap responsive CSS, which makes it work nicely with mobile phones. For example:
|
96
|
+
|
97
|
+
[![responsive][5]][5]
|
98
|
+
|
99
|
+
|
100
|
+
|
101
|
+
Complex forms
|
102
|
+
=============
|
103
|
+
<hr/>
|
104
|
+
|
105
|
+
By default, forms only have one column. But many you need more complex forms. Take a look at these examples:
|
106
|
+
|
107
|
+
**Two columns example**
|
108
|
+
|
109
|
+
[![two_columns][6]][6]
|
110
|
+
|
111
|
+
<new-page>
|
112
|
+
<form:>
|
113
|
+
<field-list: columns="2"/>
|
114
|
+
</form:>
|
115
|
+
</new-page>
|
116
|
+
{.dryml}
|
117
|
+
|
118
|
+
**Three columns, aside and double sized fields**
|
119
|
+
|
120
|
+
[![three_columns_complex][7]][7]
|
121
|
+
|
122
|
+
<new-page content-size="9">
|
123
|
+
<aside:>
|
124
|
+
Hola! Soy el aside :)
|
125
|
+
</aside:>
|
126
|
+
<form:>
|
127
|
+
<field-list: replace>
|
128
|
+
<field-list size="9" columns="3" fields="name, end_date, codigo_postal"/>
|
129
|
+
<div class="row columns">
|
130
|
+
<div class="span6">
|
131
|
+
<single-field-list fields="description"/>
|
132
|
+
</div>
|
133
|
+
<div class="span3">
|
134
|
+
<single-field-list fields="responsable"/>
|
135
|
+
</div>
|
136
|
+
</div>
|
137
|
+
<div class="row columns">
|
138
|
+
<div class="span6">
|
139
|
+
<single-field-list fields="description"/>
|
140
|
+
</div>
|
141
|
+
<div class="span3">
|
142
|
+
<single-field-list fields="responsable"/>
|
143
|
+
</div>
|
144
|
+
</div>
|
145
|
+
<div class="row columns">
|
146
|
+
<div class="span9">
|
147
|
+
<single-field-list fields="description"/>
|
148
|
+
</div>
|
149
|
+
</div>
|
150
|
+
<div class="row columns">
|
151
|
+
<div class="span3">
|
152
|
+
<single-field-list fields="description"/>
|
153
|
+
</div>
|
154
|
+
<div class="span6">
|
155
|
+
<single-field-list fields="responsable"/>
|
156
|
+
</div>
|
157
|
+
</div>
|
158
|
+
<div class="row columns">
|
159
|
+
<div class="span3">
|
160
|
+
<single-field-list fields="description"/>
|
161
|
+
</div>
|
162
|
+
<div class="span3">
|
163
|
+
<single-field-list fields="responsable"/>
|
164
|
+
</div>
|
165
|
+
<div class="span3">
|
166
|
+
<single-field-list fields="responsable"/>
|
167
|
+
</div>
|
168
|
+
</div>
|
169
|
+
</field-list:>
|
170
|
+
</form:>
|
171
|
+
</new-page>
|
172
|
+
{.dryml}
|
173
|
+
|
174
|
+
|
175
|
+
|
176
|
+
Demo app
|
177
|
+
========
|
178
|
+
<hr/>
|
179
|
+
|
180
|
+
I have been using a demo application to test this theme (the screenshots come from it). It has:
|
181
|
+
* Examples of complex forms (1/2/3 columns, aside, double sized fields...)
|
182
|
+
* Rspec "human driven" tests for the responsive CSS (they automatically resize your window and wait for you to clic on "OK" if it looks fine)
|
183
|
+
* Examples of Jquery File Upload (http://blueimp.github.com/jQuery-File-Upload/).
|
184
|
+
|
185
|
+
You can download and take a look at it on https://github.com/suyccom/sgagility
|
186
|
+
|
187
|
+
|
188
|
+
Notes
|
189
|
+
=====
|
190
|
+
<hr/>
|
191
|
+
|
192
|
+
Right now, you still need to keep "hobo_clean" in your Gemfile if you want to use the Ajax search enabled by default in Hobo.
|
193
|
+
|
194
|
+
|
195
|
+
[1]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/index.png
|
196
|
+
[2]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/login.png
|
197
|
+
[3]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/top_menu.png
|
198
|
+
[4]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/sub_menu.png
|
199
|
+
[5]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/responsive.png
|
200
|
+
[6]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/two_columns.png
|
201
|
+
[7]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/three_columns_complex.png
|
data/VERSION
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.0.0.pre1
|
@@ -0,0 +1,29 @@
|
|
1
|
+
name = File.basename( __FILE__, '.gemspec' )
|
2
|
+
version = File.read(File.expand_path('../VERSION', __FILE__)).strip
|
3
|
+
require 'date'
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
|
7
|
+
s.authors = ['Ignacio Huerta']
|
8
|
+
s.email = 'ignacio@ihuerta.net'
|
9
|
+
s.homepage = 'https://github.com/suyccom/hobo_bootstrap'
|
10
|
+
s.rubyforge_project = 'hobo'
|
11
|
+
s.summary = 'A bootstrap based theme for Hobo'
|
12
|
+
s.description = 'A bootstrap based theme for Hobo'
|
13
|
+
|
14
|
+
s.add_runtime_dependency('hobo', ["~> #{version}"])
|
15
|
+
s.add_runtime_dependency "compass_twitter_bootstrap", "~> 2.0.3"
|
16
|
+
s.add_runtime_dependency "compass-rails", "~> 1.0.3"
|
17
|
+
s.add_runtime_dependency "will_paginate-bootstrap", "~> 0.2.1"
|
18
|
+
|
19
|
+
s.files = `git ls-files -x #{name}/* -z`.split("\0")
|
20
|
+
|
21
|
+
s.name = name
|
22
|
+
s.version = version
|
23
|
+
s.date = Date.today.to_s
|
24
|
+
|
25
|
+
s.required_rubygems_version = ">= 1.3.6"
|
26
|
+
s.rdoc_options = ["--charset=UTF-8"]
|
27
|
+
s.require_paths = ["lib", "vendor", "taglibs"]
|
28
|
+
|
29
|
+
end
|
@@ -0,0 +1,20 @@
|
|
1
|
+
# Sub dependencies written in the gemspec are not loaded by default:
|
2
|
+
# http://stackoverflow.com/questions/6960078
|
3
|
+
# We need to require them here, so we can load the JS from bootstrap
|
4
|
+
require 'compass_twitter_bootstrap'
|
5
|
+
require 'compass-rails'
|
6
|
+
require 'will_paginate-bootstrap'
|
7
|
+
|
8
|
+
module HoboBootstrap
|
9
|
+
|
10
|
+
VERSION = File.read(File.expand_path('../../VERSION', __FILE__)).strip
|
11
|
+
@@root = Pathname.new File.expand_path('../..', __FILE__)
|
12
|
+
def self.root; @@root; end
|
13
|
+
|
14
|
+
EDIT_LINK_BASE = "https://github.com/iox/hobo/edit/bootstrap_template/hobo_bootstrap"
|
15
|
+
|
16
|
+
require 'hobo_bootstrap/railtie' if defined?(Rails)
|
17
|
+
|
18
|
+
class Engine < ::Rails::Engine
|
19
|
+
end
|
20
|
+
end
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,8 @@
|
|
1
|
+
<!-- Add some bootstrap classes to submit buttons -->
|
2
|
+
<def tag="submit" attrs="label, image">
|
3
|
+
<input if="&image" type="image" src="&image" merge-attrs class="image-button submit-button"/>
|
4
|
+
<else>
|
5
|
+
<input type="submit" value="#{label}" merge-attrs class="btn btn-primary button submit-button"/>
|
6
|
+
</else>
|
7
|
+
</def>
|
8
|
+
|
data/taglibs/card.dryml
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
<!-- Renders a Rails flash message with bootstrap style
|
2
|
+
|
3
|
+
### Attributes
|
4
|
+
|
5
|
+
- `type`: chooses which flash message to display and also the box style. The default is `notice`. `error`, `success` and `info` also have styling.
|
6
|
+
-->
|
7
|
+
<def tag="flash-message" attrs="type">
|
8
|
+
<% type = type ? type.to_sym : :notice -%>
|
9
|
+
<div class="alert alert-#{type}" if="&flash[type]" merge-attrs>
|
10
|
+
<a class="close" data-dismiss="alert" href="#" param="close">×</a>
|
11
|
+
<span param="default"><%= flash[type] %></span>
|
12
|
+
</div>
|
13
|
+
</def>
|
data/taglibs/forms.dryml
ADDED
@@ -0,0 +1,183 @@
|
|
1
|
+
<!--<def tag="field-list">-->
|
2
|
+
<!-- <feckless-fieldset class="horizontal" merge/>-->
|
3
|
+
<!--</def>-->
|
4
|
+
|
5
|
+
|
6
|
+
|
7
|
+
|
8
|
+
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
<def tag="field-list">
|
13
|
+
<bootstrap-fields merge/>
|
14
|
+
</def>
|
15
|
+
|
16
|
+
<def tag="bootstrap-fields" attrs="size, columns, tag, no-edit, required, no-blanks">
|
17
|
+
<% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
|
18
|
+
<% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
|
19
|
+
<div merge-attrs="&attributes - attrs_for(:with_fields)">
|
20
|
+
<legend param if="&all_parameters[:legend]" />
|
21
|
+
<with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns">
|
22
|
+
|
23
|
+
<% field_name = this_field_name
|
24
|
+
input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
|
25
|
+
field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
|
26
|
+
id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
|
27
|
+
-%>
|
28
|
+
<div
|
29
|
+
class="control-group #{'required' if required.include?(scope.field_name)}"
|
30
|
+
unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || (tag == 'view' && no_blanks && this.blank?)"
|
31
|
+
param="#{field_method}-field">
|
32
|
+
|
33
|
+
<label class="control-label" for="&id_for_this" param="#{field_method}-label" unless="&field_name.blank?">
|
34
|
+
<%= field_name %>
|
35
|
+
</label>
|
36
|
+
|
37
|
+
<div class="controls">
|
38
|
+
<do param="#{field_method}-view">
|
39
|
+
<do param="view"><call-tag tag="&tag" param="#{field_method}-tag" merge-attrs="&input_attrs"/></do>
|
40
|
+
</do>
|
41
|
+
<p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
|
42
|
+
<%= this_field_help %>
|
43
|
+
</p>
|
44
|
+
</div>
|
45
|
+
|
46
|
+
</div>
|
47
|
+
</with-fields-grouped>
|
48
|
+
</div>
|
49
|
+
</def>
|
50
|
+
|
51
|
+
|
52
|
+
<extend tag="form">
|
53
|
+
<old-form: class="form-horizontal" merge>
|
54
|
+
<actions: class="form-actions"/>
|
55
|
+
</old-form:>
|
56
|
+
</extend>
|
57
|
+
|
58
|
+
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
|
66
|
+
<!--
|
67
|
+
Like `<with-fields>`, but groups fields into columns in a bootstrap-friendly fashion.
|
68
|
+
|
69
|
+
### Attributes
|
70
|
+
|
71
|
+
Supports all attributes supported by `<with-fields>` plus:
|
72
|
+
|
73
|
+
- size: # of columns in the grid system. Default is 12
|
74
|
+
- columns: # of columns. Default is 1.
|
75
|
+
|
76
|
+
-->
|
77
|
+
<def tag="with-fields-grouped" attrs="size, columns, force-all"><%
|
78
|
+
field_names = with_fields_helper(attributes)
|
79
|
+
field_names = field_names.select {|f| can_view?(this, f)} unless force_all
|
80
|
+
columns = 1 unless columns
|
81
|
+
columns = columns.to_i
|
82
|
+
size = 12 unless size
|
83
|
+
size = size.to_i
|
84
|
+
span_size = size / columns
|
85
|
+
field_names_groups = field_names.in_groups(columns, false)
|
86
|
+
row_classes = "row"
|
87
|
+
row_classes += " columns" if columns > 1
|
88
|
+
%><div class="#{row_classes}"> <%
|
89
|
+
field_names_groups.each do |field_names_group|
|
90
|
+
%> <div class="span#{span_size}"> <%
|
91
|
+
field_names_group.each do |field|
|
92
|
+
%><set-scoped field-name="&field"><%
|
93
|
+
if field == "this"
|
94
|
+
%><do param="default"/><%
|
95
|
+
else
|
96
|
+
%><with field="&field"><do param="default"/></with><%
|
97
|
+
end
|
98
|
+
%></set-scoped><%
|
99
|
+
end
|
100
|
+
%> </div> <%
|
101
|
+
end
|
102
|
+
%> </div>
|
103
|
+
</def>
|
104
|
+
|
105
|
+
<!-- This tag is used in multiple column forms, when you need a double sized field (address for example) that is still aligned with the rest -->
|
106
|
+
<def tag="single-field-list" attrs="tag, no-edit, required, no-blanks">
|
107
|
+
<% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
|
108
|
+
<% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
|
109
|
+
<legend param if="&all_parameters[:legend]" />
|
110
|
+
<with-fields merge-attrs="&attributes & attrs_for(:with_fields)">
|
111
|
+
|
112
|
+
<% field_name = this_field_name
|
113
|
+
input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
|
114
|
+
field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
|
115
|
+
id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
|
116
|
+
-%>
|
117
|
+
<div
|
118
|
+
class="control-group #{'required' if required.include?(scope.field_name)}"
|
119
|
+
unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || (tag == 'view' && no_blanks && this.blank?)"
|
120
|
+
param="#{field_method}-field">
|
121
|
+
|
122
|
+
<label class="control-label" for="&id_for_this" param="#{field_method}-label" unless="&field_name.blank?">
|
123
|
+
<%= field_name %>
|
124
|
+
</label>
|
125
|
+
|
126
|
+
<div class="controls">
|
127
|
+
<do param="#{field_method}-view">
|
128
|
+
<do param="view"><call-tag tag="&tag" param="#{field_method}-tag" merge-attrs="&input_attrs"/></do>
|
129
|
+
</do>
|
130
|
+
<p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
|
131
|
+
<%= this_field_help %>
|
132
|
+
</p>
|
133
|
+
</div>
|
134
|
+
|
135
|
+
</div>
|
136
|
+
</with-fields>
|
137
|
+
</def>
|
138
|
+
|
139
|
+
|
140
|
+
<!-- This field list creates a field list in just one line using -->
|
141
|
+
<def tag="one-line-field-list" attrs="tag, no-edit, required, no-blanks">
|
142
|
+
<% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
|
143
|
+
<% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
|
144
|
+
<legend param if="&all_parameters[:legend]" />
|
145
|
+
<with-fields merge-attrs="&attributes & attrs_for(:with_fields)">
|
146
|
+
|
147
|
+
<% field_name = this_field_name
|
148
|
+
input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
|
149
|
+
field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
|
150
|
+
id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
|
151
|
+
-%>
|
152
|
+
|
153
|
+
<do param="#{field_method}-view">
|
154
|
+
<do param="view">
|
155
|
+
<call-tag tag="&tag" placeholder="&field_name" param="#{field_method}-tag" merge-attrs="&input_attrs"/>
|
156
|
+
</do>
|
157
|
+
</do>
|
158
|
+
<p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
|
159
|
+
<%= this_field_help %>
|
160
|
+
</p>
|
161
|
+
|
162
|
+
</with-fields>
|
163
|
+
</def>
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
|
168
|
+
<def tag="one-line-form" attrs="fields">
|
169
|
+
<div class="row">
|
170
|
+
<div class="span12">
|
171
|
+
<form class="inline-form well" merge-attrs>
|
172
|
+
<field-list: replace>
|
173
|
+
<one-line-field-list fields="&fields"/>
|
174
|
+
</field-list:>
|
175
|
+
<actions: replace>
|
176
|
+
<button class="btn btn-primary" type="submit">
|
177
|
+
+
|
178
|
+
</button>
|
179
|
+
</actions:>
|
180
|
+
</form>
|
181
|
+
</div>
|
182
|
+
</div>
|
183
|
+
</def>
|