css3-progress-bar-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/css3-progress-bar.css +201 -0
- data/config/initializers/progress_bars.rb +87 -0
- data/css3-progress-bar-rails.gemspec +24 -0
- data/lib/css3-progress-bar-rails.rb +12 -0
- data/lib/css3-progress-bar-rails/version.rb +9 -0
- metadata +65 -0
data/Gemfile
ADDED
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,201 @@
|
|
1
|
+
/* CSS3 Progress bars by Josh Sullivan
|
2
|
+
@jsullivandigs on Twitter
|
3
|
+
josh@dipperstove.com */
|
4
|
+
|
5
|
+
.bar_container {
|
6
|
+
margin: 0 auto;
|
7
|
+
padding: 5px;
|
8
|
+
height: 20px;
|
9
|
+
background: #a0a0a0;
|
10
|
+
-webkit-box-shadow: 0px 1px 1px 0px #f0f0f0;
|
11
|
+
-moz-box-shadow: 0px 1px 1px 0px #f0f0f0;
|
12
|
+
box-shadow: 0px 1px 0px 0px #f0f0f0;
|
13
|
+
}
|
14
|
+
|
15
|
+
.bar_mortice {
|
16
|
+
height: 20px;
|
17
|
+
background: #777;
|
18
|
+
-webkit-box-shadow: inset 0px 1px 2px 0px #333;
|
19
|
+
-moz-box-shadow: inset 0px 1px 2px 0px #333;
|
20
|
+
box-shadow: inset 0px 1px 2px 0px #333;
|
21
|
+
border-bottom: 1px solid #d0d0d0;
|
22
|
+
}
|
23
|
+
|
24
|
+
.progress {
|
25
|
+
height: 20px;
|
26
|
+
background: #FFF;
|
27
|
+
float: left;
|
28
|
+
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
|
29
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
|
30
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
|
31
|
+
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
|
32
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
|
33
|
+
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
|
34
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
|
35
|
+
border-top: 1px solid #fff;
|
36
|
+
border-bottom: 1px solid #999;
|
37
|
+
}
|
38
|
+
|
39
|
+
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
40
|
+
MINIS
|
41
|
+
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
|
42
|
+
.container_tiny {
|
43
|
+
margin: 0 auto;
|
44
|
+
padding: 3px;
|
45
|
+
height: 7px;
|
46
|
+
background: #a0a0a0;
|
47
|
+
-webkit-box-shadow: 0px 1px 1px 0px #f0f0f0;
|
48
|
+
-moz-box-shadow: 0px 1px 1px 0px #f0f0f0;
|
49
|
+
box-shadow: 0px 1px 0px 0px #f0f0f0;
|
50
|
+
|
51
|
+
}
|
52
|
+
|
53
|
+
.mortice_tiny {
|
54
|
+
height: 7px;
|
55
|
+
background: #777;
|
56
|
+
-webkit-box-shadow: inset 0px 1px 2px 0px #333;
|
57
|
+
-moz-box-shadow: inset 0px 1px 2px 0px #333;
|
58
|
+
box-shadow: inset 0px 1px 2px 0px #333;
|
59
|
+
border-bottom: 1px solid #d0d0d0;
|
60
|
+
}
|
61
|
+
|
62
|
+
.progress_tiny {
|
63
|
+
height: 7px;
|
64
|
+
border-bottom: none;
|
65
|
+
}
|
66
|
+
|
67
|
+
|
68
|
+
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
69
|
+
STYLES
|
70
|
+
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
|
71
|
+
|
72
|
+
.rounded_bar_container {
|
73
|
+
-webkit-border-radius: 10px;
|
74
|
+
-moz-border-radius: 10px;
|
75
|
+
border-radius: 10px;
|
76
|
+
}
|
77
|
+
.rounded {
|
78
|
+
-webkit-border-radius: 6px;
|
79
|
+
-moz-border-radius: 6px;
|
80
|
+
border-radius: 6px;
|
81
|
+
}
|
82
|
+
|
83
|
+
.rounded_bar_container_tiny {
|
84
|
+
-webkit-border-radius: 5px;
|
85
|
+
-moz-border-radius: 5px;
|
86
|
+
border-radius: 5px;
|
87
|
+
}
|
88
|
+
.rounded_tiny {
|
89
|
+
-webkit-border-radius: 2px;
|
90
|
+
-moz-border-radius: 2px;
|
91
|
+
border-radius: 2px;
|
92
|
+
}
|
93
|
+
|
94
|
+
|
95
|
+
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
96
|
+
COLORS
|
97
|
+
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
|
98
|
+
|
99
|
+
/* GREEN */
|
100
|
+
|
101
|
+
.green {
|
102
|
+
background: #AAFF00;
|
103
|
+
background: -moz-linear-gradient(top, #AAFF00 0%, #8c0 100%);
|
104
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AAFF00), color-stop(100%,#8c0));
|
105
|
+
background: -webkit-linear-gradient(top, #AAFF00 0%,#8c0 100%);
|
106
|
+
background: -o-linear-gradient(top, #AAFF00 0%,#8c0 100%);
|
107
|
+
background: -ms-linear-gradient(top, #AAFF00 0%,#8c0 100%);
|
108
|
+
background: linear-gradient(top, #AAFF00 0%,#8c0 100%);
|
109
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAFF00', endColorstr='#8c0',GradientType=0 );
|
110
|
+
border-top: 1px solid #e8ffbb;
|
111
|
+
border-bottom: 1px solid #690;
|
112
|
+
}
|
113
|
+
.green_container {background: #690;}
|
114
|
+
.green_mortice {
|
115
|
+
background: #460;
|
116
|
+
border-bottom: 1px solid #8c0;
|
117
|
+
}
|
118
|
+
|
119
|
+
|
120
|
+
/* ORANGE */
|
121
|
+
|
122
|
+
.orange {
|
123
|
+
background: #FFAA00;
|
124
|
+
background: -moz-linear-gradient(top, #FFAA00 0%, #dd9300 100%);
|
125
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFAA00), color-stop(100%,#dd9300));
|
126
|
+
background: -webkit-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
|
127
|
+
background: -o-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
|
128
|
+
background: -ms-linear-gradient(top, #FFAA00 0%,#dd9300 100%);
|
129
|
+
background: linear-gradient(top, #FFAA00 0%,#dd9300 100%);
|
130
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFAA00', endColorstr='#dd9300',GradientType=0 );
|
131
|
+
border-top: 1px solid #ffd277;
|
132
|
+
border-bottom: 1px solid #960;
|
133
|
+
}
|
134
|
+
.orange_container {background: #960;}
|
135
|
+
.orange_mortice {
|
136
|
+
background: #640;
|
137
|
+
border-bottom: 1px solid #CC8800;
|
138
|
+
}
|
139
|
+
|
140
|
+
|
141
|
+
/* PINK */
|
142
|
+
|
143
|
+
.pink {
|
144
|
+
background: #FF00AA;
|
145
|
+
background: -moz-linear-gradient(top, #FF00AA 0%, #dd0093 100%);
|
146
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF00AA), color-stop(100%,#dd0093));
|
147
|
+
background: -webkit-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
|
148
|
+
background: -o-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
|
149
|
+
background: -ms-linear-gradient(top, #FF00AA 0%,#dd0093 100%);
|
150
|
+
background: linear-gradient(top, #FF00AA 0%,#dd0093 100%);
|
151
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF00AA', endColorstr='#dd0093',GradientType=0 );
|
152
|
+
border-top: 1px solid #f6c;
|
153
|
+
border-bottom: 1px solid #906;
|
154
|
+
}
|
155
|
+
.pink_container {background: #906;}
|
156
|
+
.pink_mortice {
|
157
|
+
background: #604;
|
158
|
+
border-bottom: 1px solid #c08;
|
159
|
+
}
|
160
|
+
|
161
|
+
|
162
|
+
/* PURPLE */
|
163
|
+
|
164
|
+
.purple {
|
165
|
+
background: #AA00FF;
|
166
|
+
background: -moz-linear-gradient(top, #AA00FF 0%, #9300dd 100%);
|
167
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AA00FF), color-stop(100%,#9300dd));
|
168
|
+
background: -webkit-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
|
169
|
+
background: -o-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
|
170
|
+
background: -ms-linear-gradient(top, #AA00FF 0%,#9300dd 100%);
|
171
|
+
background: linear-gradient(top, #AA00FF 0%,#9300dd 100%);
|
172
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AA00FF', endColorstr='#9300dd',GradientType=0 );
|
173
|
+
border-top: 1px solid #c655ff;
|
174
|
+
border-bottom: 1px solid #5b0088;
|
175
|
+
}
|
176
|
+
.purple_container {background: #609;}
|
177
|
+
.purple_mortice {
|
178
|
+
background: #406;
|
179
|
+
border-bottom: 1px solid #80c;
|
180
|
+
}
|
181
|
+
|
182
|
+
|
183
|
+
/* BLUE */
|
184
|
+
|
185
|
+
.blue {
|
186
|
+
background: #00AAFF;
|
187
|
+
background: -moz-linear-gradient(top, #00AAFF 0%, #0093dd 100%);
|
188
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AAFF), color-stop(100%,#0093dd));
|
189
|
+
background: -webkit-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
|
190
|
+
background: -o-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
|
191
|
+
background: -ms-linear-gradient(top, #00AAFF 0%,#0093dd 100%);
|
192
|
+
background: linear-gradient(top, #00AAFF 0%,#0093dd 100%);
|
193
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00AAFF', endColorstr='#0093dd',GradientType=0 );
|
194
|
+
border-top: 1px solid #88d7ff;
|
195
|
+
border-bottom: 1px solid #069;
|
196
|
+
}
|
197
|
+
.blue_container {background: #069;}
|
198
|
+
.blue_mortice {
|
199
|
+
background: #046;
|
200
|
+
border-bottom: 1px solid #08c;
|
201
|
+
}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
require 'action_view/helpers/tag_helper'
|
2
|
+
module ActionView
|
3
|
+
module Helpers
|
4
|
+
module Css3ProgressBars
|
5
|
+
extend ActiveSupport::Concern
|
6
|
+
|
7
|
+
include TagHelper
|
8
|
+
|
9
|
+
def progress_bar percentage, *opts
|
10
|
+
options = opts.extract_options!
|
11
|
+
|
12
|
+
container_classes = %w(bar_container)
|
13
|
+
bar_classes = %w(progress)
|
14
|
+
mortice_classes = %w(bar_mortice)
|
15
|
+
|
16
|
+
if options[:rounded] && options[:rounded] == true
|
17
|
+
container_classes << 'rounded_bar_container'
|
18
|
+
bar_classes << 'rounded'
|
19
|
+
mortice_classes << 'rounded'
|
20
|
+
end
|
21
|
+
|
22
|
+
if options[:color] && bar_colors.include?(options[:color])
|
23
|
+
container_classes << "#{options[:color]}_container"
|
24
|
+
bar_classes << options[:color]
|
25
|
+
mortice_classes << "#{options[:color]}_mortice"
|
26
|
+
end
|
27
|
+
|
28
|
+
if options[:tiny] && options[:tiny] == true
|
29
|
+
container_classes << 'container_tiny'
|
30
|
+
bar_classes << 'progress_tiny'
|
31
|
+
mortice_classes << 'mortice_tiny'
|
32
|
+
end
|
33
|
+
|
34
|
+
bar_html = bar_div(bar_classes, bar_style(percentage))
|
35
|
+
mortice_html = mortice_div(bar_html, mortice_classes)
|
36
|
+
|
37
|
+
content_tag :div, mortice_html, :class => container_classes.join(' ')
|
38
|
+
end
|
39
|
+
|
40
|
+
def combo_progress_bar *opts
|
41
|
+
options = opts.extract_options!
|
42
|
+
|
43
|
+
container_classes = %w(bar_container)
|
44
|
+
bar_classes = %w(progress)
|
45
|
+
mortice_classes = %w(bar_mortice)
|
46
|
+
|
47
|
+
if options[:rounded] && options[:rounded] == true
|
48
|
+
container_classes << 'rounded_bar_container'
|
49
|
+
bar_classes << 'rounded'
|
50
|
+
mortice_classes << 'rounded'
|
51
|
+
end
|
52
|
+
|
53
|
+
if options[:tiny] && options[:tiny] == true
|
54
|
+
container_classes << 'container_tiny'
|
55
|
+
bar_classes << 'progress_tiny'
|
56
|
+
mortice_classes << 'mortice_tiny'
|
57
|
+
end
|
58
|
+
|
59
|
+
bars = ''
|
60
|
+
options[:percentages][0..4].each_with_index do |p, i|
|
61
|
+
bars += bar_div((bar_classes << bar_colors[i]), bar_style(p))
|
62
|
+
end
|
63
|
+
|
64
|
+
mortice_html = mortice_div(bars, mortice_classes)
|
65
|
+
content_tag :div, mortice_html, :class => container_classes.join(' ')
|
66
|
+
end
|
67
|
+
|
68
|
+
protected
|
69
|
+
def bar_colors
|
70
|
+
%w(green orange pink blue purple)
|
71
|
+
end
|
72
|
+
|
73
|
+
def bar_style percentage
|
74
|
+
"width: #{percentage}%;"
|
75
|
+
end
|
76
|
+
|
77
|
+
def bar_div classes, style
|
78
|
+
content_tag :div, '', :style => style, :class => classes.join(' ')
|
79
|
+
end
|
80
|
+
|
81
|
+
def mortice_div bar_html, classes
|
82
|
+
content_tag :div, bar_html, :class => classes.join(' ')
|
83
|
+
end
|
84
|
+
end
|
85
|
+
end
|
86
|
+
end
|
87
|
+
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "css3-progress-bar-rails/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "css3-progress-bar-rails"
|
7
|
+
s.version = Css3::Progress::Bar::Rails::VERSION
|
8
|
+
s.authors = ["Nicholas Fine"]
|
9
|
+
s.email = ["nicholas.fine@gmail.com"]
|
10
|
+
s.homepage = ""
|
11
|
+
s.summary = %q{Integrates Josh Sullivan's CSS3 Progress Bars into Rails 3.1+ Projects.}
|
12
|
+
s.description = %q{Integrates Josh Sullivan's CSS3 Progress Bars into Rails and adds ActionView helpers for generation.}
|
13
|
+
|
14
|
+
s.rubyforge_project = "css3-progress-bar-rails"
|
15
|
+
|
16
|
+
s.files = `git ls-files`.split("\n")
|
17
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
18
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
19
|
+
s.require_paths = ["lib"]
|
20
|
+
|
21
|
+
# specify any dependencies here; for example:
|
22
|
+
# s.add_development_dependency "rspec"
|
23
|
+
s.add_runtime_dependency "rails"
|
24
|
+
end
|
metadata
ADDED
@@ -0,0 +1,65 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: css3-progress-bar-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Nicholas Fine
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-01-02 00:00:00.000000000Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: rails
|
16
|
+
requirement: &12704480 !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '0'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: *12704480
|
25
|
+
description: Integrates Josh Sullivan's CSS3 Progress Bars into Rails and adds ActionView
|
26
|
+
helpers for generation.
|
27
|
+
email:
|
28
|
+
- nicholas.fine@gmail.com
|
29
|
+
executables: []
|
30
|
+
extensions: []
|
31
|
+
extra_rdoc_files: []
|
32
|
+
files:
|
33
|
+
- .gitignore
|
34
|
+
- Gemfile
|
35
|
+
- Rakefile
|
36
|
+
- app/assets/stylesheets/css3-progress-bar.css
|
37
|
+
- config/initializers/progress_bars.rb
|
38
|
+
- css3-progress-bar-rails.gemspec
|
39
|
+
- lib/css3-progress-bar-rails.rb
|
40
|
+
- lib/css3-progress-bar-rails/version.rb
|
41
|
+
homepage: ''
|
42
|
+
licenses: []
|
43
|
+
post_install_message:
|
44
|
+
rdoc_options: []
|
45
|
+
require_paths:
|
46
|
+
- lib
|
47
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
48
|
+
none: false
|
49
|
+
requirements:
|
50
|
+
- - ! '>='
|
51
|
+
- !ruby/object:Gem::Version
|
52
|
+
version: '0'
|
53
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
54
|
+
none: false
|
55
|
+
requirements:
|
56
|
+
- - ! '>='
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
version: '0'
|
59
|
+
requirements: []
|
60
|
+
rubyforge_project: css3-progress-bar-rails
|
61
|
+
rubygems_version: 1.8.6
|
62
|
+
signing_key:
|
63
|
+
specification_version: 3
|
64
|
+
summary: Integrates Josh Sullivan's CSS3 Progress Bars into Rails 3.1+ Projects.
|
65
|
+
test_files: []
|