Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

V3.1.0 - Updated to use the rails 3.1 assets pipeline #41

Closed
wants to merge 12 commits into from

3 participants

@tscolari

I rewrote most of the gem's structure.
All assets (stylesheets, images) were moved to the app/assets/, and they no longer need to be copied to the rails application.
Updated the theme generator to create a web_app_theme.css manifest, instead of copying all the css, that will add the selected theme to the file.
Also created a new assets generator that will copy theme's files to application, just for customizations or rails <=3.1 compatibility.
I also rewrote the cucumber steps to use aruba.

@rgabo

@tscolari, there are still issues with relative paths in the theme CSS to fonts and images as Sprockets will pull them all into assets/application.css, whereas the fonts are relative to web-app-theme/themes/default. One easy fix is to pull in web_app_theme separately from the gem assets:

// Include web-app-theme separately because of relative paths
= stylesheet_link_tag 'web-app-theme/base', 'web-app-theme/themes/default/style'
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
= csrf_meta_tags

application.html.haml

@tscolari

And what if we use absolute paths in the css files?
The big point of using the gem's assets is that the css files can be updated with bundle, without regenerating anything

@rgabo

Yes, having the assets in the gem plays perfectly to the strengths of the Rails 3.1 asset pipeline. The problem is that the CSS's that are in web-app-theme expect other assets to be in the same relative place. This will either break by default (assets get flattened out by the Asset Pipeline) or when using ?debug_assets=1 (assets stay where they were).

Even if pulling in web-app-theme separately as I've shown in my previous comment, some assets will inadvertently be placed wrong, e.g. generating CRUD views will use image_tag 'icons/tick.png', whereas even if those assets are under icons, an image_tag 'tick.png' is enough and oddly, image_tag 'icons/tick.png does not work with 3.1.0.rc6, even though the documentation states that it should.

It will not be trivial to maintain both Rails 2 compatibility and getting the most out of Rails 3 (while trying not to touch the themes themselves) and I'm still getting myself familiar with the Asset Pipeline. Another option that is only available in Rails 3 is to use asset_data_uri to embed the asset into the CSS (getting rid of any path issues), but of course this needs ERb preprocessing.

I suggest we wait for the final 3.1 release and work with the asset pipeline based on what you've already done. When the final release hits, it'll be easier to figure out the best way and we can regroup.

@tscolari

Yes, I agree. I'll do more research about the assets pipeline while rails 3.1 isn't final.

In my opinion, I think that sprockets should fix relative paths when generating a css from a manifest, otherwise, it will be tricky to build complex schemes.

@rgabo

Sprockets allow you to use style.css.erb instead of style.css and there, you can easily call <%= asset_path 'image.png' %> or <%= asset_data_uri 'logo.png' %>. See the Edge Guides for the asset pipeline.

I don't think they would want to go down the path of rewriting people's asset's, even if it's 'just' the relative paths. I think the templating (erb) path is cleaner.

@tscolari

I made some changes, I would like your opinion.
I changed the css to templates as your said, using the asset_path method before images and fonts.
This make it works in rails 3.1.

On rails 3.0 and bellow, it must generate/copy the assets anyway.
So instead of copying, when the version is < 3.1.0, the generator overwrites the asset_path method, and use the css template to generate a raw css, moving all assets references to /stylesheets/. Also the images and everything else is copied to the public/stylesheets folder, as it does in the current version.

So when using 3.0 for example, the web_app_theme:theme generator will call the assets generator also. And the assets_generator will do this templating with the css.

On the rails 3.1 and above, it will not call the assets generator. And the assets generator will only copy the css.erb file (no parsing), that sprockets will serve.

Basically the generator will behave different for each version, and copy files to each version's default location.

It's not a clean fix, but this seems to work for both versions.

@rgabo

@tscolari, awesome that you've already updated, I'll check it out tomorrow. I do want to hear from @pilu of course on what direction he wants to take the project. Clearly, it should be a solution that takes advantage of the Asset Pipeline and I think this pull request has come closest to that. Let's iterate a bit more and hear what @pilu has to say.

@nathanvda

Good work. This solution indeed uses the asset pipeline better than my solution does. Nice work. We now have 4 pull requests for rails 3.1 compatibility, with slightly different approaches. To me it seems we better join forces, instead of all hacking away on our own solution.

@rgabo

@nathanvda, I think we all agree, but its still not crystal clear what the right path is. The asset pipeline has a quite different approach that makes it trickier to maintain backwards compatibility. I like the idea of web_app_theme precompiling the css.erb files for earlier versions, similar to what Rails 3.1 would do.

@nathanvda

@rgabo no, I agree, to me the right path is not clear at all. But this fork/pull seems to be the best approach up until now. Precompiling the css files using erb seems like a valid approach. But inside another fork, the backward compatibility was dropped entirely, and maybe that is a feasible approach as well.

@tscolari

I agree too. Fell free to add commits and suggestions!

I must do more testing, but I think it has, at least it should have, the same behavior that the 0.8.0 version when using in the rails 3.0 and bellow. The differences are that assets are been referred by absolute path (but the path is the same) and that the images ["avatar", "icons/*"] now reside inside a web-app-theme folder.

I should add more tests, some for different rails versions.

tscolari added some commits
@tscolari tscolari Updating the documentation, changing the dummy's Gemfile to rails 3.1…
….0 final
430fe4d
@tscolari tscolari changing documentation back a148b16
@tscolari tscolari Merge branch 'master' of git://github.com/pilu/web-app-theme
Conflicts:
	Gemfile.lock
	README.md
	app/assets/stylesheets/web-app-theme/themes/activo/style.css.erb
	app/assets/stylesheets/web-app-theme/themes/bec-green/style.css.erb
	app/assets/stylesheets/web-app-theme/themes/bec/style.css.erb
	app/assets/stylesheets/web-app-theme/themes/default/style.css.erb
	app/assets/stylesheets/web-app-theme/themes/warehouse/style.css.erb
813439b
@tscolari tscolari Merge branch 'master' of git://github.com/pilu/web-app-theme c7078ba
@tscolari tscolari Merge branch 'master' of git://github.com/pilu/web-app-theme
Conflicts:
	Gemfile
	Gemfile.lock
	web-app-theme.gemspec
6148157
@tscolari tscolari closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 29, 2011
  1. @tscolari
  2. @tscolari
  3. @tscolari
  4. @tscolari
  5. @tscolari
  6. @tscolari
Commits on Aug 30, 2011
  1. @tscolari

    Images used in image_tag should be placed in public/images and not pu…

    tscolari authored
    …blic/stylesheets on rails versions bellow 3.1
Commits on Sep 1, 2011
  1. @tscolari
Commits on Sep 20, 2011
  1. @tscolari

    changing documentation back

    tscolari authored
  2. @tscolari

    Merge branch 'master' of git://github.com/pilu/web-app-theme

    tscolari authored
    Conflicts:
    	Gemfile.lock
    	README.md
    	app/assets/stylesheets/web-app-theme/themes/activo/style.css.erb
    	app/assets/stylesheets/web-app-theme/themes/bec-green/style.css.erb
    	app/assets/stylesheets/web-app-theme/themes/bec/style.css.erb
    	app/assets/stylesheets/web-app-theme/themes/default/style.css.erb
    	app/assets/stylesheets/web-app-theme/themes/warehouse/style.css.erb
Commits on Oct 10, 2011
  1. @tscolari
Commits on Oct 12, 2011
  1. @tscolari

    Merge branch 'master' of git://github.com/pilu/web-app-theme

    tscolari authored
    Conflicts:
    	Gemfile
    	Gemfile.lock
    	web-app-theme.gemspec
This page is out of date. Refresh to see the latest.
Showing with 255 additions and 67 deletions.
  1. +1 −0  .gitignore
  2. +159 −0 Gemfile.lock
  3. +8 −8 README.md
  4. 0  {spec/dummy/public/images → app/assets/images/web-app-theme}/avatar.png
  5. 0  {spec/dummy/public/images → app/assets/images/web-app-theme}/icons/application_edit.png
  6. 0  {spec/dummy/public/images → app/assets/images/web-app-theme}/icons/cross.png
  7. 0  {spec/dummy/public/images → app/assets/images/web-app-theme}/icons/key.png
  8. 0  {spec/dummy/public/images → app/assets/images/web-app-theme}/icons/tick.png
  9. +8 −8 app/assets/stylesheets/web-app-theme/themes/activo/{style.css → style.css.erb}
  10. 0  app/assets/stylesheets/web-app-theme/themes/amro/{style.css → style.css.erb}
  11. +6 −6 app/assets/stylesheets/web-app-theme/themes/bec-green/{style.css → style.css.erb}
  12. +6 −6 app/assets/stylesheets/web-app-theme/themes/bec/{style.css → style.css.erb}
  13. 0  app/assets/stylesheets/web-app-theme/themes/blue/{style.css → style.css.erb}
  14. +17 −17 app/assets/stylesheets/web-app-theme/themes/default/{style.css → style.css.erb}
  15. +2 −2 app/assets/stylesheets/web-app-theme/themes/djime-cerulean/{style.css → style.css.erb}
  16. 0  app/assets/stylesheets/web-app-theme/themes/drastic-dark/{style.css → style.css.erb}
  17. 0  app/assets/stylesheets/web-app-theme/themes/kathleene/{style.css → style.css.erb}
  18. 0  app/assets/stylesheets/web-app-theme/themes/olive/{style.css → style.css.erb}
  19. 0  app/assets/stylesheets/web-app-theme/themes/orange/{style.css → style.css.erb}
  20. 0  app/assets/stylesheets/web-app-theme/themes/red/{style.css → style.css.erb}
  21. 0  app/assets/stylesheets/web-app-theme/themes/reidb-greenish/{style.css → style.css.erb}
  22. +4 −4 app/assets/stylesheets/web-app-theme/themes/warehouse/{style.css → style.css.erb}
  23. +22 −3 lib/generators/web_app_theme/assets/assets_generator.rb
  24. +15 −11 lib/generators/web_app_theme/theme/theme_generator.rb
  25. +3 −1 spec/dummy/app/assets/stylesheets/web_app_theme.css
  26. +4 −1 web-app-theme.gemspec
View
1  .gitignore
@@ -8,5 +8,6 @@ pkg/*
tmp/*
spec/dummy/tmp/*
spec/dummy/log/*
+spec/dummy/app/assets/*
pkg
web-app-theme-*.gem
View
159 Gemfile.lock
@@ -0,0 +1,159 @@
+PATH
+ remote: .
+ specs:
+ web-app-theme (0.8.0)
+ rails (~> 3.1.0)
+ thor (~> 0.14)
+ thor (~> 0.14)
+
+GEM
+ remote: http://rubygems.org/
+ specs:
+ actionmailer (3.1.1)
+ actionpack (= 3.1.1)
+ mail (~> 2.3.0)
+ actionpack (3.1.1)
+ activemodel (= 3.1.1)
+ activesupport (= 3.1.1)
+ builder (~> 3.0.0)
+ erubis (~> 2.7.0)
+ i18n (~> 0.6)
+ rack (~> 1.3.2)
+ rack-cache (~> 1.1)
+ rack-mount (~> 0.8.2)
+ rack-test (~> 0.6.1)
+ sprockets (~> 2.0.2)
+ activemodel (3.1.1)
+ activesupport (= 3.1.1)
+ builder (~> 3.0.0)
+ i18n (~> 0.6)
+ activerecord (3.1.1)
+ activemodel (= 3.1.1)
+ activesupport (= 3.1.1)
+ arel (~> 2.2.1)
+ tzinfo (~> 0.3.29)
+ activeresource (3.1.1)
+ activemodel (= 3.1.1)
+ activesupport (= 3.1.1)
+ activesupport (3.1.1)
+ multi_json (~> 1.0)
+ arel (2.2.1)
+ aruba (0.4.6)
+ bcat (>= 0.6.1)
+ childprocess (>= 0.2.0)
+ cucumber (>= 1.0.2)
+ rdiscount (>= 1.6.8)
+ rspec (>= 2.6.0)
+ bcat (0.6.2)
+ rack (~> 1.0)
+ builder (3.0.0)
+ capybara (1.1.1)
+ mime-types (>= 1.16)
+ nokogiri (>= 1.3.3)
+ rack (>= 1.0.0)
+ rack-test (>= 0.5.4)
+ selenium-webdriver (~> 2.0)
+ xpath (~> 0.1.4)
+ childprocess (0.2.2)
+ ffi (~> 1.0.6)
+ cucumber (1.1.0)
+ builder (>= 2.1.2)
+ diff-lcs (>= 1.1.2)
+ gherkin (~> 2.5.0)
+ json (>= 1.4.6)
+ term-ansicolor (>= 1.0.6)
+ cucumber-rails (1.1.1)
+ capybara (>= 1.1.1)
+ cucumber (>= 1.1.0)
+ nokogiri (>= 1.5.0)
+ diff-lcs (1.1.3)
+ erubis (2.7.0)
+ ffi (1.0.9)
+ gherkin (2.5.1)
+ json (>= 1.4.6)
+ hike (1.2.1)
+ i18n (0.6.0)
+ json (1.6.1)
+ json_pure (1.6.1)
+ mail (2.3.0)
+ i18n (>= 0.4.0)
+ mime-types (~> 1.16)
+ treetop (~> 1.4.8)
+ mime-types (1.16)
+ multi_json (1.0.3)
+ nokogiri (1.5.0)
+ polyglot (0.3.2)
+ rack (1.3.4)
+ rack-cache (1.1)
+ rack (>= 0.4)
+ rack-mount (0.8.3)
+ rack (>= 1.0.0)
+ rack-ssl (1.3.2)
+ rack
+ rack-test (0.6.1)
+ rack (>= 1.0)
+ rails (3.1.1)
+ actionmailer (= 3.1.1)
+ actionpack (= 3.1.1)
+ activerecord (= 3.1.1)
+ activeresource (= 3.1.1)
+ activesupport (= 3.1.1)
+ bundler (~> 1.0)
+ railties (= 3.1.1)
+ railties (3.1.1)
+ actionpack (= 3.1.1)
+ activesupport (= 3.1.1)
+ rack-ssl (~> 1.3.2)
+ rake (>= 0.8.7)
+ rdoc (~> 3.4)
+ thor (~> 0.14.6)
+ rake (0.9.2)
+ rdiscount (1.6.8)
+ rdoc (3.10)
+ json (~> 1.4)
+ rspec (2.6.0)
+ rspec-core (~> 2.6.0)
+ rspec-expectations (~> 2.6.0)
+ rspec-mocks (~> 2.6.0)
+ rspec-core (2.6.4)
+ rspec-expectations (2.6.0)
+ diff-lcs (~> 1.1.2)
+ rspec-mocks (2.6.0)
+ rspec-rails (2.6.1)
+ actionpack (~> 3.0)
+ activesupport (~> 3.0)
+ railties (~> 3.0)
+ rspec (~> 2.6.0)
+ rubyzip (0.9.4)
+ selenium-webdriver (2.8.0)
+ childprocess (>= 0.2.1)
+ ffi (>= 1.0.7)
+ json_pure
+ rubyzip
+ sprockets (2.0.2)
+ hike (~> 1.2)
+ rack (~> 1.0)
+ tilt (!= 1.3.0, ~> 1.1)
+ sqlite3 (1.3.4)
+ term-ansicolor (1.0.6)
+ thor (0.14.6)
+ tilt (1.3.3)
+ treetop (1.4.10)
+ polyglot
+ polyglot (>= 0.3.1)
+ tzinfo (0.3.30)
+ xpath (0.1.4)
+ nokogiri (~> 1.3)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ aruba
+ bundler (~> 1.0.0)
+ cucumber
+ cucumber-rails
+ rspec
+ rspec-rails
+ sqlite3
+ web-app-theme!
View
16 README.md
@@ -60,7 +60,7 @@ If you want to generate the stylesheets of a specific theme without changing the
You can specify the text used in the header with the `--app-name` option:
rails g web_app_theme:theme --app-name="My New Application"
-
+
If you need a layout for login and signup pages, you can use the `--type` option with `sign` as value. Ìf not specified, the default value is `administration`
rails g web_app_theme:theme sign --layout-type=sign
@@ -70,8 +70,8 @@ If you need a layout for login and signup pages, you can use the `--type` option
### Assets Generator
Used to copy a theme of your choice from the gem to your application, without parameters it will copy the 'default' theme
-
- rails g web_app_theme:assets --theme=red
+
+ rails g web_app_theme:assets --theme=red
This will copy the theme files on your app/assets/stylesheets/web-app-theme path.
Also this will copy theme's images to app/assets/images/web-app-theme path
@@ -85,7 +85,7 @@ Start creating your controllers manually or with a scaffold, and then use the `t
If you have a controller named like the plural of the used model you can specify just the first parameter:
rails g web_app_theme:themed posts # you have a model named Post and a controller named PostsController
-
+
rails g web_app_theme:themed admin/gallery_pictures # you have a model named GalleryPicture and a controller named Admin::GalleryPicturesController
Use the `--layout` option specifying the previously generated layout to add a link to the controller you are working on:
@@ -95,7 +95,7 @@ Use the `--layout` option specifying the previously generated layout to add a li
If the controller has a name different to the model used, specify the controller path in the first parameter and the model name in the second one:
rails g web_app_theme:themed items post
-
+
rails g web_app_theme:themed admin/items post
If you use `will_paginate` for pagination use the `--will-paginate`:
@@ -107,12 +107,12 @@ You can specify the template engine with `--engine=name` option, where name can
rails g web_app_theme:themed posts --engine=haml
If you have something like `map.resource :dashboard` in your `routes.rb` file, you can use the `--type=text` to generate a view with just text:
-
+
rails g web_app_theme:themed dashboards --themed-type=text
If you want to show form error messages inside the generated forms, use the following code inside your `environment.rb`
- ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
+ ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
if html_tag =~ /<label/
%|<div class="fieldWithErrors">#{html_tag} <span class="error">#{[instance.error_message].join(', ')}</span></div>|.html_safe
else
@@ -123,7 +123,7 @@ If you want to show form error messages inside the generated forms, use the foll
If you want to have translated pages, simple create in your locale.yml the keys just like config/locales/en_us.yml example.
en_us:
- web-app-theme:
+ web-app-theme:
save: Save
cancel: Cancel
list: List
View
0  spec/dummy/public/images/avatar.png → app/assets/images/web-app-theme/avatar.png
File renamed without changes
View
0  .../public/images/icons/application_edit.png → .../web-app-theme/icons/application_edit.png
File renamed without changes
View
0  spec/dummy/public/images/icons/cross.png → ...sets/images/web-app-theme/icons/cross.png
File renamed without changes
View
0  spec/dummy/public/images/icons/key.png → ...assets/images/web-app-theme/icons/key.png
File renamed without changes
View
0  spec/dummy/public/images/icons/tick.png → ...ssets/images/web-app-theme/icons/tick.png
File renamed without changes
View
16 ...ets/web-app-theme/themes/activo/style.css → ...web-app-theme/themes/activo/style.css.erb
@@ -45,7 +45,7 @@ hr {
color: #e2e2e2;
}
-#header {
+#header {
background: #002134;
}
@@ -153,7 +153,7 @@ hr {
#sidebar ul li {
background-position: 15px 11px;
background-repeat: no-repeat;
- background-image: url("/web-app-theme/themes/activo/images/arrow.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/arrow.png") %>");
border-bottom: 1px solid #e2e2e2;
}
@@ -168,7 +168,7 @@ hr {
#main-navigation {
background-color: #f4f4f4;
- background-image: url("/web-app-theme/themes/activo/images/menubar-background.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/menubar-background.png") %>");
background-repeat: repeat-x;
}
@@ -193,7 +193,7 @@ hr {
background-color: #f2f1ee;
border-bottom: none;
border-bottom-width: 5px;
- background-image: url("/web-app-theme/themes/activo/images/boxbar-background.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/boxbar-background.png") %>");
}
.secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
@@ -219,7 +219,7 @@ hr {
.pagination a, .pagination span {
background-color: #f4f4f4;
- background-image: url("/web-app-theme/themes/activo/images/button-background.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/button-background.png") %>");
color: #111;
text-align: center;
min-width: 15px;
@@ -246,7 +246,7 @@ hr {
}
.pagination a:active {
- background-image: url("/web-app-theme/themes/activo/images/button-background-active.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/button-background-active.png") %>");
outline: none;
}
@@ -316,7 +316,7 @@ hr {
a.button, button.button {
background-color: #f4f4f4;
- background-image: url("/web-app-theme/themes/activo/images/button-background.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/button-background.png") %>");
border: 1px solid #c3c4ba;
font-family: helvetica, arial, sans-serif;
font-weight: normal;
@@ -338,7 +338,7 @@ a.button:hover, button.button:hover {
a.button:active, button.button:active {
outline: none;
background-color: #ddd;
- background-image: url("/web-app-theme/themes/activo/images/button-background-active.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/activo/images/button-background-active.png") %>");
}
/* flash-messages */
View
0  ...heets/web-app-theme/themes/amro/style.css → ...s/web-app-theme/themes/amro/style.css.erb
File renamed without changes
View
12 .../web-app-theme/themes/bec-green/style.css → ...-app-theme/themes/bec-green/style.css.erb
@@ -4,11 +4,11 @@ h1, h2, h3 {color:#444}
body {
color: #222;
background: #e5e5e5;
- font-family: "Bitstream Vera Sans", verdana, sans-serif;
+ font-family: "Bitstream Vera Sans", verdana, sans-serif;
}
hr {
- background: #f0f0ee;
+ background: #f0f0ee;
}
p {
@@ -96,7 +96,7 @@ input.checkbox {
}
-#sidebar h3 {
+#sidebar h3 {
background: #c7d8d8;
border-bottom:1px solid #999;
padding: 5px 10px;
@@ -204,7 +204,7 @@ input.checkbox {
display: block;
width: 12px;
height: 12px;
- background: transparent url('/web-app-theme/themes/bec-green/images/tick.png') center no-repeat;
+ background: transparent url("<%= asset_path('web-app-theme/themes/bec-green/images/tick.png') %>") center no-repeat;
text-indent: -9999px;
-moz-outline: none;
}
@@ -281,10 +281,10 @@ ul.list li .left {
/* box */
#box .block {
- background: #FFF;
+ background: #FFF;
}
#box .block h2 {
- background: #48625B;
+ background: #48625B;
color: #FFF;
}
View
12 ...sheets/web-app-theme/themes/bec/style.css → ...ts/web-app-theme/themes/bec/style.css.erb
@@ -4,11 +4,11 @@ h1, h2, h3 {color:#444}
body {
color: #333;
background: #e5e5e5;
- font-family: Verdana, Arial, "Bitstream Vera Sans", sans-serif;
+ font-family: Verdana, Arial, "Bitstream Vera Sans", sans-serif;
}
hr {
- background: #f0f0ee;
+ background: #f0f0ee;
}
p {
@@ -101,7 +101,7 @@ input.checkbox {
}
-#sidebar h3 {
+#sidebar h3 {
background: #c7d8d8;
border-bottom:1px solid #999;
padding: 5px 10px;
@@ -210,7 +210,7 @@ input.checkbox {
display: block;
width: 12px;
height: 12px;
- background: transparent url('/web-app-theme/themes/bec/images/tick.png') center no-repeat;
+ background: transparent url("<%= asset_path('web-app-theme/themes/bec/images/tick.png') %>") center no-repeat;
text-indent: -9999px;
-moz-outline: none;
}
@@ -292,10 +292,10 @@ ul.list li .left {
/* box */
#box .block {
- background: #FFF;
+ background: #FFF;
}
#box .block h2 {
- background: #006666;
+ background: #006666;
color: #FFF;
}
View
0  ...heets/web-app-theme/themes/blue/style.css → ...s/web-app-theme/themes/blue/style.css.erb
File renamed without changes
View
34 ...ts/web-app-theme/themes/default/style.css → ...eb-app-theme/themes/default/style.css.erb
@@ -1,31 +1,31 @@
/* Activo 2 by David Francisco (activo.dmfranc.com) - tiny version for web-app-theme */
@font-face {
font-family: "MuseoSans500";
- src: url("/web-app-theme/themes/default/fonts/museosans_500-webfont.eot");
- src: local(""), url("/web-app-theme/themes/default/fonts/museosans_500-webfont.woff") format("woff"), url("/web-app-theme/themes/default/fonts/museosans_500-webfont.ttf") format("truetype"), url("/web-app-theme/themes/default/fonts/museosans_500-webfont.svg#webfontxgyHgdAL") format("svg");
+ src: url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500-webfont.eot") %>");
+ src: local("☺"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500-webfont.woff") %>") format("woff"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500-webfont.ttf") %>") format("truetype"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500-webfont.svg#webfontxgyHgdAL") %>") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "MuseoSans500Italic";
- src: url("/web-app-theme/themes/default/fonts/museosans_500_italic-webfont.eot");
- src: local(""), url("/web-app-theme/themes/default/fonts/museosans_500_italic-webfont.woff") format("woff"), url("/web-app-theme/themes/default/fonts/museosans_500_italic-webfont.ttf") format("truetype"), url("/web-app-theme/themes/default/fonts/museosans_500_italic-webfont.svg#webfonteCRZCYEf") format("svg");
+ src: url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500_italic-webfont.eot") %>");
+ src: local("☺"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500_italic-webfont.woff") %>") format("woff"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500_italic-webfont.ttf") %>") format("truetype"), url("<%= asset_path("web-app-theme/themes/default/fonts/museosans_500_italic-webfont.svg#webfonteCRZCYEf") %>") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Museo700";
- src: url("/web-app-theme/themes/default/fonts/museo700-regular-webfont.eot");
- src: local(""), url("/web-app-theme/themes/default/fonts/museo700-regular-webfont.woff") format("woff"), url("/web-app-theme/themes/default/fonts/museo700-regular-webfont.ttf") format("truetype"), url("/web-app-theme/themes/default/fonts/museo700-regular-webfont.svg#webfontOC5Ke5xr") format("svg");
+ src: url("<%= asset_path("web-app-theme/themes/default/fonts/museo700-regular-webfont.eot") %>");
+ src: local("☺"), url("<%= asset_path("web-app-theme/themes/default/fonts/museo700-regular-webfont.woff") %>") format("woff"), url("<%= asset_path("web-app-theme/themes/default/fonts/museo700-regular-webfont.ttf") %>") format("truetype"), url("<%= asset_path("web-app-theme/themes/default/fonts/museo700-regular-webfont.svg#webfontOC5Ke5xr") %>") format("svg");
font-weight: normal;
font-style: normal;
}
body {
color: #111111;
- background: #c4c4c4 url("/web-app-theme/themes/default/images/bgd.jpg");
+ background: #c4c4c4 url("<%= asset_path("web-app-theme/themes/default/images/bgd.jpg") %>");
font-family: "MuseoSans500", helvetica, arial, sans-serif;
}
@@ -125,7 +125,7 @@ hr {
}
.secondary-navigation {
- background: #e0e0e0 url("/web-app-theme/themes/default/images/boxbar-background.png") top;
+ background: #e0e0e0 url("<%= asset_path("web-app-theme/themes/default/images/boxbar-background.png") %>") top;
border-bottom-width: 0px;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
@@ -239,7 +239,7 @@ hr {
#sidebar ul li {
background-position: 0 11px;
background-repeat: no-repeat;
- background-image: url("/web-app-theme/themes/default/images/arrow.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/default/images/arrow.png") %>");
border-bottom: 1px dashed #777777;
list-style-type: none;
}
@@ -268,7 +268,7 @@ hr {
min-width: 15px;
text-align: center;
background: #dddddd;
- background-image: url("/web-app-theme/themes/default/images/button-background.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/default/images/button-background.png") %>");
color: #111111;
}
.pagination a:hover {
@@ -284,7 +284,7 @@ hr {
}
.pagination a:active {
- background-image: url("/web-app-theme/themes/default/images/button-background-active.png");
+ background-image: url("<%= asset_path("web-app-theme/themes/default/images/button-background-active.png") %>");
outline: none;
}
@@ -357,17 +357,17 @@ hr {
}
.flash .error, .flash .error-list {
border: 1px solid #993624;
- background: #cc4831 url("/web-app-theme/themes/default/images/messages/error.png") no-repeat 10px center;
+ background: #cc4831 url("<%= asset_path("web-app-theme/themes/default/images/messages/error.png") %>") no-repeat 10px center;
}
.flash .warning {
border: 1px solid #bb9004;
- background: #f9c006 url("/web-app-theme/themes/default/images/messages/warning.png") no-repeat 10px center;
+ background: #f9c006 url("<%= asset_path("web-app-theme/themes/default/images/messages/warning.png") %>") no-repeat 10px center;
}
.flash .notice {
color: #28485e;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
border: 1px solid #8a9daa;
- background: #b8d1e2 url("/web-app-theme/themes/default/images/messages/notice.png") no-repeat 10px center;
+ background: #b8d1e2 url("<%= asset_path("web-app-theme/themes/default/images/messages/notice.png") %>") no-repeat 10px center;
}
.flash .error-list {
text-align: left;
@@ -421,7 +421,7 @@ ul.list li .item .avatar {
}
a.button, button.button {
- background: #edeeed url("/web-app-theme/themes/default/images/button-background.png") top;
+ background: #edeeed url("<%= asset_path("web-app-theme/themes/default/images/button-background.png") %>") top;
border: 1px solid #c3c4ba;
font-family: "MuseoSans500", helvetica, arial, sans-serif;
font-weight: normal;
@@ -434,11 +434,11 @@ a.button, button.button {
}
a.button:link, a.button:visited, a.button:hover, a.button:active, button.button:link, button.button:visited, button.button:hover, button.button:active {
font-weight: normal;
- background: #edeeed url("/web-app-theme/themes/default/images/button-background.png") top;
+ background: #edeeed url("<%= asset_path("web-app-theme/themes/default/images/button-background.png") %>") top;
}
a.button:active, button.button:active {
- background: #eaeaea url("/web-app-theme/themes/default/images/button-background-active.png") top;
+ background: #eaeaea url("<%= asset_path("web-app-theme/themes/default/images/button-background-active.png") %>") top;
outline: none;
margin-top: 1px;
margin-bottom: -1px;
View
4 ...app-theme/themes/djime-cerulean/style.css → ...theme/themes/djime-cerulean/style.css.erb
@@ -267,7 +267,7 @@ ul.list li .item .avatar {
/* rounded borders */
-#main, #main-navigation, #main-navigation li, #main-navigation li a, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
+#main, #main-navigation, #main-navigation li, #main-navigation li a, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
#footer .block, .form input.button, #box .block, #box .block h2 {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
@@ -295,4 +295,4 @@ ul.list li .item .avatar {
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-}
+}
View
0  ...b-app-theme/themes/drastic-dark/style.css → ...p-theme/themes/drastic-dark/style.css.erb
File renamed without changes
View
0  .../web-app-theme/themes/kathleene/style.css → ...-app-theme/themes/kathleene/style.css.erb
File renamed without changes
View
0  ...eets/web-app-theme/themes/olive/style.css → .../web-app-theme/themes/olive/style.css.erb
File renamed without changes
View
0  ...ets/web-app-theme/themes/orange/style.css → ...web-app-theme/themes/orange/style.css.erb
File renamed without changes
View
0  ...sheets/web-app-theme/themes/red/style.css → ...ts/web-app-theme/themes/red/style.css.erb
File renamed without changes
View
0  ...app-theme/themes/reidb-greenish/style.css → ...theme/themes/reidb-greenish/style.css.erb
File renamed without changes
View
8 .../web-app-theme/themes/warehouse/style.css → ...-app-theme/themes/warehouse/style.css.erb
@@ -9,7 +9,7 @@ body {
}
hr {
- background: #aaa;
+ background: #aaa;
}
p {
@@ -118,7 +118,7 @@ input.checkbox {
}
-#sidebar h3 {
+#sidebar h3 {
background: #fff;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
@@ -287,7 +287,7 @@ input.checkbox {
display: block;
width: 12px;
height: 12px;
- background: transparent url('/web-app-theme/themes/warehouse/images/tick.png') center no-repeat;
+ background: transparent url("<%= asset_path('web-app-theme/themes/warehouse/images/tick.png') %>") center no-repeat;
text-indent: -9999px;
-moz-outline: none;
}
@@ -384,7 +384,7 @@ ul.list li .left {
}
#box .block h2 {
- background: #576C82;
+ background: #576C82;
color: #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
View
25 lib/generators/web_app_theme/assets/assets_generator.rb
@@ -5,13 +5,32 @@ class AssetsGenerator < Rails::Generators::Base
class_option :theme, :type => :string, :default => :default, :desc => 'Specify the layout theme to be copied'
def copy_stylesheets
- copy_file "stylesheets/web-app-theme/base.css" , "app/assets/stylesheets/web-app-theme/base.css"
- directory "stylesheets/web-app-theme/themes/#{options.theme}" , "app/assets/stylesheets/web-app-theme/themes/#{options.theme}"
+ assets_base = ("app/assets/stylesheets" if Rails.version >= "3.1.0") || "public/stylesheets"
+ copy_file "stylesheets/web-app-theme/base.css" , "#{assets_base}/web-app-theme/base.css"
+ directory "stylesheets/web-app-theme/themes/#{options.theme}" , "#{assets_base}/web-app-theme/themes/#{options.theme}"
+
+ # Removing the .ERB and placing a compiled style.css in it's place when the rails version is < 3.1.0
+ if Rails.version < "3.1.0"
+ remove_file "#{assets_base}/web-app-theme/themes/#{options.theme}/style.css.erb"
+ template "stylesheets/web-app-theme/themes/#{options.theme}/style.css.erb", "#{assets_base}/web-app-theme/themes/#{options.theme}/style.css"
+ end
end
def copy_images
- directory "images/web-app-theme/themes/#{options.theme}" , "app/assets/images/web-app-theme/themes/#{options.theme}"
+ assets_base = ("app/assets/images" if Rails.version >= "3.1.0") || "public/stylesheets"
+ directory "images/web-app-theme/themes/#{options.theme}" , "#{assets_base}/web-app-theme/themes/#{options.theme}"
+
+ assets_base = ("app/assets/images" if Rails.version >= "3.1.0") || "public/images"
+ directory "images/web-app-theme/icons" , "#{assets_base}/web-app-theme/icons"
+ copy_file "images/web-app-theme/avatar.png" , "#{assets_base}/web-app-theme/avatar.png"
+ end
+
+ private
+
+ def asset_path(source, default_ext = nil, body = false)
+ "/stylesheets/#{source}"
end
+
end
end
View
26 lib/generators/web_app_theme/theme/theme_generator.rb
@@ -2,32 +2,36 @@ module WebAppTheme
class ThemeGenerator < Rails::Generators::Base
desc "Installs the application layout and creates the web_app_theme.css"
source_root File.expand_path('../templates', __FILE__)
-
+
argument :layout_name, :type => :string, :default => 'application'
-
+
class_option :theme, :type => :string, :default => :default, :desc => 'Specify the layout theme'
class_option :app_name, :type => :string, :default => 'Web App', :desc => 'Specify the application name'
class_option :engine, :type => :string, :default => 'erb', :desc => 'Specify the template engine'
class_option :no_layout, :type => :boolean, :default => false, :desc => 'Use this option if you want to generate only stylesheets'
class_option :layout_type, :type => :string, :default => 'admin', :desc => 'Layout type, admin or sign'
-
+
def copy_layout
- return if options.no_layout
+ return if options.no_layout
admin_layout_name = options.layout_type == 'sign' ? "layout_sign.html.erb" : "layout_admin.html.erb"
case options.engine
when 'erb'
template admin_layout_name, "app/views/layouts/#{layout_name.underscore}.html.erb"
when 'haml'
- generate_haml_layout(admin_layout_name)
- end
+ generate_haml_layout(admin_layout_name)
+ end
end
-
- def copy_theme_stylesheet
- template "web_app_theme.css.erb", "app/assets/stylesheets/web_app_theme.css"
+
+ def copy_theme_stylesheet
+ if Rails.version >= "3.1.0"
+ template "web_app_theme.css.erb", "app/assets/stylesheets/web_app_theme.css"
+ else
+ generate "web_app_theme:assets"
+ end
end
-
+
protected
-
+
def generate_haml_layout(admin_layout_name)
require 'haml'
Dir.mktmpdir('web-app-theme-haml') do |haml_root|
View
4 spec/dummy/app/assets/stylesheets/web_app_theme.css
@@ -3,5 +3,7 @@
*
*= require web-app-theme/base
*= require web-app-theme/themes/default/style.css
- *
+ *= require_self
*/
+
+/* Write here your css for overriding the theme's rules */
View
5 web-app-theme.gemspec
@@ -20,9 +20,12 @@ Gem::Specification.new do |s|
s.required_rubygems_version = '>= 1.3.6'
- s.add_runtime_dependency 'rails', '~> 3.1.0.rc6'
+ s.add_runtime_dependency 'rails', '~> 3.1.0'
s.add_runtime_dependency 'thor', '~> 0.14'
+ s.required_rubygems_version = ">= 1.3.6"
+ #s.add_dependency "rails" , "~> 3.1.0.rc6"
+ s.add_dependency "thor" , "~> 0.14"
s.add_development_dependency 'bundler', '~> 1.0.0'
s.add_development_dependency 'rspec-rails'
s.add_development_dependency 'rspec'
Something went wrong with that request. Please try again.