首页 探索 帮助
注册 登录
jamesperet
/
rails_website_template
关注 1
点赞 0
派生 0

浏览代码
bootstrap switch gem and overrides

jamesperet 11 年之前
父节点
858464858c
当前提交
ebf64baa3d
共有 10 个文件被更改，包括 388 次插入 和 2 次删除
显示文件统计
  1. 2 0
      Gemfile
  2. 9 0
      Gemfile.lock
  3. 3 0
      app/assets/javascripts/admin_panel.js.coffee
  4. 1 0
      app/assets/javascripts/application.js
  5. 12 0
      app/assets/stylesheets/admin_panel.css.less
  6. 1 0
      app/assets/stylesheets/application.css
  7. 352 0
      app/assets/stylesheets/checkbox.css.less
  8. 4 2
      app/views/admin_panel/site_config.html.erb
  9. 2 0
      config/locales/en.yml
  10. 2 0
      config/locales/pt-BR.yml

+ 2 - 0
Gemfile
查看文件 

@@ -31,10 +31,12 @@ end
31 31
32 32 
 gem "therubyracer"
33 33 
 gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
34 
+gem 'sass-rails'
34 35 
 gem "twitter-bootstrap-rails"
35 36 
 gem 'flatstrap-rails'
36 37 
 gem 'font-awesome-rails'
37 38 
 gem 'bootstrap-timepicker-rails'
39 
+gem "bootstrap-switch-rails"
38 40 
 gem 'simple_form'
39 41 
 gem 'bootstrap_form'
40 42 
 gem 'friendly_id', '~> 5.0.0'

+ 9 - 0
Gemfile.lock
查看文件 

@@ -28,6 +28,7 @@ GEM
28 28 
     addressable (2.3.6)
29 29 
     arel (4.0.2)
30 30 
     bcrypt (3.1.7)
31 
+    bootstrap-switch-rails (3.1.0)
31 32 
     bootstrap-timepicker-rails (0.1.3)
32 33 
       railties (>= 3.0)
33 34 
     bootstrap_form (2.2.0)
 
@@ -145,6 +146,12 @@ GEM
145 146 
       json (~> 1.4)
146 147 
     redcarpet (3.1.2)
147 148 
     ref (1.0.5)
149 
+    sass (3.2.19)
150 
+    sass-rails (4.0.3)
151 
+      railties (>= 4.0.0, < 5.0)
152 
+      sass (~> 3.2.0)
153 
+      sprockets (~> 2.8, <= 2.11.0)
154 
+      sprockets-rails (~> 2.0)
148 155 
     sdoc (0.4.1)
149 156 
       json (~> 1.7, >= 1.7.7)
150 157 
       rdoc (~> 4.0)
 
@@ -190,6 +197,7 @@ PLATFORMS
190 197 
   ruby
191 198
192 199 
 DEPENDENCIES
200 
+  bootstrap-switch-rails
193 201 
   bootstrap-timepicker-rails
194 202 
   bootstrap_form
195 203 
   carrierwave
 
@@ -209,6 +217,7 @@ DEPENDENCIES
209 217 
   pg
210 218 
   rails (= 4.0.4)
211 219 
   redcarpet
220 
+  sass-rails
212 221 
   sdoc
213 222 
   simple_form
214 223 
   summernote-rails

+ 3 - 0
app/assets/javascripts/admin_panel.js.coffee
查看文件 

@@ -1,3 +1,6 @@
1 1 
 # Place all the behaviors and hooks related to the matching controller here.
2 2 
 # All this logic will automatically be available in application.js.
3 3 
 # You can use CoffeeScript in this file: http://coffeescript.org/
4 
+
5 
+jQuery ->
6 
+	$(".bootstrap_switch").bootstrapSwitch('size', 'large');

+ 1 - 0
app/assets/javascripts/application.js
查看文件 

@@ -13,6 +13,7 @@
13 13 
 //= require jquery
14 14 
 //= require jquery_ujs
15 15 
 //= require twitter/bootstrap
16 
+//= require bootstrap-switch
16 17 
 //= require summernote
17 18 
 //= require turbolinks
18 19 
 //= require_tree .

+ 12 - 0
app/assets/stylesheets/admin_panel.css.less
查看文件 

@@ -8,4 +8,16 @@ body {
8 8
9 9 
 .navbar-inner {
10 10 
 	max-width:1577px;
11 
+}
12 
+
13 
+.bootstrap-switch {
14 
+	margin-right: 10px;
15 
+}
16 
+
17 
+.bootstrap_switch_group .checkbox {
18 
+	padding-left: 0px;
19 
+}
20 
+
21 
+.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
22 
+	font-size: 12px;
11 23 
 }

+ 1 - 0
app/assets/stylesheets/application.css
查看文件 

@@ -12,6 +12,7 @@
12 12 
  *= require flatstrap/bootstrap
13 13 
  *= require font-awesome
14 14 
  *= require rails_bootstrap_forms
15 
+ *= require bootstrap3-switch
15 16 
  *= require summernote
16 17 
  *= require_tree .
17 18 
  */

+ 352 - 0
app/assets/stylesheets/checkbox.css.less
查看文件 

@@ -0,0 +1,352 @@
1 
+.can-toggle {
2 
+  position: relative;
3 
+}
4 
+.can-toggle *, .can-toggle *:before, .can-toggle *:after {
5 
+  -moz-box-sizing: border-box;
6 
+       box-sizing: border-box;
7 
+}
8 
+.can-toggle input[type="checkbox"] {
9 
+  opacity: 0;
10 
+  position: absolute;
11 
+  top: 0;
12 
+  left: 0;
13 
+}
14 
+.can-toggle input[type="checkbox"][disabled] ~ label {
15 
+  pointer-events: none;
16 
+}
17 
+.can-toggle input[type="checkbox"][disabled] ~ label .can-toggle__switch {
18 
+  opacity: 0.4;
19 
+}
20 
+.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:before {
21 
+  content: attr(data-unchecked);
22 
+  left: 0;
23 
+}
24 
+.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
25 
+  content: attr(data-checked);
26 
+}
27 
+.can-toggle label {
28 
+  -webkit-user-select: none;
29 
+     -moz-user-select: none;
30 
+      -ms-user-select: none;
31 
+          user-select: none;
32 
+  position: relative;
33 
+  display: -webkit-flex;
34 
+  display: -ms-flexbox;
35 
+  display: flex;
36 
+  -webkit-align-items: center;
37 
+      -ms-flex-align: center;
38 
+          align-items: center;
39 
+}
40 
+.can-toggle label .can-toggle__label-text {
41 
+  -webkit-flex: 1;
42 
+      -ms-flex: 1;
43 
+          flex: 1;
44 
+  padding-left: 32px;
45 
+}
46 
+.can-toggle label .can-toggle__switch {
47 
+  position: relative;
48 
+}
49 
+.can-toggle label .can-toggle__switch:before {
50 
+  content: attr(data-checked);
51 
+  position: absolute;
52 
+  top: 0;
53 
+  text-transform: uppercase;
54 
+  text-align: center;
55 
+}
56 
+.can-toggle label .can-toggle__switch:after {
57 
+  content: attr(data-unchecked);
58 
+  position: absolute;
59 
+  z-index: 5;
60 
+  text-transform: uppercase;
61 
+  text-align: center;
62 
+  background: white;
63 
+  -webkit-transform: translate3d(0, 0, 0);
64 
+          transform: translate3d(0, 0, 0);
65 
+}
66 
+.can-toggle input[type="checkbox"][disabled] ~ label {
67 
+  color: rgba(119, 119, 119, 0.5);
68 
+}
69 
+.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch {
70 
+  background-color: #777;
71 
+}
72 
+.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
73 
+  color: #5e5e5e;
74 
+}
75 
+.can-toggle input[type="checkbox"]:hover ~ label {
76 
+  color: #6a6a6a;
77 
+}
78 
+.can-toggle input[type="checkbox"]:checked ~ label:hover {
79 
+  color: #55bc49;
80 
+}
81 
+.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch {
82 
+  background-color: #70c767;
83 
+}
84 
+.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
85 
+  color: #4fb743;
86 
+}
87 
+.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch {
88 
+  background-color: #5fc054;
89 
+}
90 
+.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
91 
+  color: #47a43d;
92 
+}
93 
+.can-toggle label .can-toggle__label-text {
94 
+  -webkit-flex: 1;
95 
+      -ms-flex: 1;
96 
+          flex: 1;
97 
+}
98 
+.can-toggle label .can-toggle__switch {
99 
+  -webkit-transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
100 
+          transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
101 
+  background: #848484;
102 
+}
103 
+.can-toggle label .can-toggle__switch:before {
104 
+  color: rgba(255, 255, 255, 0.5);
105 
+}
106 
+.can-toggle label .can-toggle__switch:after {
107 
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
108 
+  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
109 
+  color: #777;
110 
+}
111 
+.can-toggle input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
112 
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
113 
+}
114 
+.can-toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
115 
+  -webkit-transform: translate3d(65px, 0, 0);
116 
+          transform: translate3d(65px, 0, 0);
117 
+}
118 
+.can-toggle input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
119 
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
120 
+}
121 
+.can-toggle label {
122 
+  font-size: 14px;
123 
+}
124 
+.can-toggle label .can-toggle__switch {
125 
+  height: 36px;
126 
+  -webkit-flex: 0 0 134px;
127 
+      -ms-flex: 0 0 134px;
128 
+          flex: 0 0 134px;
129 
+  border-radius: 4px;
130 
+}
131 
+.can-toggle label .can-toggle__switch:before {
132 
+  left: 67px;
133 
+  font-size: 12px;
134 
+  line-height: 36px;
135 
+  width: 67px;
136 
+  padding: 0 12px;
137 
+}
138 
+.can-toggle label .can-toggle__switch:after {
139 
+  top: 2px;
140 
+  left: 2px;
141 
+  border-radius: 2px;
142 
+  width: 65px;
143 
+  line-height: 32px;
144 
+  font-size: 12px;
145 
+}
146 
+.can-toggle label .can-toggle__switch:hover:after {
147 
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
148 
+}
149 
+.can-toggle.can-toggle--size-small input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
150 
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
151 
+}
152 
+.can-toggle.can-toggle--size-small input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
153 
+  -webkit-transform: translate3d(44px, 0, 0);
154 
+          transform: translate3d(44px, 0, 0);
155 
+}
156 
+.can-toggle.can-toggle--size-small input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-small input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
157 
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
158 
+}
159 
+.can-toggle.can-toggle--size-small label {
160 
+  font-size: 13px;
161 
+}
162 
+.can-toggle.can-toggle--size-small label .can-toggle__switch {
163 
+  height: 28px;
164 
+  -webkit-flex: 0 0 90px;
165 
+      -ms-flex: 0 0 90px;
166 
+          flex: 0 0 90px;
167 
+  border-radius: 2px;
168 
+}
169 
+.can-toggle.can-toggle--size-small label .can-toggle__switch:before {
170 
+  left: 45px;
171 
+  font-size: 10px;
172 
+  line-height: 28px;
173 
+  width: 45px;
174 
+  padding: 0 12px;
175 
+}
176 
+.can-toggle.can-toggle--size-small label .can-toggle__switch:after {
177 
+  top: 1px;
178 
+  left: 1px;
179 
+  border-radius: 1px;
180 
+  width: 44px;
181 
+  line-height: 26px;
182 
+  font-size: 10px;
183 
+}
184 
+.can-toggle.can-toggle--size-small label .can-toggle__switch:hover:after {
185 
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
186 
+}
187 
+.can-toggle.can-toggle--size-large input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
188 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
189 
+}
190 
+.can-toggle.can-toggle--size-large input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
191 
+  -webkit-transform: translate3d(78px, 0, 0);
192 
+          transform: translate3d(78px, 0, 0);
193 
+}
194 
+.can-toggle.can-toggle--size-large input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.can-toggle--size-large input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
195 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
196 
+}
197 
+.can-toggle.can-toggle--size-large label {
198 
+  font-size: 14px;
199 
+}
200 
+.can-toggle.can-toggle--size-large label .can-toggle__switch {
201 
+  height: 50px;
202 
+  -webkit-flex: 0 0 160px;
203 
+      -ms-flex: 0 0 160px;
204 
+          flex: 0 0 160px;
205 
+  border-radius: 4px;
206 
+}
207 
+.can-toggle.can-toggle--size-large label .can-toggle__switch:before {
208 
+  left: 80px;
209 
+  font-size: 14px;
210 
+  line-height: 50px;
211 
+  width: 80px;
212 
+  padding: 0 12px;
213 
+}
214 
+.can-toggle.can-toggle--size-large label .can-toggle__switch:after {
215 
+  top: 2px;
216 
+  left: 2px;
217 
+  border-radius: 2px;
218 
+  width: 78px;
219 
+  line-height: 46px;
220 
+  font-size: 14px;
221 
+}
222 
+.can-toggle.can-toggle--size-large label .can-toggle__switch:hover:after {
223 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
224 
+}
225 
+.can-toggle.demo-rebrand-1 input[type="checkbox"][disabled] ~ label {
226 
+  color: rgba(181, 62, 116, 0.5);
227 
+}
228 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label .can-toggle__switch {
229 
+  background-color: #b53e74;
230 
+}
231 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
232 
+  color: #8f315c;
233 
+}
234 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:hover ~ label {
235 
+  color: #a23768;
236 
+}
237 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label:hover {
238 
+  color: #39916a;
239 
+}
240 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label .can-toggle__switch {
241 
+  background-color: #44ae7f;
242 
+}
243 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
244 
+  color: #368a65;
245 
+}
246 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch {
247 
+  background-color: #3d9c72;
248 
+}
249 
+.can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-1 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
250 
+  color: #2f7757;
251 
+}
252 
+.can-toggle.demo-rebrand-1 label .can-toggle__label-text {
253 
+  -webkit-flex: 1;
254 
+      -ms-flex: 1;
255 
+          flex: 1;
256 
+}
257 
+.can-toggle.demo-rebrand-1 label .can-toggle__switch {
258 
+  -webkit-transition: background-color 0.3s ease-in-out;
259 
+          transition: background-color 0.3s ease-in-out;
260 
+  background: #c14b81;
261 
+}
262 
+.can-toggle.demo-rebrand-1 label .can-toggle__switch:before {
263 
+  color: rgba(255, 255, 255, 0.6);
264 
+}
265 
+.can-toggle.demo-rebrand-1 label .can-toggle__switch:after {
266 
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
267 
+  transition: transform 0.3s ease-in-out;
268 
+  color: #b53e74;
269 
+}
270 
+.can-toggle.demo-rebrand-2 input[type="checkbox"][disabled] ~ label {
271 
+  color: rgba(68, 68, 68, 0.5);
272 
+}
273 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch {
274 
+  background-color: #444;
275 
+}
276 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
277 
+  color: #2b2b2b;
278 
+}
279 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label {
280 
+  color: #373737;
281 
+}
282 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label:hover {
283 
+  color: #62b125;
284 
+}
285 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch {
286 
+  background-color: #75d32d;
287 
+}
288 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
289 
+  color: #5da924;
290 
+}
291 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch {
292 
+  background-color: #69be28;
293 
+}
294 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
295 
+  color: #52941f;
296 
+}
297 
+.can-toggle.demo-rebrand-2 label .can-toggle__label-text {
298 
+  -webkit-flex: 1;
299 
+      -ms-flex: 1;
300 
+          flex: 1;
301 
+}
302 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch {
303 
+  -webkit-transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
304 
+          transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
305 
+  background: #515151;
306 
+}
307 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
308 
+  color: rgba(255, 255, 255, 0.7);
309 
+}
310 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
311 
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
312 
+  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
313 
+  color: #444;
314 
+}
315 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:hover ~ label .can-toggle__switch:after {
316 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
317 
+}
318 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
319 
+  -webkit-transform: translate3d(58px, 0, 0);
320 
+          transform: translate3d(58px, 0, 0);
321 
+}
322 
+.can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:focus ~ label .can-toggle__switch:after, .can-toggle.demo-rebrand-2 input[type="checkbox"]:checked:hover ~ label .can-toggle__switch:after {
323 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
324 
+}
325 
+.can-toggle.demo-rebrand-2 label {
326 
+  font-size: 13px;
327 
+}
328 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch {
329 
+  height: 60px;
330 
+  -webkit-flex: 0 0 120px;
331 
+      -ms-flex: 0 0 120px;
332 
+          flex: 0 0 120px;
333 
+  border-radius: 60px;
334 
+}
335 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch:before {
336 
+  left: 60px;
337 
+  font-size: 13px;
338 
+  line-height: 60px;
339 
+  width: 60px;
340 
+  padding: 0 12px;
341 
+}
342 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch:after {
343 
+  top: 2px;
344 
+  left: 2px;
345 
+  border-radius: 30px;
346 
+  width: 58px;
347 
+  line-height: 56px;
348 
+  font-size: 13px;
349 
+}
350 
+.can-toggle.demo-rebrand-2 label .can-toggle__switch:hover:after {
351 
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
352 
+}

+ 4 - 2
app/views/admin_panel/site_config.html.erb
查看文件 

@@ -14,8 +14,10 @@
14 14 
 			    <%= f.text_field :tagline, :label => (t 'admin_panel.tagline'), class: 'input-xxlarge' %>
15 15 
 			    <%= f.select :default_language, ["en", "pt-BR"],  :label => (t 'admin_panel.default_language'), help: ("<i>* "+(t "admin_panel.language_hint")+"</i>").html_safe %>
16 16 
 			    <%= f.email_field :contact_email, :label => (t 'admin_panel.contact_email'), class:'input-xlarge' %>
17 
-			    <%= f.form_group :maintenance_mode do %>
18 
-			    		<%= f.check_box :maintenance_mode, :label => (t 'admin_panel.maintenance_mode') %>
17 
+			    <hr>
18 
+			    <%= f.form_group :maintenance_mode, class: 'bootstrap_switch_group' do %>
19 
+			    		<%= f.check_box :maintenance_mode, :label => (t 'admin_panel.maintenance_mode'), class: 'bootstrap_switch',
20 
+					data: { on_text: (t "admin_panel.on_switch"), off_text: (t "admin_panel.off_switch") } %>
19 21 
 			    <% end %>
20 22 
 			    <%= f.text_field :maintenance_title, :label => (t 'admin_panel.maintenance_title'), class:'input-xlarge' %>
21 23 
 			    <%= f.text_area :maintenance_message, :label => (t 'admin_panel.maintenance_message'), class:'input-block-level'  %>

+ 2 - 0
config/locales/en.yml
查看文件 

@@ -226,6 +226,8 @@ en:
226 226 
     maintenance_mode: Maintenance Mode
227 227 
     maintenance_title: Maintenance Page Title
228 228 
     maintenance_message: Maintenance Page Message
229 
+    on_switch: On
230 
+    off_switch: Off
229 231 
   nav:
230 232 
     admin_panel: Admin Panel
231 233 
     account: Account

+ 2 - 0
config/locales/pt-BR.yml
查看文件 

@@ -228,6 +228,8 @@ pt-BR:
228 228 
     maintenance_mode: Modo de Manutenção
229 229 
     maintenance_title: Titulo da página de manutenção
230 230 
     maintenance_message: Mensagem de manutenção
231 
+    on_switch: Ligado
232 
+    off_switch: Desligado
231 233 
   nav:
232 234 
     admin_panel: Painel de Controle
233 235 
     account: Conta