hobo_bootstrap 2.0.0.pre5 → 2.0.0.pre6
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +2 -1
- data/VERSION +1 -1
- data/hobo_bootstrap.gemspec +2 -2
- data/lib/hobo_bootstrap.rb +0 -1
- data/taglibs/delete_button.dryml +3 -0
- data/taglibs/edit_page.dryml +4 -0
- data/taglibs/forms.dryml +33 -9
- data/taglibs/index_page.dryml +39 -4
- data/taglibs/input_many.dryml +8 -0
- data/taglibs/page.dryml +28 -8
- data/taglibs/page_nav.dryml +3 -0
- data/taglibs/search.dryml +1 -1
- data/taglibs/select_many.dryml +6 -0
- data/taglibs/show_page.dryml +3 -0
- data/taglibs/table-plus.dryml +5 -3
- data/vendor/assets/images/ajax-loader.gif +0 -0
- data/vendor/assets/stylesheets/hobo_bootstrap.scss +4 -2
- data/vendor/assets/stylesheets/hobo_bootstrap/hobo_bootstrap_main.scss +53 -11
- data/vendor/assets/stylesheets/hobo_bootstrap/hobo_bootstrap_responsive.scss +13 -810
- metadata +9 -7
data/README.md
CHANGED
@@ -70,8 +70,9 @@ This theme includes the bootstrap responsive CSS, which makes it work nicely wit
|
|
70
70
|
|
71
71
|
[![responsive][5]][5]
|
72
72
|
|
73
|
-
If you don't want to include the responsive CSS use
|
73
|
+
If you don't want to include the responsive CSS, use
|
74
74
|
|
75
|
+
*= require bootstrap
|
75
76
|
*= require hobo_bootstrap/hobo_bootstrap_main
|
76
77
|
|
77
78
|
instead of
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
2.0.0.
|
1
|
+
2.0.0.pre6
|
data/hobo_bootstrap.gemspec
CHANGED
@@ -11,8 +11,8 @@ Gem::Specification.new do |s|
|
|
11
11
|
s.summary = 'A bootstrap based theme for Hobo'
|
12
12
|
s.description = 'A bootstrap based theme for Hobo'
|
13
13
|
|
14
|
-
s.add_runtime_dependency('hobo', "~> 2.0.0.
|
15
|
-
s.add_runtime_dependency('
|
14
|
+
s.add_runtime_dependency('hobo', "~> 2.0.0.pre6")
|
15
|
+
s.add_runtime_dependency('hobo_jquery', "~> 2.0.0.pre6")
|
16
16
|
s.add_runtime_dependency "bootstrap-sass", "~> 2.1"
|
17
17
|
s.add_runtime_dependency "will_paginate-bootstrap", "~> 0.2.1"
|
18
18
|
|
data/lib/hobo_bootstrap.rb
CHANGED
data/taglibs/delete_button.dryml
CHANGED
data/taglibs/edit_page.dryml
CHANGED
data/taglibs/forms.dryml
CHANGED
@@ -3,12 +3,13 @@
|
|
3
3
|
<!--</def>-->
|
4
4
|
|
5
5
|
|
6
|
-
<%#
|
6
|
+
<%# `field-list` in hobo_bootstrap is provided by `<bootstrap-fields>`. `<bootstrap-fields>` has more options than Hobo's stock field-list's, so please check the `<bootstrap-fields>` documentation for more details.
|
7
|
+
|
8
|
+
When using field-lists, remember to add the form-horizontal class to get the bootstrap looks (this is done automatically in forms and show-page).
|
7
9
|
<div class="form-horizontal">
|
8
10
|
<field-list class="form-horizontal" with="&Project.first"/>
|
9
11
|
</div>
|
10
12
|
%>
|
11
|
-
|
12
13
|
<def tag="field-list">
|
13
14
|
<bootstrap-fields merge/>
|
14
15
|
</def>
|
@@ -22,20 +23,42 @@
|
|
22
23
|
<view merge class="uneditable-input"/>
|
23
24
|
</def>
|
24
25
|
|
25
|
-
|
26
|
+
<%# `bootstrap-fields` provides HTML markup for an object in a manner suitable for use inside of Bootstrap's [form-horizontal](http://twitter.github.com/bootstrap/base-css.html#forms).
|
27
|
+
|
28
|
+
`bootstrap-fields` implements a superset of the `<feckless-fieldset>` interface. We only document the differences here. Please read the `<feckless-fieldset>` documentation first.
|
29
|
+
|
30
|
+
### Attributes
|
31
|
+
|
32
|
+
- size: # of columns in the grid system. Default is 12
|
33
|
+
- columns: # of columns. Default is 1.
|
34
|
+
- input-attrs: A ruby hash containing attributes to be merged onto each view. For example
|
35
|
+
|
36
|
+
<bootstrap-fields fields="foo,bar" input-attrs="&{:class => 'span9'}"/>
|
37
|
+
|
38
|
+
is equivalent to:
|
39
|
+
|
40
|
+
<bootstrap-fields fields="foo,bar">
|
41
|
+
<foo-tag: class="span9"/>
|
42
|
+
<bar-tag: class="span9"/>
|
43
|
+
</bootstrap-fields>
|
44
|
+
|
45
|
+
%>
|
46
|
+
<def tag="bootstrap-fields" attrs="size, columns, tag, no-edit, required, no-blanks, input-attrs">
|
26
47
|
<% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
|
27
48
|
<% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
|
28
49
|
<div merge-attrs="&attributes - attrs_for(:with_fields)">
|
29
50
|
<legend param if="&all_parameters[:legend]" />
|
30
|
-
<with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns">
|
51
|
+
<with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns" param>
|
31
52
|
|
32
53
|
<% field_name = this_field_name
|
33
|
-
input_attrs
|
54
|
+
input_attrs ||= {}
|
55
|
+
input_attrs[:no_edit] = no_edit if tag == "input" && no_edit == "disable"
|
34
56
|
field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
|
35
57
|
id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
|
58
|
+
error_class = this_parent.errors[this_field].empty? ? "" : "error"
|
36
59
|
-%>
|
37
60
|
<div
|
38
|
-
class="control-group #{'required' if required.include?(scope.field_name)}"
|
61
|
+
class="control-group #{'required' if required.include?(scope.field_name)} #{error_class}"
|
39
62
|
unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || ((tag == 'view' || tag == 'uneditable-input') && no_blanks && this.blank?)"
|
40
63
|
param="#{field_method}-field">
|
41
64
|
|
@@ -58,6 +81,7 @@
|
|
58
81
|
</def>
|
59
82
|
|
60
83
|
|
84
|
+
<!-- nodoc. -->
|
61
85
|
<extend tag="form">
|
62
86
|
<old-form: class="form-horizontal" merge>
|
63
87
|
<actions: class="form-actions"/>
|
@@ -86,7 +110,7 @@ Supports all attributes supported by `<with-fields>` plus:
|
|
86
110
|
field_names_groups = field_names.in_groups(columns, false)
|
87
111
|
row_classes = "row"
|
88
112
|
row_classes += " columns" if columns > 1
|
89
|
-
%><div class="#{row_classes}"> <%
|
113
|
+
%><div class="#{row_classes}" merge-attrs> <%
|
90
114
|
field_names_groups.each do |field_names_group|
|
91
115
|
%> <div class="span#{span_size}"> <%
|
92
116
|
field_names_group.each do |field|
|
@@ -138,7 +162,7 @@ Supports all attributes supported by `<with-fields>` plus:
|
|
138
162
|
</def>
|
139
163
|
|
140
164
|
|
141
|
-
<!-- This field list creates a field list in just one line
|
165
|
+
<!-- This field list creates a field list in just one line -->
|
142
166
|
<def tag="one-line-field-list" attrs="tag, no-edit, required, no-blanks">
|
143
167
|
<% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
|
144
168
|
<% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
|
@@ -165,7 +189,7 @@ Supports all attributes supported by `<with-fields>` plus:
|
|
165
189
|
|
166
190
|
|
167
191
|
|
168
|
-
|
192
|
+
<!-- This tag creates a form in just one line using bootstrap's inline-form -->
|
169
193
|
<def tag="one-line-form" attrs="fields">
|
170
194
|
<div class="row">
|
171
195
|
<div class="span12">
|
data/taglibs/index_page.dryml
CHANGED
@@ -1,13 +1,48 @@
|
|
1
1
|
<%# displays the pencil and trash can icons used by the bootstrap index page. %>
|
2
2
|
<def tag="bootstrap-table-actions">
|
3
|
-
<
|
4
|
-
<
|
5
|
-
|
3
|
+
<do with="&this_parent">
|
4
|
+
<a action="edit" if="&object_url(this, :edit)" param="edit">
|
5
|
+
<i class="icon icon-edit"></i>
|
6
|
+
</a>
|
7
|
+
</do>
|
6
8
|
<% if can_delete?(this_parent) %>
|
7
|
-
|
9
|
+
<do param="delete">
|
10
|
+
<%= link_to '<i class=\'icon-trash\'></i>'.html_safe, this_parent, :'data-confirm' => t('hobo.messages.confirm', :default=>'Are you sure?'), :method => :delete %>
|
11
|
+
</do>
|
8
12
|
<% end %>
|
9
13
|
</def>
|
10
14
|
|
15
|
+
<%# This is the hobo_bootstrap customization of the index page.
|
16
|
+
|
17
|
+
It uses a table for the collection view, rather than the list of cards that hobo_clean uses.
|
18
|
+
|
19
|
+
To switch to a list of cards, parameterize your index page like this:
|
20
|
+
|
21
|
+
<index-page>
|
22
|
+
<collection: replace>
|
23
|
+
<collection/>
|
24
|
+
</collection:>
|
25
|
+
</index-page>
|
26
|
+
|
27
|
+
If you wish to customize the table instead, the collections param may be tweaked like any other `<table>`.
|
28
|
+
|
29
|
+
<collection: fields="this, subject, actions">
|
30
|
+
<this-view:>My <view/></this-view>
|
31
|
+
</collection:>
|
32
|
+
|
33
|
+
`actions` is defined in this tag. Remove it from `fields` to remove the column.
|
34
|
+
|
35
|
+
The best way to remove any of the actions is to adjust your permission functions. However, if you wish to remove or tweak in the view:
|
36
|
+
|
37
|
+
<collection:>
|
38
|
+
<actions-view:>
|
39
|
+
<bootstrap-table-actions>
|
40
|
+
<delete: replace/>
|
41
|
+
</bootstrap-table-actions>
|
42
|
+
</actions-view:>
|
43
|
+
</collection:>
|
44
|
+
|
45
|
+
%>
|
11
46
|
<extend tag="index-page">
|
12
47
|
<old-index-page: without-count without-top-page-nav merge>
|
13
48
|
|
data/taglibs/page.dryml
CHANGED
@@ -15,7 +15,9 @@ Attributes:
|
|
15
15
|
|
16
16
|
- `bottom-load-javascript` - if set, will load Javascript at the bottom of the page rather than in head
|
17
17
|
- nav-location: `top`, `sub`. Where do you want your main-nav located. `top` merges it into the top bar, `sub` gives it its own bar. `top` is the default option.
|
18
|
-
|
18
|
+
- content-size: The width, in the bootstrap grid system for the main content. Default is 12 unless there is an aside, in which case the default is 9.
|
19
|
+
- aside-size: The width, in the bootstrap grid system for the aside content. Default is 12 - content_size.
|
20
|
+
- aside-location
|
19
21
|
|
20
22
|
Make your choice global with:
|
21
23
|
|
@@ -24,7 +26,7 @@ Make your choice global with:
|
|
24
26
|
</extend>
|
25
27
|
|
26
28
|
-->
|
27
|
-
<def tag="page" attrs="title, full-title, nav-location, bottom-load-javascript">
|
29
|
+
<def tag="page" attrs="title, full-title, nav-location, bottom-load-javascript, aside-location">
|
28
30
|
<% full_title ||= "#{title} : #{app_name}" %>
|
29
31
|
<html lang="en" merge-attrs>
|
30
32
|
<head param>
|
@@ -51,11 +53,11 @@ Make your choice global with:
|
|
51
53
|
<div class="navbar" param="navbar">
|
52
54
|
<div class="navbar-inner" param="navbar-innner">
|
53
55
|
<header class="container" param>
|
54
|
-
<
|
56
|
+
<a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
55
57
|
<span class="icon-bar"></span>
|
56
58
|
<span class="icon-bar"></span>
|
57
59
|
<span class="icon-bar"></span>
|
58
|
-
</
|
60
|
+
</a>
|
59
61
|
<div param="app-name">
|
60
62
|
<a class="brand" href="#{base_url}/"><app-name/></a>
|
61
63
|
</div>
|
@@ -69,15 +71,32 @@ Make your choice global with:
|
|
69
71
|
<main-nav class="nav nav-pills" current="&title" include-search param/>
|
70
72
|
</div>
|
71
73
|
</div>
|
72
|
-
<%
|
73
|
-
|
74
|
+
<%
|
75
|
+
if all_parameters[:aside]
|
76
|
+
attributes[:content_size] ||= "9"
|
77
|
+
attributes[:aside_size] ||= (12 - attributes[:content_size].to_i).to_s
|
78
|
+
aside_span = "span" + attributes[:aside_size]
|
79
|
+
aside_location ||= 'right'
|
80
|
+
else
|
81
|
+
attributes[:content_size] = "12" unless attributes[:content_size]
|
82
|
+
end
|
74
83
|
%>
|
75
84
|
<div class="container bootstrap-content" param="container">
|
76
85
|
<div class="row" param="main-row">
|
86
|
+
<div class="#{aside_span}" if="&all_parameters[:aside] && aside_location=='left'" param="aside-column">
|
87
|
+
<div class="well">
|
88
|
+
<section param="aside"/>
|
89
|
+
</div>
|
90
|
+
</div>
|
77
91
|
<div class="span#{attributes[:content_size]}" param="main-column">
|
78
|
-
<section with-flash-messages param="content"
|
92
|
+
<section with-flash-messages param="content">
|
93
|
+
<section param="main-content">
|
94
|
+
<header param="content-header"/>
|
95
|
+
<section param="content-body"/>
|
96
|
+
</section>
|
97
|
+
</section>
|
79
98
|
</div>
|
80
|
-
<div class="#{aside_span}" if="&
|
99
|
+
<div class="#{aside_span}" if="&all_parameters[:aside] && aside_location=='right'" param="aside-column">
|
81
100
|
<div class="well">
|
82
101
|
<section param="aside"/>
|
83
102
|
</div>
|
@@ -118,6 +137,7 @@ Make your choice global with:
|
|
118
137
|
</html>
|
119
138
|
</def>
|
120
139
|
|
140
|
+
<!-- nodoc. -->
|
121
141
|
<def tag="simple-page">
|
122
142
|
<page without-live-search without-main-nav merge>
|
123
143
|
<account-nav: replace />
|
data/taglibs/page_nav.dryml
CHANGED
data/taglibs/search.dryml
CHANGED
@@ -5,7 +5,7 @@ Adds bootstrap styling to `<live-search>`
|
|
5
5
|
<old-live-search remove-class="form-horizontal">
|
6
6
|
<label: replace/>
|
7
7
|
<form: class="form-search"/>
|
8
|
-
<input: placeholder="Search" class="search-query"/>
|
8
|
+
<input: placeholder="&t('hobo.live_search.label', :default => 'Search')" class="search-query"/>
|
9
9
|
<after-input:>
|
10
10
|
<i class="icon-search"></i>
|
11
11
|
</after-input:>
|
data/taglibs/show_page.dryml
CHANGED
data/taglibs/table-plus.dryml
CHANGED
@@ -6,9 +6,11 @@ Adds bootstrap styling to `<table-plus>`
|
|
6
6
|
<table: class="table table-striped table-bordered" style="clear: both;"/>
|
7
7
|
<header: style="float: right;"/>
|
8
8
|
<search-filter:>
|
9
|
-
<search-form: class="form-search" style="display: inline;" />
|
10
|
-
<
|
11
|
-
<
|
9
|
+
<search-form: class="form-search" remove-class="form-horizontal" style="display: inline;" />
|
10
|
+
<label: replace/>
|
11
|
+
<input: class="search-query" placeholder="Search"/>
|
12
|
+
<search-submit: remove-class="btn-primary" class="btn-small"/>
|
13
|
+
<clear-form: class="form-search" remove-class="form-horizontal" style="display: inline;"/>
|
12
14
|
</search-filter:>
|
13
15
|
</old-table-plus>
|
14
16
|
</extend>
|
Binary file
|
@@ -1,3 +1,5 @@
|
|
1
|
-
@import "
|
2
|
-
@import "hobo_bootstrap/
|
1
|
+
@import "bootstrap";
|
2
|
+
@import "hobo_bootstrap/hobo_bootstrap_main"; // bootstrap stylings for hobo components
|
3
|
+
@import "bootstrap-responsive"; // Main responsive file
|
4
|
+
@import "hobo_bootstrap/hobo_bootstrap_responsive"; // Hobo responsive workarounds
|
3
5
|
@import "hobo_bootstrap/hobo_bootstrap_docs";
|
@@ -1,6 +1,4 @@
|
|
1
1
|
|
2
|
-
@import "bootstrap";
|
3
|
-
|
4
2
|
/* Top menu bar (app name, login...):
|
5
3
|
It's full width so border-radius is unnecessary */
|
6
4
|
.navbar-inner{
|
@@ -25,7 +23,7 @@
|
|
25
23
|
margin:4px 4px 0 0;
|
26
24
|
}
|
27
25
|
.form-search i {
|
28
|
-
margin: -
|
26
|
+
margin: -22px 0 0 178px;
|
29
27
|
display: block;
|
30
28
|
position:absolute;
|
31
29
|
}
|
@@ -56,8 +54,9 @@ div.hidden-fields {
|
|
56
54
|
|
57
55
|
/* spinner */
|
58
56
|
.ajax-progress{
|
59
|
-
padding:
|
60
|
-
background: image-url('ajax-loader.gif') no-repeat
|
57
|
+
padding: 5px 12px 5px 27px;
|
58
|
+
background: image-url('ajax-loader.gif') no-repeat 8px 6px rgba(0, 0, 0, 0.2);
|
59
|
+
border-radius: 2px;
|
61
60
|
display: none;
|
62
61
|
z-index: 1000;
|
63
62
|
}
|
@@ -71,12 +70,14 @@ div.hidden-fields {
|
|
71
70
|
ul.input-many {list-style-type: none;}
|
72
71
|
ul.input-all {list-style-type: none;}
|
73
72
|
|
74
|
-
ul.input-many > li {
|
75
|
-
ul.input-many .input-many-item {
|
76
|
-
|
77
|
-
li.input-many-
|
78
|
-
|
79
|
-
|
73
|
+
ul.input-many > li { display: table-row; }
|
74
|
+
ul.input-many > li > div.input-many-item {display: table-cell; padding-right: 10px; padding-top: 20px; border-right: 1px dotted; border-bottom: 1px dotted; }
|
75
|
+
/* li:nth-child(3) is the first visible child; first two are hidden */
|
76
|
+
ul.input-many > li:nth-child(3) > div.input-many-item {padding-top: 0px;}
|
77
|
+
ul.input-many > li > div.buttons {display: table-cell; padding-left: 10px; vertical-align: middle;}
|
78
|
+
ul.input-many > li > div.buttons button {@extend .btn}
|
79
|
+
ul.input-many > li.input-many-template { display:none; }
|
80
|
+
ul.input-many > li.hidden { display:none; }
|
80
81
|
|
81
82
|
|
82
83
|
/* Index page fix */
|
@@ -128,6 +129,9 @@ ul.collection { margin-left: 0;}
|
|
128
129
|
content:"*";
|
129
130
|
color: #C62121;
|
130
131
|
}
|
132
|
+
.form-horizontal .actions {
|
133
|
+
@extend .form-actions;
|
134
|
+
}
|
131
135
|
|
132
136
|
|
133
137
|
|
@@ -141,3 +145,41 @@ div.ordering-handle {
|
|
141
145
|
padding: 0 2px;
|
142
146
|
border-radius: 4px 4px 4px 4px;
|
143
147
|
}
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
/* Select-many */
|
152
|
+
.select-many .items{
|
153
|
+
width: 100%;
|
154
|
+
display: table;
|
155
|
+
margin-bottom: 3px;
|
156
|
+
}
|
157
|
+
.select-many .item{
|
158
|
+
display: table-row;
|
159
|
+
}
|
160
|
+
.select-many .item * {
|
161
|
+
display: table-cell;
|
162
|
+
margin-bottom: 5px;
|
163
|
+
}
|
164
|
+
.select-many optgroup.disabled-option {
|
165
|
+
color: #BBBBBB;
|
166
|
+
height: 1em;
|
167
|
+
}
|
168
|
+
|
169
|
+
|
170
|
+
/* Table plus search */
|
171
|
+
.table-plus .header .search{
|
172
|
+
padding-bottom:5px;
|
173
|
+
}
|
174
|
+
.table-plus .header .search .submit-button{
|
175
|
+
margin-left:5px;
|
176
|
+
}
|
177
|
+
|
178
|
+
|
179
|
+
/* check-many */
|
180
|
+
.check-many {
|
181
|
+
list-style-type: none;
|
182
|
+
}
|
183
|
+
.check-many li label {
|
184
|
+
display: inline;
|
185
|
+
}
|