2010年10月23日土曜日

web-app-theme

そろそろhaml、scssでviewを実際に書いてみたほうがいいので、日報作成アプリに戻ろう、と考えて、実験プロジェクトで最後に試したのがweb-app-theme。ご存知お便利テーマ自動適用pluginです。
viewのデザインって面倒、というかやっているうちに支離滅裂になるので、ベースになるところは慣れている人にやってもらって、自分はpartialいじるくらいにしたほうがいいかな、というのが試用の動機ですね。
rails3にもちゃんと対応していて、Gemfileに
gem 'web-app-theme',''>=0.6.2'
と書けば無事installされました。
engineにhamlを指定すればちゃんとhamlのファイルを吐き出してくれますが、hamlを指定するならhpricotとruby_parserもgem installする必要がありました。
試行錯誤してるうちにできたapplication.html.erbのほうはこんな感じ。
Web App
  <%= stylesheet_link_tag "web-app-theme/base", "web-app-theme/themes/default/style", "web-app-theme/override", :cache => true %>
  <%= javascript_include_tag :defaults, :cache => true %>
  <%= csrf_meta_tag %>

  
<% flash.each do |type, message| -%>
<%= message %>
<% end -%>
<%= yield %>
で、hamlはこうなる、と。
!!!
%html
  %head
    %title Web App
    = stylesheet_link_tag "web-app-theme/base", "web-app-theme/themes/default/style", "web-app-theme/override", :cache => true
    = javascript_include_tag :defaults, :cache => true
    = csrf_meta_tag
  %body
    #container
      #header
        %h1
          %a{:href => "/"} Web App
        #user-navigation
          %ul.wat-cf
            %li
              %a{:href => "#"}= t("web-app-theme.profile", :default => "Profile")
            %li
              %a{:href => "#"}= t("web-app-theme.settings", :default => "Settings")
            %li
              %a.logout{:href => "/logout"}= t("web-app-theme.logout", :default => "Logout")
        #main-navigation
          %ul.wat-cf
      #wrapper.wat-cf
        .flash
          - flash.each do |type, message|
            %div{:class => "message #{type}"}
              %p= message
        #main
          = yield
          #footer
            .block
              %p
                Copyright © #{Time.now.year} Web App.
        #sidebar
          = yield :sidebar
そして実行中のブラウザ画面。
実験用のプロジェクトはいつもblog風のアプリにするので、たまたまpostをscaffoldしてあったので、
rails g web_app_theme:themed posts --engine=haml
としてみる。
そしたらこんな実行画面になりました。

テーマを変えるのもとりあえず簡単だし、なかなかいいですね。

0 件のコメント:

コメントを投稿